Customize Front Page of Utility Pro for Genesis

Tutorial: Change the Home Page on Utility Pro

I recently got this question from a customer who purchased the Utility Pro child theme for Genesis:

What I think I want to do is replace the loop below the home page widgets with another widget area. That would be my first choice but also I think the most work. Alternatively, if I could either include or exclude categories of posts, that might make a decent workaround.

I thought the answer might be helpful for multiple folks, so here goes!


What I’m about to go over is broadly true of any child theme for the Genesis Framework, however, the code snippets provided are in the context of Utility Pro. If you’re using another theme, consider this an educational starting point, but not something to be copy/pasted into your theme.

Overview of What’s Going On

The home page for the Utility Pro theme (you can view a live demo here) is considered a Dynamic Front Page, which means it has a bunch of widget areas followed by a list of posts in reverse chronological order.

Screenshot of Utility Pro homepage with highlight showing posts area.
Home page of Utility Pro, highlighting the latest posts.

Now, the original question covered two potential options for modifying this home page:

  1. Removing the latest posts and adding more widget areas
  2. Keeping the latest posts but limiting it to specified categories

I’ll add two more options for customizing the Utility Pro home page:

  1. Replace the latest posts with a static page
  2. Remove the latest posts, along with the sidebar (show nothing at all underneath the home page widget areas)

Let’s take a look at each.

1. Remove the Loop Showing Latest Posts and Add Some Widget Areas

As the customizations go, this one is the most complex. This is a two parter: First we want to remove the loop altogether and then we want to add some widget areas. Since I detail how to remove the loop in the #4 (scroll on down), I’ll just cover the adding widget areas part here.

Adding widget areas requires us to change three files:

  1. includes/widget-areas.php (or probably functions.php if you’re using another Genesis theme)
  2. front-page.php
  3. style.css

The widget-areas.php file is where all the widget areas for Utility Pro are declared. You can add as many (or few) widget areas as you like by adding them to the $widget_areas array. Each array needs to include an id (what WordPress sees), a name (what that widget area is called under Appearances > Widgets), and a description (also shows in Appearances > Widgets).

If the instructions I’ve given so far are freaking you out, please don’t freak out – I don’t want you to freak out, but know that you might not be ready for this tutorial yet.

Okay, once you’ve added your widget areas, you can go to Appearances > Widgets and see them. Woohoo! Now WordPress knows they’re there, the next step is to tell the theme where to display those widgets on the site.

That brings us to front-page.php. Now we need to create a function that holds our widget area(s) and then call that function at the place on the page where we want the widget to appear. Your code could look something like this:

