• Skip to primary navigation
  • Skip to content
  • Skip to primary sidebar
  • Skip to user navigation

PopWP

WordPress and Genesis Tutorials

  • Get Started
  • About
  • Archive
  • Services
  • Membership
  • My Account

Utility Bar in Genesis Framework

Last Updated on May 22, 2018 Favorited: 0 times

A Utility Bar or Notification bar in a WordPress site improves the first view design and improves users experience. It helps you to provide latest announcements, updates and more through this bar. But it is not limited and a Utility Bar would be a great choice for:

  • Showing Shopping Cart icon and Cart total details (WooCommerce, Easy Digital Downloads and more.)
  • Navigation for User login/account links
  • Adding a Custom Menu Navigation
  • Social Media Profiles using Simple Social Icons
  • Adding a search bar widget
  • Anything you want…

How to Create Utility Bar?

There are different ways to create a utility bar in Genesis child themes. However, there the steps remain almost same depend on the way we are working.

The steps are super simple and Here what we are going to do.

  1. Registering Widget area in Genesis
  2. Using add_action function from WordPress to $tag “Genesis hook” -‘genesis_before_header’ location and a function to do ($function_to_add).
  3. Displaying the widget area after hooking by creating the function (2. above) to output the widget.
  4. Beautifying the Utility Bar using a pinch of CSS

Ready?
Let’s create something new today. The steps remain same in both the cases. You can use Blox Plugin with the additional of Widget add-on to create utility bar without touching the functions.php file.

I am using Genesis starter theme from SEOthemes because it is the best alternative child theme of Genesis sample.

Case 1. Full-Width Utility Bar

Here, in this case, there will be only one widget of width 100%. This is useful if you want your utility bar to be work as notification bar.

Step 1.

Register a widget area for utility bar. Add this in functions.php

//** Register Utility Bar widget area.
genesis_register_widget_area(
    array(
    'id' => 'utility-bar',
    'name' => __('Utility Bar', 'child-theme-prefix'),
    'description' => __('This is the utility bar above the header.', 'child-theme-prefix'),
    )
);

Step 2. and Step 3.

Find the location where we want to hook the above widget. The default should be genesis_before_header, find more on Genesis Hooks.

Write a function to output and display the widget. Add this in functions.php

add_action('genesis_before_header', 'simple_utility_bar');
/**
*
* Hook and display Utility Bar above header.
* @author Aryan Raj
* @link https://popwp.com
*/

function simple_utility_bar(){
    if ( ( ! is_active_sidebar('utility-bar') ) ) {
    return;
    }

    echo '<div class="utility-bar"><div class="wrap">';

    genesis_widget_area(
        'utility-bar', array(
        'before' => '<div class="simple-utility-bar">',
        'after' => '</div>',
        )
    );

    echo '</div></div>';

}

Step 4.

Add a pinch of CSS. Add this in your stylesheet style.css

/* Utility Bar
------------------------------------------------------------- */

.utility-bar {
    background-color: #000;
    color: #fff;
    padding: 10px 0;
    text-align: center;
}

.utility-bar .widget {
    background-color: transparent;
    margin-bottom: 0;
}

Case 2. Two Half-Width Utility Bar

This is super useful in most cases where you want to customize your header in different ways. Each widget will be of 50% and will be converted into 100% on media devices under 767px.

Step 1.

Register two widget areas for utility bar. Add this in functions.php

//** Register Utility Bar widget areas.
genesis_register_widget_area(
    array(
    'id' => 'utility-bar-left',
    'name' => __('Utility Bar Left', 'child-theme-prefix'),
    'description' => __('This is the left utility bar above the header.', 'child-theme-prefix'),
    ) 
);

genesis_register_widget_area(
    array(
    'id' => 'utility-bar-right',
    'name' => __('Utility Bar Right', 'child-theme-prefix'),
    'description' => __('This is the right utility bar above the header.', 'child-theme-prefix'),
    ) 
);

Step 2. and Step 3.

Find the location where we want to hook the above widget. The default should be genesis_before_header, find more on Genesis Hooks.

