Options for Top Bar in WPResidence

The top bar in WPResidence is a versatile element that can display important information, social media links, or additional navigation options. This guide will walk you through the process of enabling, customizing, and maximizing the potential of your top bar.

Enabling the Top Bar

First, let’s ensure the top bar is enabled in your WPResidence theme:

1. Navigate to WPResidence Theme Options
2. Look for the “Header” or “Top Bar” section
3. Find the option to enable the top bar (usually labeled “Show Top Bar” or similar)
4. Set this option to “Yes” or “Enabled”
5. Save your changes

Customizing Top Bar Appearance

WPResidence offers several built-in options to customize the top bar’s appearance. Here’s how to access and use them:

1. In Theme Options, find the Top Bar customization section
2. Look for options such as:
   • Background Color
   • Text Color
3. Adjust these settings to match your desired design
4. Save your changes and preview your site

Adding Content to the Top Bar

WPResidence typically uses widget areas for top bar content. Here’s how to add widgets:

1. Go to Appearance > Widgets in your WordPress dashboard
2. Look for widget areas named “Top Bar Left” and “Top Bar Right” (names may vary)
3. Drag and drop widgets into these areas. Common choices include:
   • Text widget for contact information
   • Social Icons widget
   • Custom HTML widget for advanced customization

Advanced Changes

For more advanced customization, you can add custom CSS to your child theme’s style.css file:


.top_bar_wrapper {
background-color: #f8f8f8;
border-bottom: 1px solid #e7e7e7;
}
.top_bar_wrapper .left-top-widet,
.top_bar_wrapper .right-top-widet {
font-size: 13px;
color: #333333;
}
.top_bar_wrapper a {
color: #0073e1;
}
.top_bar_wrapper a:hover {
color: #005bb7;
text-decoration: underline;
}


Creating a Custom Top Bar Layout via Code

For more control over your top bar’s content and layout, you can create a custom template. Here’s how:

1. In your child theme, create a file named top_bar.php
2. Add the following code to this file, adjusting as needed:


<?php
$show_top_bar_user_login = esc_html(wpresidence_get_option('wp_estate_show_top_bar_user_login', ''));
?>
<div class="top_bar_wrapper">
<div class="top_bar">
<div class="left-top-widet">
<!-- Add your left side content here -->
<i class="fas fa-phone"></i> (123) 456-7890
<i class="fas fa-envelope"></i> info@example.com
</div>
<div class="right-top-widet">
<!-- Add your right side content here -->
<?php
if ($show_top_bar_user_login == 'yes') {
get_template_part('templates/top_user_menu');
}
?>
<!-- Add social icons or other content -->
</div>
</div>
</div>


3. In your child theme’s functions.php file, add this code to use your custom top bar:


function custom_top_bar() {
get_template_part('top_bar');
}
add_action('wp_estate_show_top_bar', 'custom_top_bar');


Adding Dynamic Content to the Top Bar

You can enhance your top bar with dynamic content. Here’s an example of adding the current date:


function add_date_to_top_bar($items, $args) {
if($args->theme_location == 'top_bar_left') {
$items .= '<li class="menu-item">' . date('F j, Y') . '</li>';
}
return $items;
}
add_filter('wp_nav_menu_items', 'add_date_to_top_bar', 10, 2);


Creating a Dropdown Menu in the Top Bar

To add a dropdown menu to your top bar, you can use this custom code:


function add_language_dropdown_to_top_bar($items, $args) {
if($args->theme_location == 'top_bar_right') {
$items .= '<li class="menu-item-has-children">
<a href="#">Language</a>
<ul class="sub-menu">
<li><a href="#">English</a></li>
<li><a href="#">French</a></li>
<li><a href="#">Spanish</a></li>
</ul>
</li>';
}
return $items;
}
add_filter('wp_nav_menu_items', 'add_language_dropdown_to_top_bar', 10, 2);


Making the Top Bar Responsive

Ensure your top bar looks good on all devices with responsive CSS:


@media (max-width: 768px) {
.top_bar_wrapper {
display: none; /* Hide on mobile by default */
}
.top_bar_wrapper.mobile_open {
display: block;
}
.left-top-widet,
.right-top-widet {
float: none;
text-align: center;
width: 100%;
}
}


Adding Sticky Functionality to the Top Bar

Make your top bar stick to the top of the page as users scroll:


.top_bar_wrapper {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 1000;
}
body {
padding-top: 40px; /* Adjust based on your top bar height */
}


Add this JavaScript to your child theme’s scripts.js file (create if it doesn’t exist):


jQuery(document).ready(function($) {
var topBar = $('.top_bar_wrapper');
var topBarHeight = topBar.outerHeight();
var lastScrollTop = 0;
$(window).scroll(function() {
var st = $(this).scrollTop();
if (st > lastScrollTop && st > topBarHeight){
// Scroll Down
topBar.addClass('top_bar_hidden');
} else {
// Scroll Up
topBar.removeClass('top_bar_hidden');
}
lastScrollTop = st;
});
});


Troubleshooting Top Bar Issues

If you encounter problems with your top bar, try these solutions:

• Top bar not appearing: Check if it’s enabled in Theme Options and that you have content in the widget areas
• Styling inconsistencies: Use your browser’s inspector tool to identify conflicting CSS rules
• Custom content not showing: Verify that your custom code is hooked correctly and that you’re targeting the right theme locations
• Responsive issues: Test on various devices and adjust your media queries as needed

Conclusion

The top bar in WPResidence is a powerful tool for displaying important information and enhancing your site’s navigation. By leveraging theme options, custom CSS, and PHP code, you can create a top bar that perfectly fits your real estate website’s needs and design aesthetic. Remember to always test your changes across different devices to ensure a consistent user experience.