<?php //remove this entire line
// Add a function that calls genesis_widget_area (this outputs your widget area)
function your_special_widget() {
'before' => '<div class="your-css-class"><div class="wrap">',
'after' => '</div></div>',

Next up, you want to spit out your widget area within the utility_pro_homepage_setup function. To follow the format I’m already using in the theme, your code could look something like this:

<?php //remove this entire line
// Add this widget area in, if a widget is being used in this widget area
if ( $home_sidebars['the-widget-id-goes-here'] ) {
add_action( 'genesis_after_header', 'your_special_widget' );

The Utility Pro code is well-documented, so you can see where other widget areas are being called (i.e. the “Call to Action” widget area) and place your widget accordingly.

Finally, we’ve got style.css. Earlier, when you created the function to hold your widget area, you added a div with a custom CSS class. Now you can go into your stylesheet and add whatever CSS you want to make your widget areas look beautiful.

It’s difficult to give any specific instructions for this example as there are one million variations you could use to get the right look for your site, but hopefully this puts you on the right track for this home page customization.

2. Modify the Query to Show Only Certain Categories

The Utility Pro theme uses a custom loop on the home page. I removed the standard Genesis loop and replaced it with the Genesis custom loop, which is a riff on the standard Genesis loop, but let’s us pass custom arguments to WP_Query.

Here’s what it looks like by default in Utility Pro (excerpt from front-page.php):

<?php //remove this entire line
// Remove standard loop and replace with loop showing Posts, not Page content.
remove_action( 'genesis_loop', 'genesis_do_loop' );
add_action ( 'genesis_loop', 'utility_pro_front_loop' );
// Display latest posts instead of static page
function utility_pro_front_loop() {
global $query_args;
genesis_custom_loop( wp_parse_args( $query_args, array( 'post_type' => 'post', 'paged' => get_query_var( 'page' ) ) ) );
view raw front-page.php hosted with ❤ by GitHub

For purposes of this tutorial, I want to only show latest posts from a single category on the home page (let’s say I have a category called News). I need to edit the utility_pro_front_loop() to exclude every category but News.

We’ll update our $query_args with an instruction to only include posts from the category with the slug news (note, use the category slug, not the name!). Here’s what that change looks like:

<?php //remove this entire line
// Display latest posts instead of static page
function utility_pro_front_loop() {
global $query_args;
genesis_custom_loop( wp_parse_args( $query_args, array(
'post_type' => 'post',
'paged' => get_query_var( 'page' )
) );

For better readability, I broke out each argument on a separate line, but you could condense it as in the gist of the original, too.

I just used the category parameter, but to see all the parameters you can use, check out WP_Query in the WordPress Codex.

3. Replace Latest Posts with a Static Page

This one’s probably the simplest customization of all. Let’s say that instead of widgets or a specific set of latest posts, you’d like to show a static page, maybe with some sort of welcome or “about us” message.

When you originally created the home page for Utility Pro, you added a page to your site called Front Page (or maybe you called it something else, it doesn’t matter).

From there, you set that page to display on the home page via Settings > Reading in your WordPress admin.

You can either use the page you already created or make a new one (just remember to update Settings > Reading with the new page, if you go that route). Whatever content you add to that page will show on the home page instead of the latest posts.

To complete the process, open up front-page.php and comment out the two lines in this gist (these are lines 54-55, if you’re working with an unedited version of the file):

remove_action( 'genesis_loop', 'genesis_do_loop' );
add_action ( 'genesis_loop', 'utility_pro_front_loop' );
view raw front-page.php hosted with ❤ by GitHub

Save it.

Go look at your home page. You’re done!

4. Replace Latest Posts & Sidebar with Nothing (the Nuclear Option)

This option is great if you just want to end all home page content underneath the “Call to Action” bar (the last widget area on the front page).

While these other options have focused on front-page.php, this option also requires you to add a smidge of CSS to your stylesheet. Let’s take a look.

<?php //remove this entire line
// Full width layout
add_filter( 'genesis_pre_get_option_site_layout', '__genesis_return_full_width_content' );
// Remove standard loop and replace with loop showing Posts, not Page content.
remove_action( 'genesis_loop', 'genesis_do_loop' );
// We've already removed the loop. We don't want to add this custom one in.
// add_action ( 'genesis_loop', 'utility_pro_front_loop' );

What we’ve done here is:

  1. Get rid of the sidebar by adding a line of code within utility_pro_homepage_setup that tells the page to return a full width layout.
  2. Get rid of the custom loop (we’ve already removed the standard loop – no we’re just not adding anything back in.

This gets us 90% of the way there, but if you look at your source code, you’ll see that the site-inner div is still printing to the screen. To get rid of this, we can add this CSS anywhere in style.css (be sure you’re not inside of a media query).

.home .site-inner {
display: none;
view raw style.css hosted with ❤ by GitHub

Generally speaking, I’m not a fan of just hiding stuff with CSS, but in this case it’s the simplest way to skin the cat*. Since I’m hiding everything within site-inner anyway, you may wonder why I bothered returning the full width layout. Well, technically we don’t have to, but doing that eliminates all the sidebar output from your source code and any time you can cut superfluous code, that’s a good thing.

* No cats were harmed during the writing of this post.

7 thoughts on “Tutorial: Change the Home Page on Utility Pro”

  1. Hi Carrie,

    I’m finding that, in customization example 2, the modification to the loop is also affecting the display of the recent posts widget that I’m running on the front page – i.e. the widget is conforming to the restrictions within the updated query.

    Pretty sure there’s some way to reset this behaviour so the widget is unaffected (ie. displays the recent posts regardless of category), but as yet it eludes me. Any ideas?

    1. That’s weird – I’m not able to reproduce locally, but we might have different things going on. Drop a line through UP support with your site and I’ll take a peek!

  2. Carrie, I’m seriously struggling. Can you help me remove the posts loop and replace with a new widget area on the Education Pro theme?

  3. Carrie – Thank you for this and for your wonderful utility pro theme. I find that the tutorial for adding a widget is missing one step, which is that the widget needs to be added to the following function in the front-page.php:

    function utility_pro_homepage_setup() {

    $home_sidebars = array(
    ‘home_welcome’ => is_active_sidebar( ‘utility-home-welcome’ ),
    ‘home_gallery_1’ => is_active_sidebar( ‘utility-home-gallery-1’ ),
    ‘call_to_action’ => is_active_sidebar( ‘utility-call-to-action’ ),
    ‘your_widget_name_here’ => is_active_sidebar( ‘your-widget-id-here’ ),

    I was only able to get the code for adding the widget to work after I made the above modifications

Leave a Comment

Your email address will not be published. Required fields are marked *

Carrie Dils uses Accessibility Checker to monitor our website's accessibility.