Write a function to output and display the widgets. Add this in functions.php

add_action('genesis_before_header', 'custom_utility_bar');
/**
*
* Hook and display Utility Bar above header.
* @author Aryan Raj
* @link https://popwp.com
*/

function custom_utility_bar(){
    if (! ( is_active_sidebar('utility-bar-left') || is_active_sidebar('utility-bar-right') ) ) {
    return;
    }
 
    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>';
 
}

Step 4.

Add a pinch of CSS. Add this in your stylesheet style.css

/* Utility Bar
---------------------------------------------------- */

.utility-bar {
    background-color: #000;
    color: #fff;
    padding-top: 20px;
    padding-bottom: 10px;
}

.utility-bar .widget {
    background-color: transparent;
    margin-bottom: 0;
}

.utility-bar a {
    color: #ffffff;
}

.utility-bar a:hover {
    color: #ffffff;
}

.utility-bar-left,
.utility-bar-right {
    width: 50%;
}

.utility-bar-left {
    float: left;
}

.utility-bar-right {
    float: right;
}

.utility-bar-right .widget {
    float: right;
    display: inline-flex;
}

.utility-bar .menu-item a {
    padding: .5em 1em;
}

@media (max-width: 767px) {
    .utility-bar-left,
    .utility-bar-right {
        width: 100%;
    }
}

in case if you are adding search widget. Add this CSS too.

/* Search widget only
---------------------------------------------------- */

.utility-bar input[type="search"] {
    background: inherit;
    padding: 1.0rem 0 0;
}

.utility-bar .widget_search {
    /* margin: 20px; */
}

.utility-bar .search-form input {
    padding-left: 20px;
    color: #fff;
}

.utility-bar input::-webkit-input-placeholder {
    color: #fff;
}

.utility-bar input::-moz-placeholder {
    color: #fff;
}

/* Firefox 18- */

.utility-bar input::-moz-placeholder {
    color: #fff;
}

/* Firefox 19+ */

input:focus::-webkit-input-placeholder {
    color: transparent;
}

input:focus:-moz-placeholder {
    color: transparent;
}

/* Firefox 18- */

input:focus::-moz-placeholder {
    color: transparent;
}

/* Firefox 19+ */

Important!

Use only one method (case) in a child theme depend on the feature you want. Don’t forget to Drag the widgets to the widget areas by visiting Appearance >> Widgets >> Drag to utility bar section.

Boom !! It’s working.

There might be some CSS changes required but I am here to fix them for you.
Go try on your favorite theme and share your result with me.

Related Posts

  • Custom Genesis Featured Posts Widget in Genesis Sample
  • Sticky site header having before site header widget section in Genesis
  • Fixed Utility bar Site header and hide the Utility bar while scrolling in Genesis Sample
  • Sticky site header and Notification bar in Genesis
  • Top Notification Bar with close button in Genesis

Categories: Free Content, Genesis Tutorials Tags: Utility Bar, Widget, widgets

Reader Interactions

Primary Sidebar

Search

WPEngine WordPress Hosting, Perfected.

Hosting You are looking for?.
Perfect solution for small business to global enterprise.

Learn more

StudioPress Genesis Theme Framework

The No.1 Theme Provider.
Creative, SEO rich Theme for all niche projects.

Learn more

Categories

  • Free Content
  • Genesis Tutorials
  • Premium Content
  • Snippets
  • What's New?
  • WordPress Tutorials

Tag Cloud

Archive Background Section blog canvas menu center logo columns conditional tags CSS CSS Grid custom Customizer custom post type Custom Post Types custom template Custom Widget effect eNews Extended Featured Image front-page Genesis Genesis Sample header right hero section Image Background js layout left menu Logo menu Navigation Menu newsletter post page related posts responsive menu search search widget Shrinking Logo site header slide in-out Stylesheet Template Utility Bar Video Background widgets WordPress

Built with Genesis Framework + WordPress by Aryan Raj

  • Contact
  • FAQ
  • Disclaimer
  • Privacy Policy
  • Copyright Policy
  • Terms of Service