There are a couple of ways you can customize the copyright (or "footer creds") for your theme. Read below to learn how.
Utility Pro comes with three footer widget areas. You don’t have to use them (if you don’t, they won’t show up), but if you’d like to use them, here’s how.
The Header Area is where your Site name and site description (or alternatively, your logo) are displayed, along with a Header Right Widget Area. Let’s look at how to set everything up.
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.
Utility Pro doesn’t use the Genesis Framework "blog" template. Instead, you can set up your blog using the regular WordPress way, which we’ll walk through shortly.
In case you’re curious about the Genesis blog template and why we don’t use it, read this information article.
Utility Pro includes an easy installation option for our recommended plugins. While you don’t have to install or activate any of these plugins, we recommend them if you want to set up your theme like we do in our demo.
The instructions below will walk you through uploading, installing, and activating the Utility Pro theme.
Important! Utility Pro is a child theme for the Genesis Framework. The Genesis Framework must be installed in order to use Utility Pro. If you do not own the Genesis Framework, you can purchase a copy here.
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:
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.
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.
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!