Profile Image displaying on Wrong side of WordPress Navigation Menu

Question

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 database table and the image is then stored inside the WordPress wp-content/uploads folder. This works fine.

When a user logs in, I want to display the profile photo next to the username at the top-left corner of the dashboard.

To achieve this I have utilized the init action hook that fetches the image URL from the database and stores it in a wp_cache.

function fectch_custom_profile_picture() {


    if ( is_user_logged_in() ) {

        global $wpdb;
        $user_id = get_current_user_id(); 
        $table_name  = "profile_details";
    
    //Query table to fetch image Url
        $query_result = $wpdb->get_results("SELECT * FROM  $table_name WHERE user_id =  $user_id");
    
    //Store image url in cache
        wp_cache_set( 'profileImageUrl', $query_result[0]->avatarUrl);
    } 
}
add_action( 'init', 'fectch_custom_profile_picture' );

Next, am utilizing nav_menu_item_title to append the photo next to username, this shoudl be displayed instantly. Ideally it should be: Welcome test [profileimagehere]

function add_image_beside_username($title, $menu_item , $args, $depth) {
    
    //Fetch the image from wp_cache and store in a variable
    $img = '<img src="' . wp_cache_get( 'profileImageUrl' ) .'" class="custom-avatar">';
     
    //Ultimate Member logged in details
    $user_id = get_current_user_id();
    um_fetch_user( $user_id );
    $display_name = um_user('display_name');

     //Check if title is equal to: Welcome {username}, if true appand the profile image next to it
    if($title == 'Welcome ' .  $display_name){
        $title .=  print_r($img);
     }
     return $title;
}
add_filter('nav_menu_item_title', 'add_image_beside_username', 10, 4);

The image displays on the screen but it displays on the wrong side. See below.

enter image description here

I want it to display on the far-left corner after Welcome test.

Researched this for hours but not successful, Please assist?

0
Pweb 4 weeks 2022-12-31T01:21:17-05:00 0 Answers 0 views 0

Leave an answer

Browse
Browse