Friday, December 30, 2022
HomeWordPress Developmenthooks - Displaying a Customized Avatar in WP Bootstrap Navwalker Menus in...

hooks – Displaying a Customized Avatar in WP Bootstrap Navwalker Menus in WordPress


Am making a WordPress web site whereby am enabling customers to add their very own customized profile photos from a customized type. As soon as they add am storing the picture URL in a customized database desk and the picture is then saved contained in the WordPress wp-content/uploads folder. This works advantageous

enter image description here

Subsequent, am invoking the Hook filter referred to as get_avatar in my features.php to fetch the avatarUrl from the customized database desk above through the user_id of the logged-in consumer. The code beneath works advantageous

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

    // Get the consumer by ID or by e mail
    $consumer = false;
    if ( is_numeric( $id_or_email ) ) {
        $consumer = 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;
            $consumer = get_user_by( 'id' , $id );
        }
    } 
    else {
        $consumer = get_user_by( 'e mail', $id_or_email );    
    }
    if ( $consumer && is_object( $consumer ) ) {

        //Queried profile_details desk
        world $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.  That is WP default.
            $avatar = sprintf(
                "<img alt="https://wordpress.stackexchange.com/questions/412458/%s" src="https://wordpress.stackexchange.com/questions/412458/%s" class="https://wordpress.stackexchange.com/questions/412458/%s" peak="%d" width="%d" %s/>",
                esc_attr( $alt ),
                esc_url( $avatar_url ),
                esc_attr( "avatar avatar-" . $dimension . " picture" ),                
                (int) $args['height'],
                (int) $args['width'],
                $args['extra_attr']
            );
        }
    }

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

    return $avatar;
}

Once I invoke the get_avatar technique from web site header.php, am getting the picture displayed as proven beneath, however I would like it displayed within the far-right nook subsequent to the username.
Ideally, it ought to be Welcome check [avatar-image-displayed]

enter image description here

Under is the Navwalker class am utilizing:

<?php
          wp_nav_menu(array(
             '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 help in making the avatar displayed dynamically contained in the customized navwalker menu class, attempt researching this however haven’t been profitable for a lot of hours.

RELATED ARTICLES

LEAVE A REPLY

Please enter your comment!
Please enter your name here

- Advertisment -
Google search engine

Most Popular

Recent Comments