Importing Demo Content

If you’d like to import the posts and pages and images from the Utility Pro Demo site, you can do that!

Finding The XML File

First you need to download the file.  It has an XML extension and you download it here.

How To Import The Demo File

Screen shot of Tools - Import in the Dashboard

  1. Go to Tools => Import while logged in to your Admin Dashboard.
  2. Choose “WordPress” from the list.
  3. Upload the file you downloaded above.
  4. You will be asked to map the authors in the export file to users on the blog. For each author, you may choose to map to an existing user on the blog or to create a new user.
  5. You will then have the choice to import attachments, so click on the “Download and import file attachments” box.
  6. WordPress will import each of the posts, comments, and categories into your blog.

The purpose of the demo content is to setup your homepage widgets and watch the theme come together like the demo site.  In addition, if you look a little closer at the post and page content, you will see a wealth of information.  They are basically short tutorials on how to use the built-in theme styling to achieve a variety of looks.

How to Manually Update Utility Pro

For Personal and Professional (Developer’s Edition)

Yipee!  We’ve just announced a new update for Utility Pro!  But the question is, now what?  How do I apply the update without losing my changes?   Excellent question and exactly what this post is meant to answer.  We propose the best way to update a Genesis child theme is manually applying the changes you would like to implement.

  1. First, please know that updating is NOT required — this is purely optional as the changes are largely cosmetic styling and added developer feature support .  In the event there is ever a security-related update that we recommend for everyone, we would notify you via email with specific instructions on what and how to update.
  2. If you’d like to proceed, download the latest version of Utility Pro by logging into your account and click the “View Details and Downloads” link on the product entry.  You’ll notice the links have been updated to reflect the latest version.
  3. Next, identify the files that have changed.
  4. Before making any changes, BACK UP THAT SITE !
  5. For new files (if any), you can drop those into your site taking note of the location within the theme folder structure.
  6. For changed files applicable to your theme, we suggest comparing a local copy of the file that currently exists on your live site to the new version, using the diff tool of your choice.  A couple of free tools you can use for this:
    • Online:  Diff Checker – is a website that offers the ability to drag and drop each file you’d like to compare on the screen then click the Find Difference! button.  Manually cut and paste  any differences from the new version to your existing copy then upload to your live site.
    • Application: DiffMerge – is a handy cross-platform tool from SourceGear that I’ve used for years that you can download for OS X or Windows.  This app gives you the ability to compare two files (or folders), and merge the changes individually from one file to another while viewing.  After saving your local copy, then upload to your live site.

For Developer’s Edition Only

There are a few new modules included with your developer’s edition that need to be installed, or you will receive errors the first time you launch “grunt” at the command line:

screenshot of 1.2 version update grunt errors

To correct this, run the following three commands, one at a time until each one completes, and then you can resume business as usual by running “grunt”:

  1. sudo npm install -g composer
  2. sudo npm install grunt-contrib-copy
  3. sudo npm install grunt-rtlcss

That’s all there is to it!  Of course if you have any questions, we’re available to help – just fire off a support request.

 

Utility Pro Theme Change Log

All notable changes will be documented in this file and updated for each theme version release.

1.3.2 – 2017-09-07

  • Fixed name discrepancies in localized property names for the responsive menus. This resulted in errors when evaluating a site via http://wave.webaim.org/ on sub menu items in the primary navigation.

Files Changed:

utility-pro/

bower.json * (version bump only)
package.json * (version bump only)
style-rtl.css (version bump only)
style.css (version bump only)

utility-pro/includes/

enqueue-assets.php

utility-pro/assets/scss/ *

style.scss * (version bump only)

* Developer version files

1.3.1 – 2016-04-11

  • Fixed incorrect script handle on backstretch arguments.

Files Changed:

utility-pro/

bower.json * (version bump only)
package.json * (version bump only)
style-rtl.css (version bump only)
style.css (version bump only)

utility-pro/includes/

enqueue-assets.php

utility-pro/assets/scss/ *

style.scss * (version bump only)

* Developer version files

1.3.0 – 2016-04-06

  • Added theme support for Genesis Accessibility. (404 page, Headings, Skip Links)
  • Added skip link footer navigation.
  • Added mobile “hamburger” menu to footer navigation.
  • Removed theme support for Genesis Drop Down Menus (conflict with Superfish).
  • Improved mobile menu experience for non-visual users.
  • Updated backstretch script to include an alt attribute for the background image.
  • Added support for retina logos.
  • Updated .pot file for translations.
  • Re-organized Grunt tasks to group related tasks.
  • Added Composer support.
  • Added PHP_CodeSniffer support

Files Changed:

utility-pro/

bower.json *
functions.php
gruntfile.js *
package.json *
style-rtl.css
style.css

utility-pro/assets/scss/ *

style.scss *

utility-pro/assets/scss/partials/ *

_header.scss *
_navigation.scss *
_theme-colors.scss *

utility-pro/images/

