Am creating a WordPress site whereby am enabling users to upload their own custom profile images from a custom form. Once they upload am storing the image URL in a custom database table and the image is then stored inside the WordPress wp-content/uploads folder. This works fine

enter image description here

Next, am invoking the Hook filter called get_avatar in my functions.php to fetch the avatarUrl from the custom database table above via the user_id of the logged-in user. The code below works fine

add_filter( 'get_avatar', 'custom_avatar', 10, 6 );
function custom_avatar( $avatar, $id_or_email, $size, $default, $alt, $args ) {

    // Get the user by ID or by email
    $user = false;
    if ( is_numeric( $id_or_email ) ) {
        $user = get_user_by( 'id' , (int)$id_or_email );
    elseif ( is_object( $id_or_email ) ) {
        if (!empty( $id_or_email->user_id ) ) {
            $id = (int)$id_or_email->user_id;
            $user = get_user_by( 'id' , $id );
    else {
        $user = get_user_by( 'email', $id_or_email );    
    if ( $user && is_object( $user ) ) {

        //Queried profile_details table
        global $wpdb; 
        $query_result = $wpdb->get_results("SELECT * FROM profile_details WHERE user_id = $user->ID");
        $avatar_url = $query_result[0]->avatarUrl;
        if ( $avatar_url ) {
            // HTML for the avatar <img> tag.  This is WP default.
            $avatar = sprintf(
                "<img alt='%s' src='%s' class='%s' height='%d' width='%d' %s/>",
                esc_attr( $alt ),
                esc_url( $avatar_url ),
                esc_attr( "avatar avatar-" . $size . " photo" ),                
                (int) $args['height'],
                (int) $args['width'],

    //print on screen
    ?><pre><?php var_dump( $avatar ); ?></pre><?php

    return $avatar;

When I invoke the get_avatar method from website header.php, am getting the image displayed as shown below, but I want it displayed in the far-right corner next to the username. Ideally, it should be Welcome test [avatar-image-displayed]

enter image description here

Below is the Navwalker class am using:

             'theme_location'  => 'loggedin',
             'container'       => 'nav',
             'container_class' => 'menu-toggle',
             'container_id'    => 'navcol-1',
             'menu_class'      => 'nav__menu',
             'depth'           => 2,
             'echo'            => true,
             'fallback_cb'     => 'WP_Bootstrap_Navwalker::fallback',
             'walker'          => new WP_Bootstrap_Navwalker()

Please assist in making the avatar displayed dynamically inside the custom navwalker menu class, try researching this but have not been successful for many hours.

  • Ideally, this is a HTML issue. You need to edit the header.php and call get_avatar() after wp_nav_menu(). If you want to add it as the last menu item, you need filter the wp_nav_menu_items.
    – Abhik
    Commented Dec 30, 2022 at 10:12
  • @Abhik Thanks for assistance,, Please assist with the wp_nav_menu items I will use. Not yet able to figure that out. Much thanks
    – Pweb
    Commented Dec 30, 2022 at 11:52
  • Does this answer your question? Displaying an Uploaded Image as a Custom Avatar in Wordpress
    – shanebp
    Commented Dec 30, 2022 at 19:53


Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Browse other questions tagged or ask your own question.