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.
- Pre-Installation Setup
- Theme Installation
- Configure the Genesis Theme Settings
- How to Set the Site Title and Description
- How to Set up the Menu
- How to Configure the Home Page
- How to Set the Home Page Background Image
- How to Configure the Home Welcome Widget Area
- How to Configure the Home Gallery Widget Areas
- How to Configure the Home Call to Action Widget Area
- How to Configure the Utility Bar Widget Area
- How to Configure the Copyright Widget Area
- How to Configure the Header Right Widget Area
- How to Configure the Primary Sidebar Area
- How to Configure the Footer Widget Areas
- How to Use Button Styles
- How to add a logo to the Utility theme
Make sure you have the following installed:
- WordPress version 3.6+
- Genesis Framework version 2.0+
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:
- Upload the Utility theme folder via FTP to your wp-content/themes/ directory.
- Go to your WordPress admin dashboard and select Appearance.
- Activate the Utility theme.
Configure the Genesis Theme Settings
In your WordPress admin, navigate to Genesis > Theme Settings. Configure the Theme Settings as follows:
- From the “Color Style” dropdown, select your desired color for the theme.
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.
- For Content Archives, the default setting of “Display post content” is used by the demo.
- Set the “Limit content to __ characters” option to 300 to look like the demo.
- Check the “Include the Featured Image?” checkbox and select the “thumbnail” for the “Image Size”.
- Using the drop down box, select “Numeric” for the “Post Navigation Technique.”
Don’t forget to click the “Save Settings” button!
How to Set the Site Title and Description
The site title and description for your site can be set by navigating to Settings > General.
- 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
- 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.
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.
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.
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.
- Navigate to Appearance > Background.
- 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.
- Once the image has been selected click the “Upload” button to load the image for use on your site.
- The Display Options settings are not important for this theme. These settings will be ignored.
- Click the “Save Changes” button to preserve your changes.
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
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
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 Example
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
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
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.
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.
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.
- Text Widget
- Genesis eNews Extended Widget (requires plugin)
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.
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.
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!