PopWP

WordPress and Genesis Tutorials

Utility Bar in Genesis Framework

Last Updated on 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

Reader Interactions