Volt Volt - 3 months ago 9
HTML Question

Changing color, url for logged-in Customers name in top bar

I've got these lines that allow me to display the logged-in customers in main header menu.

what I want is to change the location (or place) in the header (not in the menu), to change the color and the link url of this displayed username in the menu.

That was the code I was using to display it in the menu:

add_filter( 'wp_nav_menu_items', 'my_custom_menu_item');
function my_custom_menu_item($items)
{
if(is_user_logged_in())
{
$user=wp_get_current_user();
$name=$user->display_name; // or user_login , user_firstname, user_lastname
$items .= '<li><a href="">'.$name.'</a></li>';

}
return $items;
}


Here is the generated header top bar HTML code where I would like to have this, in the right after the mini-cart:

<div id="top-header">
<div class="container clearfix">
<div class="et-info"></div>
<div class="et-secondary-menu">
<div class="et-duplicate-social-icons"></div>
<a class="et-cart-info" href="#"></a>
</div>
</div>
</div>


How can I achieve this?

Thanks

Answer

Yes it's possible making a function that you will use in your header.php theme file:

function topbar_logged_user( $link = '#' ) {

    // get the currect user
    $cur_user = wp_get_current_user(); // $cur_user->display_name (or user_login , user_firstname, user_lastname)

    // loggin users only
    if ( $cur_user->exists() )
        echo '<a class="user-topbar" href="' . $link . '">' . $cur_user->display_name . '</a>';
}

This code goes on function.php file of your active child theme (or theme) OR in plugin files too.


USAGE in your header.php active child theme file (or active theme)

<div id="top-header">
    <div class="container clearfix">
        <div class="et-info"></div>
        <div class="et-secondary-menu">
            <div class="et-duplicate-social-icons"></div>
            <a class="et-cart-info" href="#"></a>
            <?php function topbar_logged_user( 'your_link_in_here' ); ?>
        </div>
    </div>
</div>

And in style.css CSS file of your active child theme (or theme), you could add something like this for example:

a.user-topbar {
    color: #999;
    margin-left: 10px;
    display: inline-block;
}

You can add/change custom css rules to fit your needs.

This should work