[Resolved] Add an user icon next to the hamburger menu

[Gerrit]

Hoe do I Add an user icon next to the hamburger menu?

I just like to link it to a login page and would like it to show to the left of the hamburger menu.

The site is Gerrit.no

[Fernando]

Hi Gerrit,

You can create a Hook Element hooked to generate_menu_bar_items with this code:

<?php 
if ( is_user_logged_in() ) {
    $current_user = wp_get_current_user();
    if ( ($current_user instanceof WP_User) ) {
			  $account_link = 'ADD ACCOUNT LINK HERE';
        echo '<a href="' . $account_link . '" class=avatar-account-button>' . get_avatar( $current_user->ID, 32 ) . '</a>';
    }
}
?>

Make sure to enable Execute PHP, and add a display rule.

You can then modify its layout through CSS.

Hope this helps!

[Gerrit]

That worked perfect. How do I make it show all the time ( logged I and out, and exactly what css do I use to change the background color?

Thank you

[Fernando]

Oh. That’s for logged in users only. Otherwise, there’s no “current user” to get the image from, unless you want to show a static/ the same image for all users.

For the background color, you can try adding this in Customize > Additional CSS:

a.avatar-account-button {
    padding: 5px;
    background-color: #ff00ff;
}

You may replace #ff00ff with your preferred color.

Kindly let us know how it goes.

[Gerrit]

I would like to show a static icon for all users, both logged in and out.

Something similar to this:
https://fontawesome.com/icons/user?s=solid

Thank you😊

[Fernando]

Oh I see. Sorry for the misunderstanding! No code is needed for that.

You can do so by creating a Block Element – Hook, hooked to menu_bar_items.

Then, add a Buttons Block, and in the Button Block’s settings, you may add an icon: https://docs.generateblocks.com/article/buttons-overview/#icon

You can set the url as such: https://docs.generateblocks.com/article/buttons-overview/#button

Hope this helps! 😊

[Gerrit]

That is perfect, thank you for your help😊

[Fernando]

You’re welcome Gerrit! Glad to be of assistance! 😊

[Author]

Posts