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!

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.

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:

3. Replace the latest posts with a static page
4. 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:

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:

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

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:

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

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.

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).

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.