Utility Theme Update – Version 1.1.0

The Utility Theme for the Genesis Framework received a minor update related to Font Awesome support.

  • Utility 1.0.0 supported Font Awesome 3.2.1.
  • Utility 1.1.0 supports Font Awesome 4.0.3.

Wondering what this means for you?

Ask yourself this: Have you made any changes to core theme files?

NO, I have not touched functions.php, style.css, or anything else in the theme folder.

It is safe to update to Utility 1.1.0. All original files will be overwritten, but since you haven’t edited them, no worries. Don’t forget to follow best practices and back up your site completely prior to updating.

If you run into any problems or have a questions, drop a line to our support.

YES, I have customized functions.php or style.css.

Don’t update to Utility 1.1.0. Instead, you’ll need to manually update one line of code in your functions.php file to take advantage of the new version of Font Awesome.

For context, view the original functions.php versus the new functions.php here.

You can update the theme version, as noted in lines 17 and 135, but the only bit that really matters is updating line 139 to this:

How to Use Font Awesome 4+

The biggest change to the new version of Font Awesome that will impact you is the naming convention.

The new basic syntax is fa fa-[name]. For example, with Font Awesome v3, you could add a cloud icon like this:

<i class="icon-cloud"></i>

With Font Awesome v4, your syntax would look like this instead:

<i class="fa fa-cloud"></i>

Here’s a full outline from Font Awesome on what’s new in 4.0, including usage examples and new icons.

What if I don’t want to update?

Well, that’s okay, too. Font Awesome v3 is still “out there” and won’t break your site (though note you’ll need to use the “old” syntax to reference icons and won’t have access to any new icons). Since this update is not a security-related update, you can go about your business as is and be fine.

That’s it!

If you’ve purchased a copy of Utility prior to 11/30/13 and have not received an email from me with the updated theme version, please contact support and we’ll get you taken care of.

Utility Theme Setup

Thanks for purchasing the Utility Theme! Ready to get started with setup? This tutorial will walk you through setting up the theme to look like the Utility theme demo.

Utility Theme Demo Preview


Pre-Installation Setup


Make sure you have the following installed:

Back to Top

Theme Installation

Once you have completed the pre-installation steps and the Genesis Framework is installed, you are ready to install the Utility theme using these steps:

  1. Upload the Utility theme folder via FTP to your wp-content/themes/ directory.
  2. Go to your WordPress admin dashboard and select Appearance.
  3. Activate the Utility theme.

Back to Top

Configure the Genesis Theme Settings

In your WordPress admin, navigate to Genesis > Theme Settings. Configure the Theme Settings as follows:

Color Style
  • From the “Color Style” dropdown, select your desired color for the theme.

Color Style

Default Layout

The Utility theme supports three layout options: Content/Sidebar, Sidebar/Content, and Full Width Content.

  • Click a thumbnail to select the Default Layout.
  • The Utility demo uses the Content/Sidebar layout.

Default Layout

Content Archives
  1. For Content Archives, the default setting of “Display post content” is used by the demo.
  2. Set the “Limit content to __ characters” option to 300 to look like the demo.
  3. Check the “Include the Featured Image?” checkbox and select the “thumbnail” for the “Image Size”.
  4. Using the drop down box, select “Numeric” for the “Post Navigation Technique.”

Content Archive Options - Utility

Don’t forget to click the “Save Settings” button!

Back to Top


How to Set the Site Title and Description

The site title and description for your site can be set by navigating to Settings > General.

  1. The Site Title will display in the upper left corner of your site. The text can be set in the Site Title setting by navigating to Settings > Reading in your WordPress admin panel
  2. The Site Description will display on the upper left side corner of your site, directly below the Site Title. The text can be set in the Tagline setting by navigating to Settings > Reading in your WordPress admin panel.

Back to Top


How to Set up the Menu

The Utility theme supports both the Primary and Secondary menu locations provided with the Genesis Framework, however the demo only utilizes the Primary location.

