Using the Featured Custom Post Type Widget for Genesis

Genesis themes come with the Genesis – Featured Posts widget which you can use to add a grid of posts to your home page or add some recent posts to your sidebar. This works great for normal posts, but what if your theme has custom post types, like events, portfolio items, or testimonials?

Nick_theGeek has improved the original featured posts widget to add custom post types and custom taxonomy. You can find the Genesis Featured Widget Amplified in the WordPress repo. This means that you can still easily add extra content to widgets in your home page or sidebar.

There is also a really wonderful featured content plugin by Robin Cornett – Six/Ten Press Featured Content which allows using posts, pages, and custom post types in widgets or blocks, but is a premium plugin, so I won’t use it in the examples, but it’s very simple to use and understand.

Get the Plugin

The Genesis Featured Widget Amplified is in the WordPress repo, so you can install it in the WordPress Admin, Plugins > Add New.

1. Login to your WordPress.
2. In the Admin menu, click on Plugin > Add New.
3. At the top, click on Add New.
4. Type in Genesis Featured Widget Amplified.
5. Then click the Install button.
6. The plugin will install, and you can then click Activate.

Using Featured Custom Post Type Widget for Genesis

You’ll find the widget in your WordPress Admin under Appearance > Widgets.

It’s very similar to the original widget, except for three important differences:

• It allows you to choose Post Type, including Pages and Custom Post types.
• It allows you to choose from regular categories and custom taxonomy – Category / Term.
• There are additional settings, such as Pagination too.

While most of the time, your custom post types will use your theme CSS to display, and may look great without adding any styling.

You can also choose individual custom posts by ID or you can create a new category or taxonomy to select only the posts you want. I usually use “feature” or “select” for my category.

So let’s look at some examples. Since these will pick up the styles that you have in your theme, you may not need to add any extra styles. If you do, they will be specific to your theme, and there are some tips at the end.

An Upcoming Event in the Sidebar

The widget heading and border were theme styles; no additional styles were added. Widget settings used:

• Post Type: event
• Category/Term: featured
• Number of Posts to Show: 1
• Show Featured Image: Checked
• Image Size: thumbnail (160×160)
• Image Alignment: Center
• Show Post Title: Checked
• Content Type: Show Content Limit
• Limit Content to: 120 characters
• More Text: Read More

A Recent Portfolio in the Sidebar

Widget settings used:

• Post Type: portfolio
• Category/Term: any
• Number of Posts to Show: 4
• Show Featured Image: Checked
• Image Size: thumbnail (150×150)
• Image Alignment: Center or None
• Show Post Title: Not checked
• Content Type: No Content

A Selected Portfolio in a Home Page Widget

Widget settings used:

• Post Type: portfolio
• Category/Term: select
• Number of Posts to Show: 3
• Show Featured Image: Checked
• Image Size: medium (300×600)
• Image Alignment: Center
• Show Post Title: Checked
• Content Type: No Content

A Recent Property Listing in Sidebar

Widget settings used:

• Post Type: property
• Category/Term: Properties Currently Available
• Number of Posts to Show: 1
• Show Featured Image: Checked
• Image Size: medium (420×300)
• Image Alignment: Center
• Show Post Title: Checked
• Content Type: No Content

Recent Art Works in Home Page Widget

These are the settings for the image at the top of the post, and was a half width widget.

Widget settings used:

• Post Type: art
• Category/Term: any
• Number of Posts to Show: 3
• Show Featured Image: Checked
• Image Size: thumbnail (200×280)
• Image Alignment: Left
• Show Post Title: Checked
• Content Type: No Content

CSS Tips

If you do need to edit the styles (in your child theme style.css), it’s best to be specific with your CSS. Use the container – .sidebar or .home-widget-top and also the custom post type. You can choose the width of .entry for each example, so that it will display 2 or 3 across.

.sidebar .featured-content .portfolio.entry {
    width: 50%;
}

or

.home-widget-top .featured-content .art.entry {
    width: 33.3333333%;
}