Home / , / Customizing the User Menu in WPResidence Headers

Customizing the User Menu in WPResidence Headers

721 views

The user menu in WPResidence headers is a crucial element for user interaction, providing quick access to account-related functions. This guide will walk you through various ways to customize the user menu to enhance user experience and match your website’s design.

Understanding the Default User Menu

By default, WPResidence displays a user menu in the header that typically includes options for login, register, and access to the user dashboard. The appearance and functionality of this menu can be customized to better suit your needs.

Modifying User Menu Content

To add or remove items from the user menu, you can use the ‘wpresidence_user_menu_items’ filter. Add this to your child theme’s functions.php:


function custom_user_menu_items($menu_items) {
// Add a new menu item
$menu_items['custom_page'] = array(
'label' => __('Custom Page', 'wpresidence-child'),
'url' => home_url('/custom-page/'),
);
// Remove an existing item
unset($menu_items['my_profile']);

return $menu_items;
add_filter(‘wpresidence_user_menu_items’, ‘custom_user_menu_items’);

Styling the User Menu

To customize the appearance of the user menu, add these styles to your child theme’s style.css:


.user_menu {
background-color: #f8f8f8;
border-radius: 5px;
}
.user_menu_register {
color: #0073e1;
font-weight: bold;
}
.user_menu_register:hover {
text-decoration: underline;
}
.user_menu_logged .menu_user_picture {
border: 2px solid #0073e1;
}

Customizing User Menu for Logged-in Users

You can add custom functionality for logged-in users. Here’s an example that adds a greeting and a custom link:


function custom_logged_in_menu($items) {
if (is_user_logged_in()) {
$user = wp_get_current_user();
$items = '<li>Welcome, ' . $user->display_name . '!</li>' . $items;
$items .= '<li><a href="' . home_url('/my-favorites/') . '">My Favorites</a></li>';
}
return $items;
}
add_filter('wpresidence_user_menu_items', 'custom_logged_in_menu');

Adding Icons to User Menu Items

Enhance the visual appeal of your user menu by adding icons. You can use Font Awesome icons, which are included with WPResidence:


function add_icons_to_user_menu($items) {
foreach ($items as $key => &$item) {
switch ($key) {
case 'add_listing':
$item['icon'] = 'fas fa-plus';
break;
case 'my_properties':
$item['icon'] = 'fas fa-home';
break;
// Add more cases as needed
}
}
return $items;
}
add_filter('wpresidence_user_menu_items', 'add_icons_to_user_menu');

Then, in your child theme’s style.css:


.user_menu_item .menu_icon {
margin-right: 5px;
}

Creating a Custom User Menu Template

For more extensive customizations, you can create a custom template for the user menu. Create a file named ‘user-menu-custom.php’ in your child theme and add:


<?php
$current_user = wp_get_current_user();
$user_custom_picture = get_the_author_meta('custom_picture', $current_user->ID);
$user_small_picture = get_the_author_meta('small_custom_picture', $current_user->ID);
if (is_user_logged_in()) {
?>
<div class="user_menu user_loged">
<div class="menu_user_picture" style="background-image: url('<?php echo esc_url($user_custom_picture); ?>');"></div>
<ul class="user_menu_list">
<li><a href="<?php echo esc_url(home_url('/my-profile/')); ?>"><i class="fas fa-user"></i> My Profile</a></li>
<li><a href="<?php echo esc_url(home_url('/my-properties/')); ?>"><i class="fas fa-home"></i> My Properties</a></li>
<li><a href="<?php echo wp_logout_url(home_url()); ?>"><i class="fas fa-sign-out-alt"></i> Logout</a></li>
</ul>
</div>
<?php
} else {
?>
<div class="user_menu">
<a href="<?php echo esc_url(home_url('/login/')); ?>" class="user_menu_login">Login</a>
<a href="<?php echo esc_url(home_url('/register/')); ?>" class="user_menu_register">Register</a>
</div>
<?php
}
?>

Then, in your child theme’s functions.php:


function custom_user_menu_template($template) {
return get_stylesheet_directory() . '/user-menu-custom.php';
}
add_filter('wpresidence_user_menu_template', 'custom_user_menu_template');

Adding AJAX Functionality to the User Menu

To enhance user experience, you can add AJAX functionality to the user menu. Here’s an example that loads the user’s favorite properties without a page reload:


// In your child theme's functions.php
function load_favorites_ajax() {
check_ajax_referer('my_favorites_nonce', 'security');
$user_id = get_current_user_id();
$favorites = get_user_meta($user_id, 'favorite_properties', true);
if (!empty($favorites)) {
foreach ($favorites as $property_id) {
echo '<li>' . get_the_title($property_id) . '</li>';
}
} else {
echo '<li>No favorites found</li>';
}
wp_die();
add_action('wp_ajax_load_favorites', 'load_favorites_ajax');

Add this JavaScript to your child theme:


jQuery(document).ready(function($) {
$('.load-favorites').on('click', function(e) {
e.preventDefault();
$.ajax({
url: wpresidence_ajax_vars.ajaxurl,
type: 'POST',
data: {
action: 'load_favorites',
security: wpresidence_ajax_vars.nonce
},
success: function(response) {
$('.favorites-list').html(response);
}
});
});
});

Responsive Design for User Menu

Ensure your user menu looks good on all devices by adding these responsive styles to your child theme’s style.css:


@media only screen and (max-width: 768px) {
.user_menu {
position: absolute;
right: 15px;
top: 15px;
}
.user_menu_list {
position: absolute;
top: 100%;
right: 0;
background: #fff;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
display: none;
}
.user_menu:hover .user_menu_list {
display: block;
}
}

By implementing these customizations, you can create a user menu that not only matches your website’s design but also provides a more intuitive and efficient user experience. Remember to test all changes thoroughly, especially when adding new functionality or modifying existing features.