Dynamic Drive Blog is powered using an obscure CMS called WordPress, with the Genesis Framework on top of it for various refinements. You can read about what Genesis brings to the table on their web site. While setting up our blog, we picked up various tips and tricks on customizing a Genesis site that no doubt would benefit others. In this post, we’ll look at how to do the following two things in WordPress Genesis:
- Display a Featured Image at the very top of each Post in Genesis
- Upload and Show a Different Post Featured Image next to Post Excerpts on Category and Archive Pages of Genesis
Lets get straight to it!
Display a Featured Image at the very top of each Post in Genesis
WordPress by default supports a Featured Image for each post, though where it gets shown depends entirely on the theme you’re using. A very popular location these days is at the very top of the post, above the post title. In Genesis, to do this, inside your child theme’s functions.php file (In the Admin Dashboard, go to Appearance -> Editor), add the below snippet to the end:
/* Code to Display Featured Image on top of the post */
add_action( 'genesis_before_entry', 'showfeaturedimage', 7 ); //7 defines the priority of this hook. Default is 10, lower = higher priority relative to similar calls
function showfeaturedimage() {
if ( is_singular() ){ // if this is a singular post (any post type)
the_post_thumbnail('large', array( 'title' => the_title_attribute( 'echo=0' ) ));
}
}The magic is realized by plugging into the 'genesis_before_entry' hook, which lets you modify the area of each post directly above the post title. We define a custom function showfeaturedimage to perform the actual task. In it, we check if we’re currently on a singular post of any post type (checking is_singular()), and if so, retrieve and display the featured image for that post. And for SEO and accessibility purposes, we populate the title attribute of the image using the title of the blog post.
For those of you who wish to display the Featured Image following the post’s title, change the hook in the code above from genesis_before_entry to genesis_entry_content.
To limit the featured image to only be shown for certain post types, change the is_singular() code to one of the following variations instead:
is_singular('posts'): Checks if this is a post that belongs to the default post typeis_singular('product'): Checks if this is a post that belongs to the custom post type “products”is_singular(array( 'product', 'book' )): Checks if this is a post that belongs to the custom post type “product” or “book”
Last but not least, the featured image is displayed using WordPress’s the_post_thumbnail() function. See the documentation page for the different parameters this function supports.
Upload and Show a Different Featured Image next to Post Excerpts on Category and Archive Pages of Genesis
In many WordPress themes, including Genesis child themes, a post’s featured image shows up automatically next to each post excerpt on the homepage and category/archive pages. This becomes a potential issue if you’re using the same featured image in other areas of your site as well, such as inside individual posts as shown earlier. The layout of various sections of your site are often different, requiring not just a resized or cropped version of the same featured image to look good, but a different featured image altogether. Case in point- we’re using a large 1200 x 600 (approx) featured image at the top of each post. Using the same featured image alongside post excerpts on the home and category pages simply won’t look good regardless of the impressive contortion acts of WordPress in automatically resizing or even cropping a large featured image depending on the available space it’s shown in. The solution- add the ability to define a 2nd Featured Image for each post that’s shown on the homepage and category/archive pages in Genesis.
Step 1: Add a new Featured Image Field to Posts using Advanced Custom Fields Plugin
Firstly, to define a 2nd Featured Image, we’ll use the tremendously popular Advanced Custom Fields (AFC) plugin to do so. This free plugin lets you add custom fields to be included inside a post. We’ll create an image custom field for our purpose.
First, download and install ACF from your WordPress dashboard or by visiting the plugin page. Once installed, you can access ACF via the “Custom Fields” link in the left hand column of the dashboard.
To create an “image” custom field in ACF, create a new Fields Group, and define a new field with a sensible Field Label and Field Name values. For the Field Type set it to “Image”, and for the Return Value, select “Image URL”. Here is a screenshot of how our custom image field looks like when setting it up:
Step 2: Upload your alternative Featured Image in Your Post Dashboard
Once your custom “image” field has been set up, this new field will show up in your Post’s Dashboard when you add or edit a post. If you don’t see it, on the upper right corner of the screen, click on the “Screen Options” tab, and check the name of the Fields Group you created earlier to show its fields:
Following the area where you enter your content should appear the custom “image” field you defined using ACF, ready to accept an image for upload. This is where you upload a custom featured image to be shown in your index and category/archive pages in place of the default post featured image.
Step 3: Show the Alternative Post Featured Image next to Post Excerpts on Category and Archive Pages of Genesis
Assuming you’ve followed the instructions thus far, you should now be able to upload two featured images for each post that you create or edit in the dashboard. I’ve chosen to show the default featured image at the top of each post, which usually has a native dimension of around 1200px by 600px. On the index and category pages alongside each post excerpt, I want to show the second custom featured image instead, which will be a different image altogether and with a more square dimension.
To do this in WordPress Gensis, inside functions.php again, add the following snippet to the very end:
add_filter( 'genesis_get_image', 'showcustomimage' );
function showcustomimage() {
if (is_home() || is_archive()){
if( get_field('2nd_featured_image') ){ // if alternate 2nd featured image defined
return '<img class="catfeaturedimage" title="' . the_title_attribute( 'echo=0' ) . '" src="' . get_field('2nd_featured_image') . '" />';
}
else{ // if no alternate featured image defined, use 1st default featured image instead
$defaultfeaturedimagemedium = get_the_post_thumbnail_url(null, 'medium');
if ($defaultfeaturedimagemedium){
return '<img class="catfeaturedimage" title="' . the_title_attribute( 'echo=0' ) . '" src="' . $defaultfeaturedimagemedium . '" />';
}
}
} // end if home/ archive
}
Replace the field name “2nd_featured_image” with the field name you defined when setting up your custom image field in ACF. And just like that, the secondary featured image of each post should now show up in place of the original on the home and category/archive pages:
The code uses the Genesis filter “genesis_get_image” to modify the output of images that pass through the Genesis loop. Inside the custom function showcustomimage, we target only the home page or archive/category page. On these pages, we make sure the post currently being processed has the custom image field we set up earlier inside ACF defined (in this case, it’s called “2nd_featured_image“), and if so, return an src property set to the custom image field’s value. We also populate the tag with the title of the blog post and a custom CSS class to target and make the image responsive in our CSS.
If no alternate 2nd featured image is defined, we try to use the original default featured image instead for the post excerpt. To do this, we try to get the URL to the medium version (300px by 300px by default) of the original featured image using get_the_post_thumbnail_url(). If found, we show that image instead.
We hope you found this tutorial helpful in customizing featured images in WordPress Genesis. Please share your own tips on using the various functions, hooks and filters mentioned in this blog post!