logo.png
logo.svg
logo@2x.png

utility-pro/includes/

enqueue-assets.php
suggested-plugins.php
theme-config.php

utility-pro/js/

backstretch.min.js
genwpacc-dropdown.js
responsive-menu.args.js
responsive-menu.js
responsive-menu.min.js

utility-pro/languages/

utility-pro.pot

* Developer version files

1.2.0 – 2016-02-06

  • Added h1 markup to site title on a static front page.
  • Added Composer support, specifically for including TGMPA.
  • Added support for PHP_CodeSniffer.
  • Added theme support for Genesis Accessibility (404 page, Drop Down Menus, Headings, Skip Links).
  • Switched from CSSJanus to RTLCSS for style-rtl.css generation.
  • Fixed incorrect variable name resulting from update to TGMPA 2.5.2.
  • Fixed issue with homepage background image sometimes scrolling beyond footer.
  • Fixed issue with content following column classes not float clearing.
  • Adjusted search form width in the header right widget area.
  • Removed sample content (utility-pro.xml) from theme and relocated to user account area.
  • Removed copyright reference from footer creds.

Files Changed:

utility-pro/

bower.json *
composer.json
composer.lock
front-page.php
functions.php
gruntfile.js *
package.json *
phpcs.xml
style-rtl.css
style.css

utility-pro/assets/scss/ *

style.scss *

utility-pro/assets/scss/partials/ *

_accessibility.scss *
_content-area.scss *
_header.scss *
_layout.scss *
_navigation.scss *

utility-pro/includes/

enqueue-assets.php
suggested-plugins.php
theme-config.php

* Developer version files

1.1.1 – 2015-12-11

  • Updated TGMPA to 2.5.2.
  • Removed a forced full-width layout for the front page.

1.1.0 – 2015-07-03

  • Added Sass, Bourbon, and Neat.
  • Changed minimum WordPress version compatability to 4.1 (to accommodate `the_posts_pagination()` ).
  • Added Bulgarian translation.
  • Updated TGMPA to 2.5.0-RC.
  • Fixed the majority of WordPress Code Standards errors and warnings.
  • Changed CSS selector in menu to work with the WP Accessibility plugin toolbar.
  • Added Grunt Clean.

1.0.1 – 2015-02-05

  • Fixed text domain loading for language files.
  • Fixed backstretch image overflow for RTL.
  • Changed search form for improved accessibility.
  • Added British English translation.
  • Added German translation.

1.0.0 – 2015-01-16

Initial release

