Avatar

Hi @elnoi,

Can you please share your site URL so I can check the avatar that’s appearing outside the menu and provide you a proper solution?

Login Logout Menu has introduced some Avatar filters that allow you to modify the avatar’s behavior and appearance. Using this filter, you can change the default WordPress user avatar to your own custom image/icon and also set its width and height. Place it in your theme’s functions.php file:

/**
 * Customize HTML for login/logout menu avatar.
 *
 * @param string $avatar_html The avatar HTML.
 * @param string $username    The username.
 * @param string $avatar_url  The URL of the avatar image.
 * @return string Modified avatar HTML.
 */
function custom_login_logout_avatar_html( $complete_img, $avatar_html, $username, $avatar_url ) {
    // Create an <img> tag with the provided information
    $avatar_html = '<img src="https://cdn.iconscout.com/icon/free/png-256/free-avatar-375-456327.png" alt="' . esc_attr( $username ) . '" class="login-logout-menu-nav-avatar custom-avatar" width="192" height="192" />'. esc_attr( $username );
    
    return $avatar_html;
}

add_filter( 'login_logout_menu_avatar_html', 'custom_login_logout_avatar_html', 10, 4 );

I have used a free avatar icon URL from iconscout here in the <img> src. You can replace it with the image’s URL you want to show in the avatar. Also, update the width and height accordingly.

Let me know if this helped you with the solution you wanted!

Thank you very much for your quick help and contribution.

I’m sorry I can’t share the url because I’m still working on it on local host before buying a domain.

I have modified your code to be able to use dashicons.

But first you have to enter the following code in the functions.php file of the child theme so that the theme can display the dashicons:

//Worpress dashicons are compatible with the theme
add_action( 'wp_enqueue_scripts', 'load_dashicons_front_end' );
function load_dashicons_front_end() {
wp_enqueue_style( 'dashicons' );
}

Below is the modified code that you have provided me:

/**
 * Customize HTML for login/logout menu avatar.
 *
 * @param string $avatar_html The avatar HTML.
 * @param string $username    The username.
 * @param string $avatar_url  The URL of the avatar image.
 * @return string Modified avatar HTML.
 */
function custom_login_logout_avatar_html( $complete_img, $avatar_html, $username, $avatar_url ) {
    // Create an <img> tag with the provided information
    $avatar_html = '<span class="dashicons dashicons-admin-users"></span>' . esc_attr( $username );
    
    return $avatar_html;
}

add_filter( 'login_logout_menu_avatar_html', 'custom_login_logout_avatar_html', 10, 4 );

Note: I am not fluent in the English language. My writing is a translation made with Google Translate. I apologize if anything is not clear.

Thank you so much

• This reply was modified 8 months ago by elnoi.

You’re welcome! I’m glad to know the filter helped you achieve what you wanted. The sole purpose of it was to give our users the flexibility to redesign it as they wanted.

Ps. No worries about the language. Your message was clear, and you did it great adding the dashicon icon for the avatar. Love to see our work being expanded by creatives like you! ??