As many of you know, I answer support tickets for Carrie Dil’s *Genesis child theme, *Utility Pro. You can see on the Utility Pro demo, there are posts at the bottom of the home page, and we frequently receive questions about how to edit that section. Many of the questions can be answered in Carrie’s informative tutorial: Change the Home Page on Utility Pro such as how to show posts from a specific category, and even how to remove the loop shown and add widget areas. But what if you don’t want to remove the loop (posts), but you also don’t want to edit code each time to make a change to the posts? One way to solve this challenge is to replace the loop of posts with a featured posts widget. This tutorial will show you how to to do just that — add featured posts widgets to Utility Pro, and specifically, two different featured posts widgets at that.
So, fire up your favorite code editor. The files we’ll be changing, as shown from the root of your theme folder are:
- style.css (personal license)
- assets/scss/partials/_widgets.scss (Professional Developer Edition)
Add a New Widget Area
The easiest way to add a new widget area to any theme is to piggyback on the existing code that already does this. In Utility Pro this is done in
front-page.php (the file responsible for creating all of the home page content) and
widget-areas.php. I’ve called my widget Home Featured Posts, but feel free to call it anything you like.
function utility_pro_homepage_setup() and add the two changes noted with a white outline in this screenshot:
Notice on the second change the action hook we’re using,
genesis_loop, is different than the widgets above. Why? Because we are replacing the custom loop Utility Pro uses with a featured widget that will take care of the post selections for us. And as such, we need to remove or comment out this line of code in our second change:
The last change in this file is to define the function you referenced in your hook above that will display the new widget in your markup. I’ve called mine
utility_pro_add_home_featured_posts() and added it towards the bottom:
Next, in this file you’ll want to add your new widget to the existing
utility_pro_register_widget_areas(). This code is what adds the widget to your Appearance > Widgets page in your Dashboard and Customizer. I recommend copying/pasting the last one at the bottom and changing the name and verbiage to match your new widget name:
This last file you are probably already familiar with. In this file, go ahead and add your new widget to the existing function
add_theme_support to surround the widget in a structural wrap for consistent spacing:
Add Featured Posts Widgets To Your New Widget
Next, I’ll show you how to add two different featured posts widgets to your shiny, new widget area. One has a few more options than the other, so you can decide which one works best for your project. And, speaking of options, there are many options on both of the featured posts widgets that can be enabled that would require additional styling to work within a theme’s design. Here, I’ve covered the basic items and an extra such as using a widget title to describe your collection of posts. And also, with both of these widgets the styling I’ll share allows you to use either the thumbnail (Image Alignment: Left) or feature-large (960 x330) (Image Alignment: None) image on your posts.
Genesis Featured Posts
This widget should be very familiar since it is included with the Genesis Framework. Dropping this widget in will allow you to specify a category, number of posts, the offset, and even a widget title.
front-page.phpfile at the bottom of the
function utility_pro_homepage_setup(), and this will swap the H4 header for a more appropriate H2:
Here are my widget settings using the larger image:
If you are using the Utility Pro Personal/Plus version, look for the section Featured Page and Featured Post in your
styles.css file. First, you’ll want to comment out these two sections as they will interfere with your new widget styling:
Next, add these styles to the bottom of that same section:
If you are using the Utility Pro Professional – Developer Edition, the same instructions apply, but you’ll be making the changes in the
Tada! – The Results
Your end result will look like one of these depending on which image size you chose. In these examples, I’m using the widget title but this is optional:
Genesis Featured Widget Amplified
The Genesis Featured Widget Amplified widget is an alternative to the standard Genesis Featured Posts widget. When activated, it will actually replace it on your widget page in the WordPress admin. In includes additional settings and is actively maintained by Genesis Developer Nick Croft, aka Nick The Geek.
Here are my widget settings using the thumbnail image:
If you are using the Utility Pro Personal/Plus, add this CSS at the bottom of the section Featured Page and Featured Post in your
If you are using the Utility Pro Professional – Developer Edition, add this SCSS to the bottom of the same section as above but to the
Tada! – The Results
Your end result will look like one of these depending on which image size you chose. In these examples, I’m using the widget title but this is optional. You’ll notice with this widget, the styling looks almost just like the demo styling out-of-the-box, however, now you or your clients have the ability to make changes easier – enjoy!
*There are affiliate links sprinkled throughout this post. Have a look at my Gear page to learn more.