Configuring 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 Pro theme supports three layout options: Content/Sidebar, Sidebar/Content, and Full Width Content.

  • Click a thumbnail to select the Default Layout.
  • The Utility Pro demo uses the Content/Sidebar layout. (This is for interior pages, it doesn’t effect the homepage.

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. Leave “Numeric” selected for the “Post Navigation Technique.”

Content Archive Options - Utility

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

Configuring WP Accessibility

WP Accessibility is a great plugin created by Joe Dolson to address accessibility issues in WordPress. It’s freely available at wordpress.org.

Note: There are a some features in the plugin that do not work for themes running on the Genesis Framework. Nothing bad happens if you enable them; they just don’t do anything.

Those features are as follows:

  • Add Skiplinks
  • Add language and text direction attributes to your HTML attribute
  • Add an outline to the keyboard focus state for focusable elements.
  • Remove title attribute from images inserted into post content and featured images.
  • Remove redundant title attributes from page lists, category lists, and archive menus.
  • Add post title to “more” links. Continue reading text.

If you want any of these features, use the Genesis Accessible plugin for those options. And don’t worry about skiplinks — they’re included with Utility Pro.

WP Accessibility has great documentation outlining what each feature does. I’m not going to reinvent the wheel, so head over here to learn more about WP Accessibility features.

Configuring Genesis Accessible

Genesis Accessible is a great plugin by Rian Rietveld that addresses some accessibility issues not yet available in the Genesis Framework.

Here’s something important to note: If you’ve activated the Genesis Accessible theme, certain features of Utility Pro are deactivated in order to defer to the plugin.

Highly Recommend Enabling

So, when using the Genesis Accessible plugin, be sure to enable:

  1. Keyboard accessibility for dropdown menu

These features are all “behind the scenes” and will not impact the visual appearance of your theme, but they are important features for anyone using keyboard navigation only (no mouse or trackpad) or using a screen reader.

Utility Pro includes skiplinks (and the skiplinks CSS), so there’s no need to enable these options in the plugin; but you can if you want to — it will still work fine, but you’ll be loading unnecessary code and who wants that?

Optional Features to Enable (Genesis-Specific)

The features I’ll tell you about shortly are specific to themes running on the Genesis Framework.

For the full details of working with Genesis Accessible, I recommend reading the plugin documentation, but I’ll give you a quick idea of what to expect here.

Remove title attribute from links

This is fantastic for accessibility, doesn’t impact anything visual on your site, and is a snap to do with Genesis Accessible. In short, there’s no reason not to use this feature.

Use a Semantic Heading Structure

This feature can lead to unexpected results as it changes the heading semantics of the 404 and archive_page template (h4 headings becomes h2). It also replaces the H4 on widgets for a H3 for a semantic headings order. This will impact styling (so if you use it, you’ll probably want to make some edits to your stylesheet).

Feel free to use it, but know what you’re doing. 🙂

Remove less accessible Genesis widgets

These widgets have accessibility issues. Enabling this option removes them from your Widgets page so you won’t be tempted to use them:

  • Genesis Featured Page,
  • Genesis User Profile Widget and
  • Genesis Featured Post

Optional Features to Enable (WordPress-Specific)

WordPress is not without its accessibility issues! The Genesis Accessible plugin also addresses a couple of WordPress accessibility issues.

Add the post title to the read more links

Instead of just repeating the “Read more…” link anywhere you have an archive of posts, this option changes the link to say “Read more about [post title].”

This does visibly impact your site, but with a little CSS trickery, you could opt to display this text only for screen readers and keep the original text for visual users.

Remove h1 from editor toolbar

The H1 tag should only be your site title on your home page and then your post/page title on all other pages. Using an H1 tag in any of your content is not semantically correct. It’s not good for accessibility AND it’s not good for Google!

I recommend this option (along with educating others about it).

Home Welcome & Home Gallery Widgets

In this tutorial we’ll cover how to set up the Home Welcome and Home Gallery widget areas on your site’s front page.

First, navigate to the Widgets page from your WordPress admin and note each of these widget areas:

  1. Home Welcome
  2. Home Gallery 1
  3. Home Gallery 2
  4. Home Gallery 3
  5. Home Gallery 4

Home Welcome

This widget area shows near the top of the front page, just under your header and navigation.

Home Welcome demo

I’m using a Text widget, but you can use whatever type of widget you want, unless it’s a slider widget. Technically you can use a slider here, but I would never ever recommend it because sliders are terrible.

Text widget areas allow you to use HTML markup, which is cool. In the demo, I’ve got a small bit of markup that includes:

  1. a tag for bold text
  2. a tag for a link

Utility Pro includes a special “button” class you can use to make your text link look like a button. To use it just add class="button" to any <a> tag.

Although I doubt you want to use the same content as the Utility demo, here’s the code you can use as a starting point if you’re new to HTML.

We're breaking ground for Genesis child themes. Accessibility and internationalization aren't just a bonus, they're a must for WordPress themes moving forward.

<strong>Utility Pro has all that and then some.</strong>

<a class="button" href="https://store.carriedils.com/downloads/utility-pro" target="_blank">Buy Utility Pro Now</a>

If you’re curious about how to get the background image to show up behind this area on your site, check out this tutorial.

Home welcome text widget

* I was not done noting: Be sure to click the Automatically Add Paragraphs check box for best formatting.

Add Paragraphs

Home Gallery 1-4

Since each of these widget areas are configured the same way, I’ll lump them together in this step.

Home Gallery Demo

The Utility Pro demo uses a plain Text widget along with a shortcode provided by the Better Font Awesome plugin.

Here’s the markup I’m using in this widget:

[icon name="fa-tablet" class="fa-4x"]

Your site visitors will enjoy a great experience on a desktop, tablet, or smart phone.

Just as an FYI, you could also add a link to your icon by writing it like this:

<a href="your-link">[icon name="fa-tablet" class="fa-4x"]</a>

For a full list of available fonts you can use, check out the Font Awesome library. For detailed instructions on how you can use shortcodes to display these fonts in your theme, check out the Better Font Awesome documentation.

Home Gallery Text widget

Pro Tip:  Not planning on using all four Home Gallery widgets?  No problem!  If you choose to use less than four, you’ll need to change the 25% width in this section of your applicable CSS file to give you even spacing across a larger (desktop) screen:

@media screen and (min-width: 1023px) {
   .home-gallery-1,
   .home-gallery-2,
   .home-gallery-3,
   .home-gallery-4 {
        float: right;
        width: 25%;
     }
}

Using the Landing Page Template

Landing Page Template

The Landing Page Template is used to create a full-width landing page that shows only the main content area – it does not show the header, sidebar, footer, Utility Bar, or navigation.

Here’s an example of what the landing page looks like in the Utility Pro demo.

Add New Page

To use the template, start by adding a new page from your WordPress admin Pages menu.

Assign a Template to Your Page

Give your page a name (whatever you wish) and enter your content.

Next, just select Landing from the Template dropdown.

Don’t forget to click the Publish button!

Activating Your Theme License

When you purchase Utility Pro, you’ll receive a confirmation email that includes your License Key. If you lose the email, don’t worry – You can log into your account and pull up quick to retrieve it.

You do not have to activate a license key to use Utility Pro, however, only users with an active, valid theme license are eligible for support and upgrades.

Continue reading “Activating Your Theme License”