0

This is tricky to word so bear with me please.

I have generated a wp_nav_menu, menu-1, as the main-menu.

The menu is quite complex compared to a basic b**** one. Whereby you can show and hide parts based on whether the user is logged in or not.

So one of these nav elements only shows when a user is logged in. Where it will say 'Hi NAME' as a nav item.

I have been tasked with placing the user avatar before this. However, in order to get the user avatar I need to use another WP function get_avatar(). I can't see an area in the menu section in the back-end where I can place code in for a specific nav. Nor can I tell it in the header where the wp_nav_menu() function is located.

I know how to get the users avatar. I know how to style it how I wish. I do not know how to tell it where to sit / where I place my code...

Do any of you know how?

Here is my code creating the nav:

<?php
    wp_nav_menu( array(
    'theme_location' => 'menu-1',
    'menu_id'        => 'main-menu',
    'container'      => '',
    ) );
?>

This is the outputted code:

<div id="menu" class="collapse display-none lg:block width-100 lg:width-auto text-right">
    <ul class="list-reset mt0 mb0 lg:flex">
        <li class="border-top border-darken-1 lg:border-none">
            <a class="block py1 px2 lg:px1 sm:h3 bold blue hover:dark-blue">Product Categories</a>
            <ul class="sub-menu">
                <li class="border-top border-darken-1 lg:border-none"><a href="/" class="block py1 px2 lg:px1 sm:h3 bold blue hover:dark-blue">Metals</a></li>
                <li class="border-top border-darken-1 lg:border-none"><a href="/" class="block py1 px2 lg:px1 sm:h3 bold blue hover:dark-blue">Polymers</a></li>
                <li class="border-top border-darken-1 lg:border-none"><a href="/" class="block py1 px2 lg:px1 sm:h3 bold blue hover:dark-blue">Ceramics</a></li>
                <li class="border-top border-darken-1 lg:border-none"><a href="/" class="block py1 px2 lg:px1 sm:h3 bold blue hover:dark-blue">Alloys</a></li>
                <li class="border-top border-darken-1 lg:border-none"><a href="/" class="block py1 px2 lg:px1 sm:h3 bold blue hover:dark-blue">Composites</a></li>
            </ul>
        </li>
        <li class="border-top border-darken-1 lg:border-none"><a href="/" class="block py1 px2 lg:px1 sm:h3 bold blue hover:dark-blue">Designer Spotlight</a></li>
        <li class="border-top border-darken-1 lg:border-none"><a href="/" class="block py1 px2 lg:px1 sm:h3 bold blue hover:dark-blue">My Boards</a></li>
        <li class="border-top border-darken-1 lg:border-none"><a href="/" class="block py1 px2 lg:px1 sm:h3 bold blue hover:dark-blue">Hi Jason</a></li>
    </ul>
</div>

If I was to do this in css and had just a single asset to place there:

#menu a[href$='/my-account/']:before {
    content: '';
    width: 30px;
    height: 30px;
    margin-right: 10px;
    display: inline-block;
    background-image: url(https://www.catster.com/wp-content/uploads/2018/06/bringing-home-kitty-mouth-open-wide.jpg)
}

But I need to use this code that grabs the user avatar (untested - maybe I do need help with this snippet too):

function get_current_user_id() {
    if ( ! function_exists( 'wp_get_current_user' ) ) {
        return 0;
    }
    $user = wp_get_current_user();
    return ( isset( $user->ID ) ? (int) $user->ID : 0 );
    $avatar_image = get_avatar($user);
}

Hopefully you can understand / help?

Thanks, Jason.

EDIT: Just to reopen this, the theory is right for the 'correct answer' in the answers but I don't actually get the avatar returned from the function:

<?php 
function get_current_user_avatar_url() {
    if ( ! function_exists( 'wp_get_current_user_id' ) ) {
        return false;
    }

    $user = wp_get_current_user_id();
    return get_avatar_url($user);
} 

$avatarURL = get_current_user_avatar_url(); ?>

<?php if ($avatarURL != '') : ?>

    <style>
        #menu a[href$='/my-account/']:before {
            content: '';
            width: 30px;
            height: 30px;
            margin-right: 10px;
            display: inline-block;
            background-image: url(<?php if ($avatarURL != '') : ?><?php echo $avatarURL; ?><?php endif; ?>);
        }
    </style>

Please can someone help me get this snippet working now I know where and how to utilise it within the code?

1

The easiest way to do that would be to inline some CSS in your php template. then you could replace that hardcoded image URL with the users avatar like background-image: url("' . echo $avatarURL . ");

You will definitely need to fix your snippet to get the avatar as well though. currently you're returning the user ID and then trying to grab the avatar. anything after a return statement is unreachable code.

function get_current_user_avatar_url() {
    if ( ! function_exists( 'get_current_user_id' ) ) {
        return false;
    }
    $user = get_current_user_id();

    return get_avatar_url($user);
}

then define $avatarURL like $avatarURL = get_current_user_avatar_url();

Otherwise you're getting into writing a custom nav walker, which is much more complicated.

12
  • I haven't tested this yet but I am fairly confident this will work. Thanks! – Jason Is My Name Mar 21 '19 at 17:50
  • I haven't been able to get this to work, I am pretty sure your code looks like it should work. Can you think of where this might have a cheeky bug? - see my edit in the question for my implementation. – Jason Is My Name Mar 25 '19 at 13:26
  • so what is get_current_user_avatar_url returning for you? – mrben522 Mar 25 '19 at 14:11
  • I wrapped the code into an if statement asking if AvatarURL was not null. It then doesn't run through this part so I assume 'null'. I will quickly through a var_dump in there to test. – Jason Is My Name Mar 25 '19 at 14:22
  • 1
    my bad, use get_current_user_id instead of wp_get_current_user_id – mrben522 Mar 25 '19 at 15:01

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.