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.

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 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”

Setting a Site Background

Utility Pro uses a “backstretch” script to stretch the background image to fill the screen. A couple of important things to know:

  1. Your background image will only show on the Front page of your site or any page using the Landing Page template
  2. Since the image stretches to fill the screen, it will look different on different screen sizes. For this reason, it’s recommended that you NOT use extreme closeups of faces or images that include text.
  3. A great size for your background image is approximately 1200px wide by 800px high. This isn’t a rule, just a suggestion.
  4. The area where the backstretch image displays includes a dark, opaque overlay to help text stand out. This can be changed – check the final step in this tutorial.

Continue reading “Setting a Site Background”

Create the Front Page

Before we start configuring widget areas, we need to create a page and tell WordPress to use it as our Front Page. The front page in Utility Pro is unique as it provides multiple widget areas as well as a showing of recent blog posts.

From your WordPress admin, go to the Pages menu and click Add New.

Publish Your New Page

This really might be the easiest part of all! Once you’ve got a new page to work with, do the following:

  1. Give it a name (I’m calling mine Front Page, but you can call yours Home or Rotten Strawberries – it doesn’t matter)
  2. Click the Publish button

Seriously. That’s it. We’re not using a special template, giving it a special name, or anything else.

Set this Page to be the “Front page”

The next piece of the puzzle is to tell WordPress to use this Front Page we’ve created as the Front page for our site. What this does is cause the front-page.php template file in Utility Pro to be called.

If you’re really curious why things work this way, read up on the Template Hierarchy over at wordpress.org.

  1. From your WordPress admin, go to the Settings menu and click on Reading
  2. Under Front page displays, select the radio button to display A static page
  3. From the Front page dropdown, select the Front Page you just created
  4. Click the Save Changes button
  5. Note that we’ve got a Blog page selected in our Posts page dropdown. (Hey! Not created that Blog page yet? Don’t worry! Continue on with this tutorial and you can pickup up with the how to set up your Blog tutorial later!
  6. Also note the Blog page shows at most option determines how many posts will show up on your site’s front page and blog page.

Okay, I’m done noting.

Did you gloss over #5 above and freak out when you saw the Posts page set to Blog in the above screenshot? Seriously, don’t. We’ll cover that in the set up your Blog tutorial. 🙂

Pro Tip: While the blog posts at the bottom of the home page are by design, you can remove these if you like. Have a look at this post: Tutorial: Change the Home Page on Utility Pro. This tutorial walks you through several options for the home page including removing the blog posts and showing content from your static page.