Ever laid awake at night with a burning desire to create some widget areas above the header in a Genesis child theme?
Me neither.
But maybe during your waking hours you’ve thought it’d be cool. In that case, me too.
Genesis Tutorial: Create a “Utility Bar” Widget Area Above Header
Inspired by my Utility Pro theme, I’ve created a quick tutorial showing you how to add a full-width “Utility Bar” above the header in your Genesis child theme.
A Utility Bar would be fantastic for:
- Shopping cart total
- User login / account links
- Custom menu
- Site search bar
- Whatever else you can think of…
Register the widget areas
If we’re going to add one widget area above the header, we might as well add two! We’re going to call our widgets “Utility Bar Left” and “Utility Bar Right.”
Add the code below to functions.php
to register the two widget areas. As always, be careful when mucking about in your theme files – have a backup and FTP at the ready! If you’re not quite comfortable working in functions.php
yet, try Genesis Extender plugin (and uncheck the “effect admin” option so you don’t accidentally white screen your admin area).
/** Register Utility Bar Widget Areas. */ | |
genesis_register_sidebar( array( | |
'id' => 'utility-bar-left', | |
'name' => __( 'Utility Bar Left', 'theme-prefix' ), | |
'description' => __( 'This is the left utility bar above the header.', 'theme-prefix' ), | |
) ); | |
genesis_register_sidebar( array( | |
'id' => 'utility-bar-right', | |
'name' => __( 'Utility Bar Right', 'theme-prefix' ), | |
'description' => __( 'This is the right utility bar above the header.', 'theme-prefix' ), | |
) ); |
Once that’s in, you can go to Appearance > Widgets and you’ll see your new widget areas. Huzzah!
Display the widget areas
Now that our widget areas are called into existence, we need to add a bit of code to get them to display on the site. In this case, I want the Utility Bar to show up everywhere on the site, not just the home page or a special template. (Tip: if you want it to show up only on certain pages, you need WordPress conditionals).
So, let’s head back to functions.php
and add this:
add_action( 'genesis_before_header', 'utility_bar' ); | |
/** | |
* Add utility bar above header. | |
* | |
* @author Carrie Dils | |
* @copyright Copyright (c) 2013, Carrie Dils | |
* @license GPL-2.0+ | |
*/ | |
function utility_bar() { | |
echo '<div class="utility-bar"><div class="wrap">'; | |
genesis_widget_area( 'utility-bar-left', array( | |
'before' => '<div class="utility-bar-left">', | |
'after' => '</div>', | |
) ); | |
genesis_widget_area( 'utility-bar-right', array( | |
'before' => '<div class="utility-bar-right">', | |
'after' => '</div>', | |
) ); | |
echo '</div></div>'; | |
} |
Let’s talk a little about this code. Please, don’t just plop it into your site. It’s more fun when you know why it works.
Genesis Action Hooks
One of my favorite things about the Genesis Framework is the ability to hook into just about any part of a page. Need to add a widget below the navigation? There’s a hook for that. Need to sandwich in a widget after a post but before the comments? There’s a hook for that also.
When we talk about a hook action, that just means let’s take one of those Genesis hook locations (a.k.a. above the header) and add our own stuff in that spot. (A hook filter, on the other hand, let’s you modify content that was going to show up anyway).
Since we want our Utility Bar to appear before the header, we’re going to use the genesis_before_header
hook. The code below will add our function utility_bar
at the spot on the page where genesis_before_header
happens.
add_action( 'genesis_before_header', 'utility_bar' );
Our Custom Function
Still with me? Now we’re primed and ready. We just need to create a function called utility_bar
and tell it what to do. In this case, that’s just spitting out our two widget areas.
For a better understanding of where you can use hooks on your own Genesis-powered site, check out the Genesis Visual Hook Plugin (one million internet points goes to Christopher Cochran for creating that plugin!)
Put a little style on it
The last bit of our journey here is to style our new Utility Bar widget areas. You’ll notice in the last step I added in a couple of divs
with unique classes that we can target with some CSS.
Here’s what I’m using, but feel free to change up colors and fonts to suit your own needs:
/* Utility Bar | |
--------------------------------------------- */ | |
.utility-bar { | |
background-color: #333; | |
border-bottom: 1px solid #ddd; | |
color: #ddd; | |
font-size: 12px; | |
font-size: 1.2rem; | |
padding: 10px 0; | |
padding: 1rem; | |
} | |
.utility-bar a { | |
color: #ccff33; | |
} | |
.utility-bar a:hover { | |
text-decoration: underline; | |
} | |
.utility-bar-left, | |
.utility-bar-right { | |
width: 50%; | |
} | |
.utility-bar-left p, | |
.utility-bar-right p { | |
margin-bottom: 0; | |
} | |
.utility-bar-left { | |
float: left; | |
} | |
.utility-bar-right { | |
float: right; | |
text-align: right; | |
} | |
.utility-bar input[type="search"] { | |
background: inherit; | |
padding: 10px 0 0; | |
padding: 1.0rem 0 0; | |
} |
That’s it! Ready for the big reveal?
I Now Give You: Widget Area Above Header!
As a side note, this code should work fine for Genesis 2.0 themes, with or without HTML5 enabled. You’ll probably need to play with the styling to get it just the way you want it.
Have fun playing and post a link to show off your Utility Bar!
Additional Learning Resources
Wanna learn more about customizing themes with the Genesis Framework? Or more about how to use CSS to style themes just the way you want? I’ve got two courses at Lynda.com just for you!
WordPress Themes: Customizing Themes with Genesis
Whether you’re a novice or advanced developer, Genesis provides a foundation that takes WordPress to places you never thought it could go. The Genesis Framework for WordPress is more than a mere WordPress theme; it’s an underlying framework of immaculate code offering three important benefits: SEO optimization, security, and a huge selection of design options. In this course, learn how to work with the framework in order to customize child themes. Carrie Dils discusses key aspects of Genesis—including template files and action hooks and filters—to help familiarize you with the structure and components that make up this framework. With a solid understanding of how Genesis operates, you can modify nearly any child theme.
Introduction to CSS
Once you have learned the basics of HTML, it’s time to start exploring Cascading Style Sheets (CSS), the language that makes HTML look great in the browser. This course gives you a tour of the possibilities, showing what CSS is capable of doing and the basics you need to make it work for you. Join Carrie Dils as she explains what CSS is and how it works with HTML, discusses authoring options, and covers common CSS concepts such as the CSS box model and how to work with fonts and color. Plus, she demonstrates how to structure a page with CSS, maintain CSS with version control, work with media queries, and more.
Good stuff! This is one of those things that I really like about the Metro theme. Adds just enough space in a prime locale for all those things as you mentioned in your tut, in particular, a custom menu. Good goin’ Ms. Dils and a million internet points for you on this Monday morning : )
Thank you, Ben! A waterfall of internet points back at ya. 🙂
Thanks for the new tutorial Carrie. I love the way you make it so people can do something practical on their own site, it’s not just theory.
PS. I got the Genesis Extender plugin after reading one of your previous articles. It’s perfect for making all kinds of tweaks and edits that would normally take some head scratching and code writing. Thanks for telling us about it.
Hey Philip,
Thanks for the feedback! Makes me wanna keep stuff coming when I know it’s actually helpful… 🙂
Cheers,
Carrie
Awesome. I need to display cart totals for a WooCommerce project I’ve got in the works and this will come in handy for sure. Thank you, my dear! ^_^
Sweet! Let’s see it when you’re done!
That’s a great idea KC !
Sorry I’m a million years late with my comment –> thanks, Jon!
And Carrie, I’m still learning as I go, but turns out I could add a filter to genesis_header with a snippet of code provided by WooCommerce that displays cart totals. Utility bar next time, for sure. 😉
Just wanted to say I love your tutorials. I visit at least twice a week as a reference. Thanks so much for taking the time to put together such great info. xo
Hi Carrie,
Wonderful site – you’ve given me so many ideas. I was just wondering what plugin you use for your social icons (share, tweet, etc) below your content, or if you wrote the code yourself & used custom icons?
I found a tutorial on writing the code yourself and adding it to the simple hooks plugin, but your icons look much better than mine & neater too.
Thanks!
Carly
Thanks Carly!
I’m using Jetpack for social share. 🙂
Carrie
Thanks a bunch! I needed a secondary menu and a search bar above the header for a while now. Things worked out great.
Very slick. This is kind of similar to what AgentPress does but I prefer your implementation. You have 2 widget areas rather than 1 and they’re at the top of the page instead of the bottom where most people don’t look. 🙂
Yes! Similar theory to the “disclaimer” bar on AgentPress, though I’ve never been impressed with the styling out of the box on that one. If you implement it on a site, post a link so we can see. 🙂
Hi Carrie,
I was wondering if these bars are responsive. I want to add a “click to call” button or area to a site and this might be the right solution. What is your advice on that?
Yep, they’re responsive! They’re just set to 50% screen width. You could make each one 100% screen width at smaller resolutions to make it look even better, depending on how it looks with your content.
Is this HTML5? I thought we have to use aside tag.
Thank you for sharing such a simple and elegant solution.
Not being a coder, I struggle with the following point: I need to use the utility bar in Minimum Pro. But while the header of Minimum Pro is fixed, the utility bar moves following the scroll and disappears when scrolling down. How to fix it, like the header?
Thank you in advance,
B D
Here you go: http://sridharkatakam.com/make-utility-bar-header-fixed-minimum-pro/
Thank you very much! Saved me a lot of time 🙂
How do I get “non widget spot” above the header on the right, that’s responsive where I can put a top menu links and social links. Just like studiopress.com. I kinda like it.
You can still use a widgeted area. Just use the custom menu widget. 🙂
Carrie,
Thank you for sharing this—and with enough detail that I’ll actually be able to recreate it. I’m using a plugin to create these right now but would like to reduce my plugin footprint—this is more than enough to get me started.
—
Jay
Thank you for sharing this wonderful tutorial! I’m quite new at WordPress but I found it very easy!
I would like to have a heigher bar because may social icons are bigger. Please let me know how can I have a double height bar.
have a look here: http://www.villalamagia.com/sito_wp/
Hi, Great article, i´m a newbie on this, i just bought the gfenesis framework
and comes with a sample (SO BASIC) child theme, and i would like to know how
can i add the newsletter box to the right side bar?
just like this:http://my.studiopress.com/themes/genesis/#demo-full
or this other one:http://themecraft.com/demo/breakpoint/
i like to look just like one of this two
Thanks for your support!!!
Hi there, just use the Genesis Enews Extended Plugin and drag an instance into your sidebar. The styling is built right in. 🙂
Thank you very much carry, al already did it, it was a plugin, how was I suppose to know? lol, thanks for your support
Thanks for a great tutorial. Now I can play around with the CSS to get the font colors and size correctly. When I tried to add in a custom menu, it came out too large but I did add in the simple social icons plugin and that looks good. http://QuickStartMinisites.com
So now I can add this to all my sites. Thank you.
Hi Donesia – yeah, you’ll likely need to remove most of the padding around the menu elements to get a custom menu to look good in that space. If you’re not using Firebug or similar to help you with targeting the right CSS elements, I highly recommend it!
Thanks Carrie, yes I am using Firebug so it gives me a big help to finding how to reduce the padding. I will play with the padding for the menu this weekend. Thanks again for your help. Now I am onto adding in those call to action widgets from your other tutorial 🙂
This was so helpful, thanks!
Very simple to follow! Thank you! I followed all of these steps and my utility bar ended up directly
… directly under my header. Should I use CSS to move the utility bar above the header?
It’s already hooked before the header, so you may need to add it at a higher priority if you’ve still got content appearing above the utility bar. Try adding a priority of 5 to your add_action, like this:
add_action( 'genesis_before_header', 'utility_bar', 5 );
This didn’t work for me either :(.
I just uploaded the theme, so there aren’t many changes made to the coding to totally mess everything up. At least I don’t think so…
My site is http://test.coilycandy.com/.
Ah, you’re using the Agency Pro theme. The header is repositioned in that theme via functions.php to come in at
genesis_before
instead ofgenesis_before_header
.Use
genesis_before
for the add_action on the utility bar and play with the priority number (i.e. less than 5) and see if that works. Haven’t tested it – just guessing. 🙂That did it! Thank you so much! And to think, I spent a good hour staring at the functions.php code knowing it was a simple fix, but I just couldn’t find it. LOL.
You are awesome!
Glad it worked!
Hi Carrie,
Thanks you very much for providing this elegant solution for the utility bar. I am using Agency Pro theme. I am having trouble same as Crystal did but she got it fixed.
Using genesis_before with prioity less than 5 for add_action for the utility_bar does not seem to work. It does not even show up.
It does show up above the header at priority 5 but it becomes the part of the header and gets the width as the width of the wrap.
Please help how to solve this problem.
Finally; you are doing really great job helping everyone.
I am very late to this thread, but I’ve just come across your helpful blog and tutorials and was guided here by Andrea at Nuts&Bolts. I must have correctly inserted the utility bar in the code (as per yours!), into Genesis Streamline Pro, as I can see simple social icons showing. However, I just can’t seem to work out how to change the background colour of the bar as it’s showing light grey #ddd, which happens to be the same as my site background. I’ve tried all the colour options, I think, in the CSS coding you gave, to no avail. Any ideas? Tnx.
Just to add to my comment above, having changed the site background colour to test things, I think my utility bar must be outside some ‘wrap’ code as it changed to the background colour too. I tried out other genesis hook positions but still had the problem. Tnx.
Carrie,
Here’s a link to a page I’ve embedded a screen grab of my utility bar issues on my dev site. The bar is somehow being embedded within the overall background color of the site (light grey #ddd), and therefore immune to my changes to padding within the .utility css styling. It is also picking up my overall css link style of red, which I don’t want. Not sure how to resolve these 3 issues, but am sure it’s to do with its placing in genesis Streamline Pro. But I’ve tried all the hook options to no avail! If you’ve any time to help, I’d be oh so grateful! Much appreciated. http://www.strategyworks.net/sw-streamline-read-button-featured-widget-issue/
Sounds like your CSS targets may need to be a little more specific, but I can’t troubleshoot without seeing the page live. Is your dev area online?
Thanks Carrie for your help. It’s on local dev only right now, hence the screen grab link. I will deactivate it and try all over again, and then if that fails, I’ll get the site up live so you can see what’s what. Really kind to take the time to go over this, much appreciated!
What CSS are you using? Make sure you’re prefacing everything with
.utility-bar
. So for a link, you’d say.utility-bar a {}
.Also try using Firebug to play around live in the browser and see if you can target the elements correctly. 🙂
Hi Carrie,
I am still getting the same problem of the utility bar picking up the color scheme of the site background and its CSS being impervious to colour edits. As said, I’ve tried all the hook positions to no avail. I’ll put the site up live later today on a test link and perhaps if you’ve a mo, you could take a peek? I am sure it’s either that I need to inserts the CSS in a certain position in the style sheet (?), or the hook is wrong for Streamline Pro, but I draw a blank on the latter. Tnx for your assistance; I am sure it’s something small I am overlooking!
This is fabulous! I am using it now on my new design that I am working on. I would like to make it sticky upon scrolling. Is this possible? I created a js file for it – but used the selector .utility-bar. Will that grab it – or should I include both the right and left sides. If I need to grab both right and left, can you help me out with it? Thanks!
The testing site I am using it on is:
http://sandbox.moderncommonplacebook.com/
Carrie,
OK, here’s the live site link with the utility bar issue. I checked the CSS and it’s ok as far as I can see. I am also getting the test text in the left bar, even when I put it into the right bar field in the widget! They both end up appearing left. Another blip! Here’s the link: http://wpreneur.com/swtest/
Thanks for any more pointers on what’s going wrong here.
You need to add the CSS styles from the tut. 🙂
Tnx Carrie, I have now defaulted the CSS styles to your tutorial ones.
Still the utility bar refuses to adopt any of that, and it’s still sitting outside some sort of wrap that included with the header. It’s in the theme functions.php (not front page php) and is set as genesis_before_header as the ‘action’. It’s clearly picking up the page background styling. I am sure it’s somehow being overridden by other coding. I put the styling at the end of the CSS – was I to put it earlier on? It’s kind of in the write place, but not within some loop I think that links it correctly. I am using Streamline Pro – would that make a difference?
sorry for all the Qs!
Hey Liz,
It looks like you added the styles in a media query section, which only gets applied when viewing the site at that screen size. Move it out of the media query and at the end of your regular CSS and that should do it.
Carrie
Hi Carrie,
Thanks for the last input, and yes, it’s now showing in the right place. Just a styling issue now – am trying to get it to be the 760px width of the site inner, not full width. I tried placing .utility-bar, width and float css in various places but really not sure about it as ended up with the bar centre to left, and leaving a gap right! The last bit of the jigsaw! If you’ve time to lend a (final!!) helping hand?
Carrie, all done and dusted; bar correct and have bookmarked this post for the future. Thanks for taking the time to help; more than your call of duty. Really appreciate it. Have pointed more genesis newbies your blog’s way!
Sorry I’m late to the party. Glad you got everything working!
Hi Carrie,
Me again but on about a different SP theme – Outreach Pro. I added the utility bar, all possible before / above header hooks and it conflicts with the 4 featured slots below the main slider. I lose one – nr 1 in fact! I removed the utility code and got it back. I can’t see how to add the utility bar without affecting the theme’s design. Any ideas what I can do to position it up top and not lose the lower page design area? Site is in local dev again but I think I explained OK above?
Tnx!
Bit late here but I’ve followed the great tutorial, and I have the Bar working in Agency Pro. My only problem is the Title from a text widget font is the same color as the background! This wouldn’t be a problem if the body font wasn’t so small!
Any idea how I can over ride the font widget settings for this widget only?
Yep! Add a little custom CSS targeting that element and preface it with
.utility-bar
, like this (have not tested, but is the general idea):.utility-bar .widget-title { color: #fff; }
If
.widget-title
isn’t the right element, use Firebug to see which one is correct.Hi!
Awesome tutorial! And nice that you also explained the why’s with the code 🙂
Something that is going wrong on my site, is that the widgets I put in there, take the styling from the widgets in the sidebar. Which, obviously is to big 😛
Is there a quick remedy to this? Or do I just have to make a few styling rules to style the widgets the way I want them?
Like: div.utility.searchbarwidget { style code}
Hi,
First, did you add the suggested CSS from the tutorial? If you have additional elements in the Utility Bar that’s picking up your sidebar styling, add some custom CSS as you suggested.
Grab whatever CSS element you want to target and preface it with
.utility-bar
, like this:.utility-bar .whatever { }
Cheers,
Carrie
Hi,
Yes I have picked up the styling from you 🙂 matched my theme perfectly haha. Metro theme 🙂
I will try your suggestion. Thanks! I also love jetpack btw 🙂 picked up that suggestion in the comment section
Really awesome tutorial. Works perfectly. Thanks for explaining what the code means as well.
Thank you so much for this! I just installed the Lifestyle pro theme last night and this helped A TON!
Thank you for this great tutorial!
I’m completely green with using Genesis, and even I was able to take this and put 3 widgets in my subfooter area.
The only problem is, the names of my widgets are coming out as my chosen ID: subfoot_left_widget, etc. instead of “Sub Footer Left Widget”
Here’s my code:
genesis_register_sidebar( array(
‘id’ => ‘subfoot_left_widget’,
‘name’ => __( ‘Sub Footer Left Widget’, ‘theme-prefix’ ),
‘description’ => __( ‘This is the left widget area below the footer.’, ‘theme-prefix’ ),
) );
genesis_register_sidebar( array(
‘id’ => ‘subfoot_mid_widget’,
‘name’ => __( ‘Sub Footer Middle Widget’, ‘theme-prefix’ ),
‘description’ => __( ‘This is the middle widget area below the footer.’, ‘theme-prefix’ ),
) );
genesis_register_sidebar( array(
‘id’ => ‘subfoot_right_widget’,
‘name’ => __( ‘Sub Footer Right Widget’, ‘theme-prefix’ ),
‘description’ => __( ‘This is the right widget area below the footer.’, ‘theme-prefix’ ),
) );
I’m using Dynamik website builder child theme if that helps.
Thanks in advance!
Sorry, me again.
Actually, the widget areas aren’t showing up at all in my Widget’s option screen. What I was seeing was some deactivated widgets of the same name created by me via the Dynamik options.
I think I’ll have to bother Dynamik support for this 😉 Thanks anyway.
Ah, okay. Glad you’ve isolated it. The Dynamik crew gives fantastic support!
Thought it would be fair to Eric to post an update here. He got back to me very quickly and I realized what I was doing wrong. I hadn’t selected the option to allow the custom functions.php code I was using to affect the WordPress admin / dashboard. That’s why the widgets weren’t showing up. It is something of a safety feature to keep greenies like me from breaking a site 😉
I’ve said it elsewhere, but I’ll say it here for the benefit of others, Dynamik Website Builder and the Genesis Extender Plugin are amazing and must-have tools for those working with Genesis.
Thanks Patrick! Not sure if you caught last week’s episode of Genesis Office Hours, but I read one of your comments on the air. 🙂
LOL I was watching, of course 🙂 I felt a little famous for a second, there LOL
Such a usefull post! I was searching about a week to find how to add a widget area at the home page too!
Can you please show me the way to have this widgets appear only at the homepage? Thanks in advance!
Thank you so much! I absolutely love your blog. This post not only helped me with a utility bar but explained it in a way that I actually learned a new skill. I can’t wait to see what other gems you have on here!
Warmly,
Jennifer
That’s what I like to hear! Thanks, Jennifer!
this did not work for me in Magzine pro. When it kinda worked the right widget appeared on left hand margin. thinking I had to have a left hand widget to push it over I added a search box widget but they got intertwined within each other margin left.
Did you add the CSS from the tutorial? That floats the widgets left and right respectively.
hi carrie,
this is exactly what i need, however i’m having issues with the positioning.
when i only have one widget, it pushes the logo/menu to the left/right depending on which widget is active – http://cl.ly/Ui8J
when i have both, create a large margin and my logo/menu disappear – http://cl.ly/Uhgw
any help is greatly appreciated…thanks!
http://dylanmcleod.com.au/
I did what you tutorial showed but the widgets don’t show on the widgets page. Please help. I’m working with Genesis and Dynamik.
Thanks
Hi, I am an absolute newbie at this and I really wanted a bar above my header, but I added your code to functions.php and now my site is broken. I really don’t know why this happened — I also don’t know how to reverse what I did. Anyways, after your first two steps, both widgets were showing up in the middle of the top (not left and right)…. Don’t know why the discrepancy. Am I supposed to add them in different areas of functions? I was just adding onto the bottom. Thanks for any advice. I really appreciate your well-written tutorial!!
Hi there,
If you’re new to editing code in WordPress, please take a moment to read this post first!
There are two components to making the Utility Bar work – first the code you’re adding to functions.php, second the style you’re adding in to style.css. The style part is where you’ll get the left/right issue fixed.
Cheers,
Carrie
Thanks so much for your response! I will check out your other posts 🙂
I recently discovered your site and I’m seriously glad I did. Coming from a little background in programming many! years ago, I often understand the concept yet don’t know exactly how to implement it in web programming.
You have a talent for good explanations.
Thanks for this and other insight into Genesis. Very much appreciated.
Hal, thanks for taking a moment to leave a kind word! Glad you’ve found the site helpful.
Cheers,
Carrie
Hi Carrie, I tried following your tutorial to create the utility bar for a site that I am starting to build with the Parallax Pro theme and it doesn’t seem to work. Here is the site address: http://www.engagedsmb.com
Not sure what I’m doing wrong.
Kurt
Hi Kurt,
Parallax has the primary nav unhooked from it’s original location and then re-hooked above the header. Try adding the Utility Bar code at a higher priority to bring it in before the primary nav.
add_action( 'genesis_before_header', 'utility_bar', 5 );
Since that’s a sticky nav on Parallax, you’ll need to determine whether you want the Utility Bar to also be sticky and add your styles accordingly. Because the primary nav is absolute positioned, you may need to edit those styles, too.
Cheers,
Carrie
Carrie this is great! I’m using it on a site for a client but it is pushing the header down. I’ve tried adjusting padding but that hasn’t changed anything. http://stradagize.com
Thx Carrie! Just used it on one of my sites and am now able to delete another unneeded plugin.
Hi – great tutorial – just wondered if there’s a way to get this working on Centric Pro?
Tried all of the above suggestions for priority but I cant work out the issue. It places the utility bar underneath the site header. Although I am slightly confused about the header naming in this theme
I guess its JS ?? Or the RHS custom menu limitation?
Any help would be appreciated as Centric Pro only has one default menu in the custom menu and I need to add this in
Many Thanks
Hi Carrie. I’m using the utility bar on my client’s site with parallax. ive made the bars 10%/90% and it shows when the
.site-header {
position: static;
}
when i change it to fixed to keep the header sticky, the new widget goes away. i put this in the css but the widget doesnt show:
.site-header {
position: fixed;
}
.utility-bar {
position: fixed;
}
.parallax-home .site-inner {
margin-top: 0;
}
i’m having trouble getting my head wrapped around this to make the widget show and keep the header and the widget bar sticky. the widget is at priority 5 and it loads fine when the site-header is positioned as static.
the site is in a sandbox. http://emperorofthefreeworld.com/ak
thanks! btw…. i love your site and the office hours!
Hey Mike,
A couple of things going on… If you want to Utility bar to sit above of the sticky header, you’ll want to bump the header down a bit so the Utility Bar can fit. For example:
.site-header { top: 30px; }
Otherwise, if you want the Utility Bar and the site header to sit on top of each other (think layers), you can play with the z-index property to adjust “who’s on top” (not to be confused with “who’s on first”). 😉
Hooray, it works on centric pro if you use
.site-header {
position: static;
}
Any suggestions on getting this working with the centric pro menu as sticky (site shrink i think)? Have tried disabling site shrink, no change..tried replacing the entire menu with a responsive one but over my head
many thanks
Its a local dev site so no link im afraid
Thanks Carrie for this post! I have tried to do this with Centric Pro theme, adding the code that jw said. It works, but the problem is that if you set up a static position, the header looses the shrink effect. Do you have any solution for that?
Hi Carrie – I tried this but now I am getting a Parse error
syntax error, unexpected ‘}’ in /var/sites/r/rowntreemedia.com/public_html/wp-content/themes/modern-portfolio-pro/functions.php on line 185
I am using Portfolio Pro.
It appeared to work the first time but the widgets had no styling (I had also added the css) and both appeared stacked on the left hand side above the header so I pulled it out. Then I got this error, which appears even after I reinstated your code.
Now, even when I replace the php code (without your bits) with my backup (saved on Textwrangler) I get the same error.
Can you help? I’m new to php etc and am now stuck.
Really want the utility bar but now my priority is to fix the site.
Thanks and much obliged – Naomi
This is what I pasted in at the bottom of my functions.php:
/** Register Utility Bar Widget Areas. */
genesis_register_sidebar( array(
‘id’ => ‘utility-bar-left’,
‘name’ => __( ‘Utility Bar Left’, ‘theme-prefix’ ),
‘description’ => __( ‘This is the left utility bar above the header.’, ‘theme-prefix’ ),
) );
genesis_register_sidebar( array(
‘id’ => ‘utility-bar-right’,
‘name’ => __( ‘Utility Bar Right’, ‘theme-prefix’ ),
‘description’ => __( ‘This is the right utility bar above the header.’, ‘theme-prefix’ ),
) );
add_action( ‘genesis_before_header’, ‘utility_bar’ );
/**
* Add utility bar above header.
*
* @author Carrie Dils
* @copyright Copyright (c) 2013, Carrie Dils
* @license GPL-2.0+
*/
function utility_bar() {
echo ”;
genesis_widget_area( ‘utility-bar-left’, array(
‘before’ => ”,
‘after’ => ”,
) );
genesis_widget_area( ‘utility-bar-right’, array(
‘before’ => ”,
‘after’ => ”,
) );
echo ”;
}
HI Carrie – Sorry for runaround. I have uploaded a backed up copy of functions.php so the site is back online. (phew!) I would still like your wonderful utility bar tho, and wondered why it did not work for me when I first put the code in. I’ll try again and if no joy I’ll get back to you. Naomi
Hi Naomi,
I’d recommending making additions to functions.php at the very end of the file, so you can make sure you’re not accidentally inserting in the closing bracket } for another function.
A couple of resources that might help: Editing Your WordPress Site (especially the part about using a text editor) and PHP Code Validator (know before you put it in your functions if it’s syntax-error-free).
Cheers,
Carrie
Thanks, Carrie. I put the code back into functions.php carefully and there were no errors. Same for the css you provided. However, the widgets both appear on the left hand side – you can see them as ‘Left’ and ‘Right (on my site), and no styling. Am I right in thinking that I should add text widgets to them or am I missing the point? Kind regards, Naomi
All sorted now. Just me being new to Genesis/css. Regards – Naomi
Hi Carrie,
I have been trying to figure out how to do exactly what this tutorial teaches to do for awhile now! I unfortunately have had the same problem a few other people have. I entered all of the code in correctly (functions.php code , and style.css code) and anything I place inside of the utility bar widgets ends up on the left hand side, and underneath my secondary navigation menu.
I am using Lifestyle Pro and am wondering is there something else I need to do to get them in the correct place, or am I screwed? Thank you for any help!
Hi Sean,
You’re not screwed. 🙂 Sounds like your CSS styles aren’t being picked up. Can you confirm that they didn’t accidentally get stashed within a media query? (Easy to do if you’re adding your CSS at the very end of style.css).
Carrie
I hope this isn’t to long, but here is how it looks near the bottom where I put it all… The media query is above, but it looks separated. Did I do this wrong?
/*
Media Queries
—————————————————————————————————- */
@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (-moz-min-device-pixel-ratio: 1.5),
only screen and (-o-min-device-pixel-ratio: 3/2),
only screen and (min-device-pixel-ratio: 1.5) {
.search-form input[type=”search”] {
background-image: url(images/search@2x.png);
}
}
@media only screen and (max-width: 1139px) {
.footer-widgets,
.site-container,
.wrap {
max-width: 960px;
}
.content-sidebar-sidebar .content-sidebar-wrap,
.sidebar-content-sidebar .content-sidebar-wrap,
.sidebar-sidebar-content .content-sidebar-wrap {
width: 688px;
}
.content {
width: 580px;
}
.content-sidebar-sidebar .content,
.sidebar-content-sidebar .content,
.sidebar-sidebar-content .content,
.site-header .widget-area {
width: 380px;
}
.footer-widgets-1,
.footer-widgets-2,
.footer-widgets-3,
.home-bottom-left,
.home-bottom-right,
.sidebar-primary {
width: 272px;
}
}
@media only screen and (max-width: 1023px) {
.footer-widgets,
.site-container,
.wrap {
max-width: 772px;
}
.content-sidebar-sidebar .content-sidebar-wrap,
.content-sidebar-sidebar .content,
.content,
.footer-widgets-1,
.footer-widgets-2,
.footer-widgets-3,
.sidebar-content-sidebar .content-sidebar-wrap,
.sidebar-content-sidebar .content,
.sidebar-primary,
.sidebar-secondary,
.sidebar-sidebar-content .content-sidebar-wrap,
.sidebar-sidebar-content .content,
.site-header .widget-area,
.title-area {
width: 100%;
}
.site-header {
padding: 24px;
}
.header-image .site-title a {
background-position: center !important;
margin: 0 0 16px;
}
.genesis-nav-menu li,
.site-header ul.genesis-nav-menu,
.site-header .search-form {
float: none;
}
.genesis-nav-menu,
.site-description,
.site-footer p,
.site-header hgroup,
.site-header .search-form,
.site-title {
text-align: center;
}
.genesis-nav-menu a {
padding: 16px;
}
.site-header .widget-area {
margin-top: 16px;
}
.site-header .search-form {
margin: 16px auto ;
}
.genesis-nav-menu li.alignleft,
.genesis-nav-menu li.right {
display: none;
}
.entry-footer .entry-meta {
margin: 0;
padding-top: 12px;
}
.home-bottom-left,
.home-bottom-right {
width: 332px;
}
.footer-widgets-1 {
margin: 0;
}
.site-footer {
padding: 24px;
}
}
@media only screen and (max-width: 767px) {
body {
font-size: 14px;
}
.site-container {
padding: 20px 5%;
width: 94%;
}
.five-sixths,
.four-sixths,
.home-bottom-left,
.home-bottom-right,
.one-fourth,
.one-half,
.one-sixth,
.one-third,
.three-fourths,
.three-sixths,
.two-fourths,
.two-sixths,
.two-thirds {
margin: 0;
width: 100%;
}
.site-title {
font-size: 32px;
}
.header-image .site-title a {
background-size: contain !important;
}
.genesis-nav-menu a,
.nav-primary .sub-menu a {
font-size: 12px;
padding: 12px;
}
.nav-secondary a,
.nav-secondary .sub-menu a {
font-size: 11px;
padding: 10px 8px;
}
.genesis-nav-menu .sub-menu .sub-menu {
margin: -31px 0 0 199px;
}
.nav-primary .sub-menu .sub-menu {
margin: -36px 0 0 199px;
}
.entry-meta .entry-tags {
clear: both;
float: left;
}
.entry-meta .entry-comments a {
margin: 0 0 10px;
}
.lifestyle-pro-home .featuredpost .alignleft,
.lifestyle-pro-home .featuredpost .alignright {
float: none;
margin: 0 auto;
}
/* Utility Bar
——————————————— */
.utility-bar {
background-color: #333;
border-bottom: 1px solid #ddd;
color: #ddd;
font-size: 12px;
font-size: 1.2rem;
padding: 10px 0;
padding: 1rem;
}
.utility-bar a {
color: #ccff33;
}
.utility-bar a:hover {
text-decoration: underline;
}
.utility-bar-left,
.utility-bar-right {
width: 50%;
}
.utility-bar-left p,
.utility-bar-right p {
margin-bottom: 0;
}
.utility-bar-left {
float: left;
}
.utility-bar-right {
float: right;
text-align: right;
}
.utility-bar input[type=”search”] {
background: inherit;
padding: 10px 0 0;
padding: 1.0rem 0 0;
}
}
The give-away is that extra closing curly bracket on the end, which is the closing bracket for
@media only screen and (max-width: 767px) {
Move that final } up above the Utility Bar styles and that should fix it.
FWIW, I can’t recommend strongly enough using a syntax-highlighting editor and properly formatting/indenting code – it’ll make those mistakes easier to catch. 🙂 You can read more on that here.
Hi , Thanks for the Tut on the utility bar. 🙂
Can you tell me how to fix it’s width to match the content area of the site ? , i’m using the fluid layout on the header and the right and left utility areas go full width ?
On the utility theme demo it looks the way i would like it with the utility content matching the main site content.
Any help appreciated
Big Thanks – do you know how to add Register/Login+password field in that bar ?
Thanks Carrie, such a good post … something I have been looking for for days. Nearly there with it but two things I am scratching my head with a little.
* When I add the code to Executive Pro theme in Extender ( Custom Functions ) the widgets don’t show up in Appearance > Widgets. Any previous knowledge of this ?
* The widgets do appear when i add to the ‘actual’ functions.php and upload it ( hurray ) but visually the bar is restricted to within the content area, I would like it to run full width. My guess is I somehow shift it out of the content area but I am not sure how. Can you help ?
Sorry for the basic questions, I am a bit of a novice, enjoying the challenges and post like these are invaluable. Thank you.
Maria
Hey Maria,
So glad the posts are helpful! Regarding your first issue, make sure that you’ve checked the checkbox in Extender to “affect the admin area” – If that’s unchecked, any code that would execute in your dashboard (i.e. Appearance > Widgets), won’t run. That feature is designed to help folks from accidentally white screening the admin, but unless you do it that way (or put it in functions.php as you discovered), it won’t work.
On the second question, do you have a link to your site? You can probably remove the wrap and that’ll remove the constriction.
So, on line 11 of the code above, remove
<div class="wrap">
and on line 23 remove one of the</div>
tags.Cheers,
Carrie
Hi Carrie,
Firstly, thanks for the great tutorial. Worked a treat and was exactly what a needed after a client request!
Just had a quick question regarding formatting. When using multiple widget in the widget area e.g “utility right” the inserted widgets stack one on top of each other by defaut.
I’m wondering what CSS would be used to make them align horizontal? E.g sit side-by-side
I’ve been trying to sort this myself but I just can’t get them to sit side-by-side
Any help from anyone would be most appreciated!!
Thanks
Cam
Hi Carrie, your replay above was perfect and sorted things for me. The widgets showed when I clicked ‘show on admin’ – great, simple when you know how. I adjusted the code to ‘genesis_before’ in stead of ‘genesis_before_header’ and it jumped out of its constraints. It may have been because I had the static home page set as a content page. Many many thanks for you help with this. Maria
Hello Carrie, all going well with adding customisations thanks to this tutorial. I have achieved the Utility bar across the top of the page with a primary nav and social media – I would like ( if at all possible ) the utility bar to work within the responsive framework.
http://www.tpiver5.definemedia.co.uk/
I have added to my css and this works beautifully with the .wrap div.
.utility-bar .wrap {
width: 1140px;
margin: auto;
}
I thought this would work for the responsive part, but it appears not to, any suggestions appreciated if its fairly obvious to you what I am doing wrong.
I have simply added this to the media queries that are already in place for this theme.
@media only screen and (max-width: 1023px) {
.utility-bar .wrap {
width: 1023px;
margin: auto;
}
}
Thanks in advance for any help. Maria
Thanks Carrie I’ve used this several times now!
Carrie,
The first sentence in this blog made me lauph so damn hard.
My god that was funny.
Thanks for the post
🙂
I just tried following this tutorial, but I must be missing something —
dev.clarkscondensed.com
I was trying to put a menu bar on the utility left and a search bar in the utility right, and what you see now is the result. Any ideas?
Hi Katie,
Be sure to read through the comments – there are a lot of troubleshooting tips in them. If you’ve tried everything suggested and still have problems, let me know.
Carrie
Hi Carrie, I have come a long way with this and very happy with the results – so appreciated. My last hurdle is making it responsive. I have tried what I thought would work.
utility-bar {
background-color: #333;
border-bottom: 1px solid #ddd;
}
.utility-bar .wrap {
width: 1140px;
margin: auto;
}
.utility-bar-left {
float: left;
width: 60%;
}
.utility-bar-right {
width: 40%;
float: right;
}
My rudimentary logic thought this would work for responsive, but unfortunately not. I wonder if I am doing something really really silly here. I can’t seem to get past this, or maybe I am trying to do something that can’t be done.
@media only screen and (max-width: 1023px) {
.utility-bar .wrap {
width: 1023px;
margin: auto;
}
}
@media only screen and (max-width: 800px) {
.utility-bar .wrap {
width: 800px;
margin: auto;
}
}
Apologies for posting this question again, but any help is very much appreciated.
Many thanks, Maria
Just to follow up I finally got my utility bar working exactly as I wanted – a real novice mistake. I needed to use:
.utility-bar .wrap {
max-width: 1140px;
margin: auto;
}
and not
.utility-bar .wrap {
width: 1140px;
margin: auto;
}
what a numpty ! Ah well got there finally, the most pain the biggest gain sometimes. Thanks again for the great tutorial – any probs were down to my inexperience. But thought this may help if anyone else reaches this impasse.
I have test all codes with my website and working well. Thanks for this great tutorial and really appreciate for it.
Hi Carrie, Thanks for the nice tip one more time. But I have a question regarding genesis and woocommerce plugin. I tried to move the primary menu before the header and for some reason I end up with with 2 menus. The original one and the on above the header. remove_action( ‘genesis_after_header’, ‘genesis_do_nav’ ); doesn’t work here. Any suggestion??? Thanks
hoops solved the issue. I just forgot to place include_once( get_template_directory() . ‘/lib/init.php’ ); in functions.php
I am using q2w3 fixed widget to make sticky widget. It is working for my sidebar widget. But it is not working for your utility sidebar. Is there any solution.
Hi Carrie!
Just wanted to thank you.
I used the codes given by you and it worked instantly.
My site is under development and hence you wont see much.. But you can see the effect of your codes in the form of bar below header, which I am using to display Adsense. I did some tweaking in css.
Many a thanks… and yes, I would again come back for more enlightenment!
Thanks, Thanks, Thanks.
P. Bora.
http://www.sscexamprep.in/
Hey Carrie,
Amazing work. So helpful.
I am wondering if there is any resource I could view that you could offer that would help me only add this additional menu to one page vs. site wide?
Thank you!
Believe it or not – I was able to solve this on my own. Thanks again, Carrie for the original – I could not have my made client happy without you. My task was a little different than a topbar menu (as you can see) but the need was the similar. This code is currently on my client’s Genesis 2.0 Parallax Pro theme.
Here is the code if anyone else needs it – it’s yours!
//**CREATE NEW WIDGET
genesis_register_sidebar( array(
‘id’ => ‘utility-bar-left’,
‘name’ => __( ‘Utility Bar Left’, ‘theme-prefix’ ),
‘description’ => __( ‘This is the left utility bar above the header.’, ‘theme-prefix’ ),
) );
add_action( ‘genesis_before_content’, ‘utility_bar’ );
/**
* ADD A CUSTOM MENU TO SPECIFIC PAGES
*
* @author Carrie Dils
* @copyright Copyright (c) 2013, Carrie Dils
* @license GPL-2.0+
*/
function utility_bar() {
if ( is_page( ‘blog’ ) || is_category( array( 13, 14, 15, 16, 17 ) ) ) {
echo ”;
genesis_widget_area( ‘utility-bar-left’, array(
‘before’ => ”,
‘after’ => ”,
) );
echo ”;
}
}
Hi Carrie, this is great!
I am wondering of this is possible to use under the header, not above. I use the genesis parallax pro theme.
Kind Regards,
Wim
Yeah, Parallax has that “fixed” position header, so it might be hiding the Utility Bar when you move it below the header. If you haven’t already, install the Genesis Visual Hook Guide plugin and it’ll give you the exact hook names to use for moving stuff around.
If it ends up that the header is hiding the Utility Bar, you’ll need to adjust the CSS for the Utility Bar with a margin-top or such to push it down the page a bit.
Hi Carrie,
I just changed genesis-before-header to gensis-after-header. It did not show anything. Than I changed it to genesis_before_content_sidebar_wrap and I am seeing it. Thanks!
Just a quetion about the styling. If I put text in both left and right bars but … all the text displays on the left side.
And when I put an menu in this utilitybar it is a vertical menu, not a horizontal.
It would be nice if you could lead me in the right way.
Kind Regards,
Wim
You can declare text alignment separately for both of these elements:
.utility-bar-left { text-align: left }
.utility-bar-right { text-align: right }
(or something similar to that).
As for the menus displaying vertically, you’ll need to add some CSS to for those
‘s to display inline and float left. Use Inspect Element in your browser to see how the main navigation menu is styled and follow that as an example.
Hi!
Love this, but I have the same problem as the commenter before. My navigation menu displays vertically and not horizontally. I’ve tried adding display: inline, but nothing is changing. What am I missing? BTWm I’m using this with the genesis framework.
Kind regards,
Maria
Hi again,
So I managed to solve the problem above my adding
.menu li {
display: inline-block;
}
to my css. I have another problem now. I can’t get my custom menu to work with drop downs. I know it has something to do with the fact that it’s not a primary menu, but I don’t know where to start to fix this. Should I change my css or moe the primary menu to the utility bar… I hope you can help me.
Kind regards,
Maria
Hi Carrie,
Great post! I’ve applied this to my site and have set up the boxes horizontally. The site looks great on the desktop but on mobile it looks bad. both left and right boxes are mixed together and unreadable. Is there a code I need to enter in css for the mobile version to match the desktop? Please advise. Thank you!
-Rob
How can I hide the utility bars on desktop and usethem on mobile only. I just need to know how to hide on desktop. Thanks
You could use display: none and then in your media queries, set it display.
He love your tutorail but i want to do 3 widgets area one left one center and one right how can i do that?
Hi Quinty,
You could either register a third widget area, or, just reduce it to one widget area (and then place 3 widgets in there). Either way, you’d just want your CSS for each section to be 1/3 instead of 1/2.
Cheers,
Carrie