You could create a top bar which will display the logged in user’s name. This is the code I use in my child theme:
/**
* Adds a top bar to Storefront, before the header.
*/
function storefront_add_topbar() {
global $current_user;
wp_get_current_user();
if ( ! empty( $current_user->first_name ) ) {
$user = $current_user->first_name;
} else {
$user = __( 'guest', 'storefront-child' );
}
?>
<div id="topbar">
<div class="col-full">
<div class="welcome">
<p style='font-family:helvetica,tahoma,arial; font-size:16px; font-weight: 500; color:#FFF!important;'>Welcome <?php echo $user ?>!</p>
</div>
</div>
</div>
<?php
}
add_action( 'storefront_before_header', 'storefront_add_topbar' );
I then styled it as follows:
#topbar{
background-color: #333333;
height: 30px;
line-height: 30px;
overflow: visible;
clear: both;
}
.welcome{
max-width: 250px !important;
height: 25px !important;
text-align: left;
margin-top: 0px !important;
clear: none;
}
Of course you can style it any way you like. Don’t know if this is what you are looking for.
Hi carver1g,
Thx for replying back.
Couple of things:
I included your code to my own functions.php in my child theme and I can see a white bar right at the top of storefront home page. I was not sure whether I put the rest of the style code in my version of style.css, which I did anyway and re-run. I can see ‘Welcome username’ in the top bar when I select & highlight the whole of the top bar, but none of the style takes effect. Where do I put the css code?
Secondly I really did not want to create separate bar on top of the page but was hoping I could append this ‘Welcome username’ to the existing top-menu that already exist for the theme.
Any ideas on this please?
cbhurji,
Place the css in your child’s theme style.css. It may be possible to ‘appear’ that this top bar is part of the top menu by using a negative bottom margin e.g. ‘margin-bottom: -30px’ or whatever amount it takes to line up with the top menu.
#topbar{
background-color: #333333;
height: 30px;
line-height: 30px;
overflow: visible;
clear: both;
margin-bottom: -30px;
}
cbhurji,
Follow up to my last post. If the positioning (margin-bottom) works and you wish to use the color of your top menu as the background, make the background of the topbar transparent and adjust the color of the font accordingly depending on the top menu’s background color.
