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.

Using DesktopServer Blueprints

The Utility Pro Professional license includes a DesktopServer blueprint ready to get you going quickly.

Please note that the blueprint uses the developer version of Utility Pro.

The admin login for the blueprint included with the Utility Pro Professional license is test/test.

Change the username/password immediately or delete that user altogether. Never ever deploy the blueprint to a live site until you’ve done that, otherwise you open yourself up to a massive security risk.

Video Demo:

Here’s some additional information on working with DesktopServer blueprints.

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 on sub menu items in the primary navigation.

Files Changed:


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



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:


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



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:


bower.json *
gruntfile.js *
package.json *

utility-pro/assets/scss/ *

style.scss *

utility-pro/assets/scss/partials/ *

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









* 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:


bower.json *
gruntfile.js *
package.json *

utility-pro/assets/scss/ *

style.scss *

utility-pro/assets/scss/partials/ *

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



* 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

WP Development Workflow First-Time Setup

I really enjoyed Carrie and Mika on the WP Development Workflow webinar series.  Unfortunately though, my Macbook Pro was not feeling the nerd love that I was.   I had several bumps in the road attempting to set up Node.js, Bower, Grunt and SASS.  That said, I did eventually get everything working and thought I’d share a step-by-step list that others might find helpful.

  1. Node.js – I downloaded the latest version via an OS X install package from the web site .  The first go-round I also installed Homebrew but realized I didn’t need both.
  2. npm – Per the webinar instructions, in Terminal I  navigated to the Utility Pro project folder and ran: npm install. (Remember, this is because it needs the content of that package.json file to know what to run.) This will take awhile as it’s going to load a LOT of files. You might get some warning messages about some version of this or that being deprecated and you should get a new version — I found you can ignore these. Since they are warnings, it will continue with the script and in the end I didn’t have to update anything to get this working.
  3. Bower – Per the next instructions, I tried to run npm install -g bower and received many Permission Denied errors. FYI, the -g means you are installing for global access, meaning it can be accessed from any directory on your machine. To get that to work you need to execute the command as an administrator, or sudo. I re-ran the command but placed sudo in front: sudo npm install -g bower , it prompted for my password (for my Mac), I entered it and it completed successfully.

    If you’ve never done this its a little weird in that while you’re typing your password, the cursor doesn’t move, but it is recording your keystrokes so never fear, press enter when done entering your password and it will continue.

  4. Grunt – Now is the big moment!  Time to finally run Grunt….I type it in and alas I get the error message -bash grunt: command not found  Argh! I started Googling and some posts said to make sure everything is up-to-date and provided a command to do that: sudo npm update -g npm . This appeared to run OK but at the end it had several messages that started with npm WARN EBUNDLEOVERRIDE Replacing bundled npm > -some package- with new installed version. Well, this set of warning messages were not OK to ignore.  So, bottom line:  DO NOT DO THE UPDATE.  So what now?  I Google’d some more about my original command-not-found error and ended up at the Getting Started link for Grunt.  This talked about installing the Grunt CLI (command line interface) globally (need to use sudo) which means it will put the grunt command in your system path, thus allowing it to be run from any location.  Remember, Grunt is package/project specific so you may have that installed in any number of sites.  NOW this was starting to make more sense.   The command to enter is: sudo npm install -g grunt-cli
  5. Sass – So after I installed the Grunt CLI, I typed grunt at the command line and it was doing something, yay! It said something about Bower components and that it re-created the file “style-rtl.css”. Then it said Running "sass:dist" (sass) and it aborted from warnings: Warning: You need to have Ruby and Sass installed and in your PATH for this task to work. More info: https// USE -- force to continue. Oh brother, more files missing 🙁 but never fear, you’re almost there! Next step, use the link in the error message which took me to a github file. In there under the SASS heading it repeated — you have to have Ruby and SASS installed for this to run. Well since I’m on a fairly recent Mac, it’s going to have Ruby but I made sure by entering ruby -v in terminal and that checked out. You need that so you can do the next, and final (I promise) task to run which is installing SASS. Funny considering all this was to use that in first place 🙂  So back in terminal, with sudo (your password) enter sudo gem install sass and that to load SASS and you are done. Now go back and enter grunt it will list any partial files that changed, mention that its re-generating new style-rtl.css and style.css files, and it will end with “Waiting…” now you are golden!

