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

Compatibility

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

home-welcome

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.

primarysidebar

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.

button-example

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!

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.

Leave a Reply

Your email address will not be published.