Featured Images in WordPress Widgets using Genesis

The most important blogging design improvement for the last few years has been use of the featured image or thumbnail image.

featured images

This small rectangle of color provides the user with an visual teaser which they can click or tap in order to find out more or read a whole article.

More and more WordPress themes give you options to use featured images on your archive pages. Regular readers of my blog will know that I use Genesis (affiliate link) and, of course, Genesis offers this functionality.

To display a featured image in my main blog page (and on all other archive pages) you go to Genesis > Theme Settings and choose the following options:

genesis-content-archives

Above you can see that I’m only displaying the excerpts of the post rather than the full content which is a good idea for many reasons not least because it shows more of your blog posts in a smaller space on the archive page. Also, you can see that I display featured images of 150 pixels square by every blog post.

All well and good. But why stop there? This is only scratching the surface of what you can achieve with featured images and Genesis.

Using featured images wherever you want them with Genesis

How about creating a home page with multiple featured image sizes of articles from various categories with author gravatars as well? You can do it with Genesis. Here’s how:

The above video is part of my video course Creating a Business Website with a Responsive Design where you can follow step-by-step design and development of this site Crea8iveDesigns.com.

In the video above and the blog post below I will be explaining how to create three widgets that each display a different featured image, headline and excerpt from a blog, like so:

three-featured-image-widgets

So, quite a lot there. Let’s break it down step-by-step.

Remember all the changes you make in Genesis should be to the child theme rather than to the Genesis core files.

wordpress-theme-folders

Set your custom size for the featured images

If you want to create a different size of feature image (other than the defaults of 150 pixels square and 300 pixels by 235 pixels) you can by adding the following to the functions.php of your child theme:

/** Add new image sizes */
add_image_size( 'home-featured', 367, 210, TRUE );

The above creates a featured image of 367 pixels wide by 210 pixels high of every image added to posts from now on. The featured image has the name in the widgets of “home-featured”. We’ll be coming on to widgets later.

Set up your widget areas

OK. What on earth are widgets? Widgets are user-friendly ways of adding content to various parts of a WordPress website. The usual area where people use widgets is the sidebar but I’m increasingly using widgets in other areas of a WordPress site as their usage is easy to explain to clients.

So, in order to create our three widgets with featured images, headlines and excerpts on the home page, we first need to create three widget areas. And we do that by adding the following code in the functions.php.

/** Register widget areas */

genesis_register_sidebar( array(
'id' => 'home-left',
'name' => __( 'Home Left', 'crea8ive' ),
'description' => __( 'This is the left section of the homepage.', 'crea8ive' ),
) );

genesis_register_sidebar( array(
'id' => 'home-middle',
'name' => __( 'Home Middle', 'crea8ive' ),
'description' => __( 'This is the middle section of the homepage.', 'crea8ive' ),
) );

genesis_register_sidebar( array(
'id' => 'home-right',
'name' => __( 'Home Right', 'crea8ive' ),
'description' => __( 'This is the right section of the homepage.', 'crea8ive' ),
) );

The above code creates three (at the moment empty) widget areas that will be visible on the right hand side if you go into Appearance > Widgets in the WordPress backend, see below:

three-empty-widget-areas

Great, we’ve got our widget areas, all we have to do is to drag widgets into them, right? Wrong! We have to make sure we actually have pages in our site that display these widget areas first. And, to do that, we’re going to create a custom page template in Genesis.

Displaying widgets on custom page templates

In this example we’re creating a custom page template and populating that with widgets in order to build up a home page with all sorts of exciting things going on.

I have to say at this point that I owe a huge debt of gratitude to Lee Hodson and his amazing article How to Make a Genesis Page Template That Uses Widgets.

In order to create a custom home page I created a text file called front.php and added it to my child theme folder.

And inside this text file I put the following:

<?php /*
Template Name: Front
*/ ?>

<?php
add_action( ‘genesis_meta’, ‘cre8tive_front_genesis_meta’ );

/* Add widget support for this template. If no widgets are active, display the default Genesis loop. */
function cre8tive_front_genesis_meta() {

if ( is_active_sidebar( ‘home-left’ ) ) {
remove_action( ‘genesis_loop’, ‘genesis_do_loop’ );

add_action( ‘genesis_loop’, ‘cre8tive_home_left’ );
add_action( ‘genesis_loop’, ‘cre8tive_home_middle’ );
add_action( ‘genesis_loop’, ‘cre8tive_home_right’ );

add_filter( ‘body_class’, ‘add_body_class’ );
function add_body_class( $classes ) {
$classes[] = ‘cre8tive-front’;
return $classes;
}
}
}

function cre8tive_home_left() {

if ( is_active_sidebar( ‘home-left’ ) ) {
genesis_widget_area( ‘home-left’, array(
‘before’ => ‘<div class=”home-left widget-area”>’,
) );
}
}

function cre8tive_home_middle() {

if ( is_active_sidebar( ‘home-middle’ ) ) {
genesis_widget_area( ‘home-middle’, array(
‘before’ => ‘<div class=”home-middle widget-area”>’,
) );
}
}