To create your custom menu, go to Appearance > Menu. Once you have saved your custom menu,click on the “Manage Locations” tab and select your custom menu from the Primary Menu dropdown and save. Your menu will show beneath the header.

Menu Locations

Back to Top


How to Configure the Home Page

Blog Post Display

The number of posts displayed can be changed by navigating to Settings > Reading in the WordPress admin panel and setting the “Blog pages show at most” option to the number of excerpts you would like to have display on the home page.

Blog Settings

Back to Top

How to Set the Home Page Background Image

The Utility theme demo displays a featured image on the home page only based on the image set by navigating to Appearance > Background in your WordPress admin panel.

  1. Navigate to Appearance > Background.
  2. Using the “Choose Image” button to select the background image you wish to use. The image does not need to be a specific size, as the theme is responsive and will shrink and grow the image as needed. Larger images do work better, but also take a bit longer to download for the viewer.
  3. Once the image has been selected click the “Upload” button to load the image for use on your site.
  4. The Display Options settings are not important for this theme. These settings will be ignored.
  5. Click the “Save Changes” button to preserve your changes.

Back to Top


How to Configure the Home Welcome Widget Area

The Utility theme demo Home Page displays a welcome area over the featured image that is configured via the Home Welcome widget.

The Utility theme demo uses a Text widget. In order to achieve the styling of the demo (with the white translucent box behind your words), be sure to check the box that says “Automatically add paragraphs.” Checking that box will wrap each line of your text in a paragraph <p> tag.

Lines of text with no space between them will appear in the same white translucent box, while lines of text with a space between will result in a separate box containers, like the demo.

Home Welcome Widget Example


Back to Top

How to Configure the Home Gallery Widget Areas

Below the Home Welcome area, there is a Home Gallery section configured four Home Gallery widget areas. Each of the four widget areas utilize a text widget configured to show a Font Awesome Icon and some text.

Home Gallery Widgets

Home Gallery Widgets Example

Home Gallery Example

Visit the Font Awesome site for instructions and usage examples or to see a list of available icons.

Back to Top

How to Configure the Home Call to Action Widget Area

The Call to Action widget displays on the Home Page beneath the Home Gallery Widget Areas. The Utility theme demo uses a Text Widget.

Home Call to Action Widget Example

Home Call to ActionBack to Top

How to Configure the Utility Bar Widget Area

The Utility Bar appears across the top of every page on the site, directly above the header. This area is comprised of two widget areas: Utility Bar Left and Utility Bar Right.

The Utility theme demo uses text widgets in both widget areas. Additionally, Utility Bar Right uses a Font Awesome Icon.

Utility Bar Widget Areas Example

Utility Bar Right

Visit the Font Awesome site for instructions and usage examples or to see a list of available icons.

Back to Top

How to Configure the Copyright Widget Area

The Utility theme unhooks the standard Genesis Footer and replaces it with the Copyright Widget Area. The Utility theme demo uses a Text widget.

Back to Top

How to Configure the Header Right Widget Area

The Header Right Widget Area displays in the upper right corner of your site. In the Utility theme demo, a Search widget is used in this space. Header Right Widget

Back to Top


How to Configure the Primary Sidebar Area

The following widgets are used in the Primary Sidebar area that displays to the right side of the content area.


Back to Top

How to Configure the Footer Widget Areas

The Utility theme demo does not use the available Footer Widget areas. The theme includes three (3) widget areas that will display in the footer area of the site when widgets are added to the individual Footer Widget Areas.

Back to Top

How to Use Button Styles

The Utility theme has a built-in “button” style that you can apply to regular links to give the appearance of a button.

To apply the button style, you’ll want to use TEXT editor mode instead of the VISUAL editor. Add class="button" to any link, like this:

<a href="http://www.carriedils.com" class="button">Visit My Site!</a>

Your button will automatically inherit the color of your selected theme color.


Back to Top

Give yourself a pat on the back, ’cause you are DONE! Now it’s time to start adding your content or customizing the Utility theme however you desire. Have fun!