recent-articles2

WordPress Tutorial: Featured Images

 

This is a quick tutorial on how to get out featured images, which I use extensively on this blog (jasonernst.com). The featured image is what shows on the home page for the site, and on the individual entries. In the event that there is no featured image set for a given post, a default image is displayed instead.


An example of a featured image

For reference, I know this has worked since at least WordPress 3.0, but it may work with some earlier versions as well (I think earliest may be WP 2.9). This tutorial assumes you have some knowledge of how to work with php files, and have a basic idea of how WP templates work.

Step 1: Thumbnail Sizes
You may wish to have some different thumbnail sizes from the usual ones which WordPress generates automatically. You can change this in Settings->Media and adjust the sizes to your liking. This will allow you to control the large, medium and thumbnail sizes.

Since WordPress 2.9, you can actually create your own image sizes and names using the add_image_size function. You can just add this into your functions.php file within your template. For example, my featured post thumbnail size is 240×150 and I want the image to be cropped from the original (rather than stretched weirdly).

 

This is what I added to my functions.php (note the check for the function, so that we don’t break older WP versions):

if (function_exists('add_theme_support')) {
  add_image_size('featured-thumbnail', 240, 150, true);
}

Step 2: Customize the template
Here we check if there are any thumbnails generated, and if not display the default image. You could also do other things, such as display nothing, or ignore the post altogether if there is no thumbnail image. This is an example of the main thumbnail I use for my featured article on my home page (in my home.php template file). If there is no featured image set for the post, it displays a default image found in the template’s “img” folder. Note: this is done within “the loop”.

$postthumbnail = get_the_post_thumbnail($post->ID, 'single-post-thumbnail');
if(!isset($postthumbnail) || $postthumbnail == "")
  $postthumbnail = '<img src="'.get_bloginfo('stylesheet_directory').'/img/default.jpg" alt="'. get_the_title() .'"/>';

Step 3: Add the thumbnail images to the posts


Click the featured image link to set an image as the featured image

This is the easy part, all you have to do is upload some images to the library. After the image you want is in the library you can select is using the “show” link and then use the link to select “set as featured image”. You should now see it show up in your template.

One last note, a useful plugin…especially when you are still working out the sizes of your images is the WordPress Regenerate Thumbnails plugin. It will regenerate all of the images to the new size you have specified.

Update: I have now added another related tutorial on how you can use featured images to display a block of recent articles alongside the image for each article.

 

Recent Articles

hostmonster-unix-2011-300x209

Updated DNS Zone Update tool for Hostmonster

August 21, 2014

A couple years ago I posted a slightly modified script for hostmonster to...

More startup news, wrapping up the PhD

More startup news, wrapping up the PhD

July 16, 2014

So lately, I've been focused more on startups than I have on computer...

OLYMPUS DIGITAL CAMERA

IEEEE CCECE 2014 and Cognitive Agent Simulation

May 8, 2014

This past week I attended IEEE Canadian Conference on Electrical and...

 
10153187_869615509730921_1433170679_n

Good News! And Startups!

April 16, 2014

A few weeks back I posted about a couple of hackathons I participated in....

XuM6OPya_400x400

Hackathons!

March 10, 2014

I've recently participated in a couple of hackathons to keep brushed up on...

1390476_10100454186590110_1917656574_n

PhD Candidate!

October 17, 2013

A week ago I finally managed to complete my qualifying exam at Guelph....