Carrie Dils

WordPress Developer, Consultant, and Instructor

Create a Utility Bar Above the Header in Genesis

Originally published on by

PinLinkedIn

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' ),
) );
view raw functions.php hosted with ❤ by GitHub

Once that’s in, you can go to Appearance > Widgets and you’ll see your new widget areas. Huzzah!

Utility Bar Widgets

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>';
}
view raw functions.php hosted with ❤ by GitHub

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;
}
view raw style.css hosted with ❤ by GitHub

That’s it! Ready for the big reveal?

I Now Give You: Widget Area Above Header!

utility-bar-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.

Reader Interactions

Comments

  1. 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 : )

  2. 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.

  4. 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

  6. 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. 🙂

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

  9. 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

  12. 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

  13. 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 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 🙂

      • 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 );

          • 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 of genesis_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. 🙂

  18. 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!

      • 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.

  19. 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.

  20. 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!

  21. 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!

  22. 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.

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

  23. 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!

  24. 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!

  25. 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.

  26. 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

  29. 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!

  30. 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.

    • 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.

  31. 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!

  32. 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

  33. 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.

  35. 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

  36. 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

  37. 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.

  38. 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

  41. 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

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

  43. 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

  44. 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

  46. 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

  47. 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

  48. 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

  49. 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

  52. 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

  53. 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

  54. 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.

  56. 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

  58. 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/

  59. 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 ”;
      }
      }

  60. 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.

  61. 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.

  62. 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

  63. 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

  64. 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

  65. 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

  66. 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

Trackbacks

  2. […] a tutorial you should check out which gave me the idea for this article from Carrie Dils on how to Create a Utility Bar Widget Area Above the Header for Genesis Framework. Here’s how to add a featured area fixed to the bottom of the screen in Genesis Framework. […]