function cre8tive_home_right() {

if ( is_active_sidebar( ‘home-right’ ) ) {
genesis_widget_area( ‘home-right’, array(
‘before’ => ‘<div class=”home-right widget-area”>’,
) );
}
}

genesis();

There’s quite a lot there so let’s break it down.

The first three lines create a new page template called “Front”.

<?php /*
Template Name: Front
*/ ?>

(When creating a PHP file for a home page template it’s much better to call it “front.php” as “home.php” confuses things.)

You then choose this template for your home page in the Page Attributes of the WordPress Page editor.

page-attributes

Moving on down the code on our custom home page template called “front.php”.

add_action( 'genesis_meta', 'cre8tive_front_genesis_meta' );

The above fetches meta information (such as the page title, page description, etc.)

Then you have the following function named “cre8tive_front_genesis_meta”.

function cre8tive_front_genesis_meta() {

if ( is_active_sidebar( 'home-left' ) ) {
remove_action( 'genesis_loop', 'genesis_do_loop' );

add_action( 'genesis_loop', 'cre8tive_home_left' );
add_action( 'genesis_loop', 'cre8tive_home_middle' );
add_action( 'genesis_loop', 'cre8tive_home_right' );

add_filter( 'body_class', 'add_body_class' );
function add_body_class( $classes ) {
$classes[] = 'cre8tive-front';
return $classes;
}
}
}

The first bit is_active_sidebar tests if the sidebar widget area is active. If it is active (and I’m planning to always have it active) it performs the following tasks:

remove_action( 'genesis_loop', 'genesis_do_loop' );

The above removes the default genesis loop that displays posts’ content normally.

add_action( 'genesis_loop', 'cre8tive_home_left' );
add_action( 'genesis_loop', 'cre8tive_home_middle' );
add_action( 'genesis_loop', 'cre8tive_home_right' );

The above displays the three widget areas. And, then:

add_filter( 'body_class', 'add_body_class' );
function add_body_class( $classes ) {
$classes[] = 'crea8ive-front';
return $classes;

The above creates a CSS class for the body element. This can be really useful for changing the style of any part of your custom template page. For example, if you wanted the headings of this particular page to display differently you could just add .crea8ive-front h1 style to the style.css.

And finally, you define the functions for the three widgets:

function cre8tive_home_left() {

if ( is_active_sidebar( 'home-left' ) ) {
genesis_widget_area( 'home-left', array(
'before' => '<div class="home-left widget-area">',
) );
}
}

function cre8tive_home_middle() {

if ( is_active_sidebar( 'home-middle' ) ) {
genesis_widget_area( 'home-middle', array(
'before' => '<div class="home-middle widget-area">',
) );
}
}

function cre8tive_home_right() {

if ( is_active_sidebar( 'home-right' ) ) {
genesis_widget_area( 'home-right', array(
'before' => '<div class="home-right widget-area">',
) );
}
}

genesis();

The above code get the widgets to display provided there is something to display in the widgets. And then, finally, the genesis(); loads the remainder of the Genesis loop.

But you’re not done yet!

Adding the widgets

Lastly, you actually add content to the widgets via the Appearance > Widgets section in the WordPress backend.

three-featured-posts-widgets

This is the simple user-friendly bit you can do once you’ve done the more difficult coding bit. :)

You can drag what you want into these widget areas – menus, tag clouds, category listing, a calendar, a search bar, whatever. However, for the purpose of this example we are using the Genesis Featured Posts widget that comes with Genesis.

genesis-featured-posts--widget

The above are the settings I used to get the three widgets areas to each display a featured image (in our custom size), headline and excerpt.

The only difference between the three Genesis Featured Posts widget settings was in the “Number of Posts to Offset:” field, circled above. Here I entered 0 in the first, 1 in the second and 2 in the third, ensuring we get a different post each time.

Also circled above is our “home-featured (367×210)” custom featured image size which we specified in the functions.php.

The end result is the three featured posts with a large featured image on the home page here and in the screenshot below.

three-featured-image-widgets

You can do it

So I hope this shows you how easy it is to get any page to display just about any combination of posts with any size of featured image with Genesis and WordPress.

Comments

  1. Zimbrul says

    Great article, seen it on Tweetee and I’m impress of your abilities to add widgets as a magician.
    I think featured images are great because you can show these on archive page and show other pictures on the article itself.
    I tink the feature image should be small, shouldn’t it? This is to keep the page size to a minimum.
    What is the optimal size for a featured image bearing in mind this will also could be used by Facebook and Google+?

    • says

      Glad you liked it. Actually, Zimbrul, I think a featured image can be any size you like as long as it’s either square or a landscape rectangle. Facebook and Google+ will scale them down and crop them as they see fit.

    • says

      It’s hard to see where you’re going wrong without seeing the PHP files. Your home page is using the page-template-three-columns.php template not front.php, I think, you can see this in the body class.

      If you want, Dylan, drop me an email with the files you are using.

Leave a Reply

Notify me of followup comments via e-mail. You can also subscribe without commenting.