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(.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?

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/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?

• menus
• database
• avatar

1 Answer 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.