Profile Image displaying on Wrong side of WordPress Navigation Menu
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.
I want it to display on the far-left corner after Welcome test.
Researched this for hours but not successful, Please assist?
Leave an answer