screen shot of a successful grunt run


Enabling Source Maps

The Utility Pro theme developer version includes tools to automate and manage your local web development environment. Once you’ve followed the documentation to install and activate the tools, SASS will run locally to compile your CSS.

However, when you open your developer tools to inspect a local dev site, the inspector will likely refer to the compiled ‘style.css’ file, not the source SCSS partial file. To create that connection, you must enable source maps for your theme.

For those relatively new to SASS, the following instructions will save you time and needless grief when troubleshooting and correcting your CSS. To enable source maps in the Utility Pro Developer Edition, you’ll need to change a few settings in your developer tools and the ‘gruntfile.js’ file included in the Utility Pro theme root directory.

The following instructions refer to Chrome Developer Tools (CDT). The setting changes are probably comparable for Firefox and Safari.

  1. In the Chrome browser, open Chrome Developer Tools (CDT) (option + command + I on a Mac).
  2. In the upper-right corner of the CDT window, select the ‘kebob’ (the three vertically-stacked dots). The message ‘Customize and control DevTools’ will appear when the cursor hovers over the ‘kebob’.
  3. Select ‘Settings’ from the fly-out menu.
  4. In the Settings menu, select ‘General -> Sources -> Enable Source Maps’ and the submenu option ‘auto-reload generated CSS’.
  5. Close the Settings pane. Settings changes are saved automatically once selected.

Next, the source maps option in the theme file ‘gruntfile.js’ must be changed to allow the creation of source maps. The API documentation for grunt-contrib-sass can found on GitHub.

In your theme ‘grunt file.js’, change your sass options as follows:

UPgruntfile.js-grunt-contrib-sass settings

  1. ‘sourcemap=auto’: true. This setting provides relative paths to source-mapped files where possible; file URIs elsewhere. Note: If this is set to ‘sourcemap=none’, no source maps will be returned.
  2. lineNumbers: true. Emits (outputs) comments in the generated CSS indicating the corresponding source line.
  3. style: expanded. This setting provides control over how the CSS is output.
  4. debugInfo: false — default: false. Set to ‘true’ if you use the FireSass Firebug plugin. Otherwise set to ‘false’
  5. compass: false — default: false. Enables Compass imports and loads SCSS project configuration file (config.rb located close to the gruntfile.js). Compass is not needed with the developer version of Utility-Pro, so leave the default setting.

When a sourcemap is created in Utility Pro, a ‘’ file will appear inside the Utility Pro theme root directory. Each CSS selector in your developer tools will return the source SCSS partial instead of compiled CSS.


 Robert Gadon is a WordPress enthusiast and aspiring web developer who uses the Utility Pro developer edition (and thinks you should too!).  He happily shares this documentation so that others can get quickly get up and running with SCSS in Utility Pro.  Robert lives in St. Louis, Missouri.

Utility Pro – Developer Edition

If you purchased the Professional license for Utility Pro, you have access to a special developer’s edition of the Utility Pro theme.

It includes support for:

  • Sass (with Bourbon and Neat)
  • Grunt
  • Cool translation helpers & easy RTL stylesheet creation

In order to take advantage of these features, there’s some additional setup you’ll need to do for your development environment.

First, you’ll need the following installed globally:

Here’s the ridiculously short version until I come back and flesh this out a bit:

  1. Download developer edition of the theme from your account
  2. Extract it somewhere on your hard drive (I like to put it in /wp-content/themes of a WordPress install)
  3. From the command line, go to the /utility-pro/ project folder and run git init to create a git repository
  4. From the project root (child theme directory in this case), run npm install
  5. From the project root (child theme directory in this case), run bower install
  6. From the project root (child theme directory in this case), run grunt

If you follow the above, you’ll have all of your development dependencies installed and a watch task running on your .scss files.


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

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.