Using the Utility Bar

The Utility Bar shows up at the very top of every page of your site and is a great way to share important information with your site visitors or highlight something special.

Meet the Utility Bar

In the screenshot below, the Utility Bar is the blue bar running across the top. Of course, yours may look different if you’re using a another theme color.

The Utility Bar spans the entire width of the browser and automatically centers any content you put in it.

Let’s set it up.

Locate the Widget Area

  1. Go to the Appearance menu and select Widgets
  2. Click the Utility Bar widget area to expand the widget dialog box

Create a Widget

Next up, we’re going to drag a widget to the Utility Bar widget area.

I’m showing you how to set up this widget area just like the demo, but you can use any widget in this space (but of course, depending on the widget, it might not look awesome ).


  1. Drag an empty Text widget to the Utility Bar widget area
  2. Enter the shortcode for the Font Awesome shopping cart icon
  3. Enter your text along with a link
  4. Don’t forget to Save the widget!
[icon name="fa-shopping-cart"]

* In order to use the icon shortcode shown here, you’ll need to have the Better Font Awesome plugin installed and activated.

* To view the complete list of available Font Awesome Icons, visit the Font Awesome website.

<a href="">Buy the Utility Theme!</a>


Author: Carrie Dils

I make the stuff you see on this site. When I'm not working with WordPress, I'm likely reading, eating, or sleeping.