The Featured Image function has become a favorite of WordPress theme/plugin developers, blog authors, and just about everyone else who uses WordPress. It is a truly great feature, so here are some tips on how to really utilize its greatness.
Some Basics
First of all, obviously, you need to enable it in your theme if you haven’t. To do this you need to add the following to your functions.php template:
1 | add_theme_support( 'post-thumbnails' ); |
Next, you can set a default thumbnail size (again in functions.php):
1 2 | set_post_thumbnail_size( 649, 245, true ); // default post thumbnail size with a hard crop // use "false" for soft crop, or box resize mode |
Alternatively, you can display the default post thumbnail size with this function:
1 | the_post_thumbnail(); |
More Advanced with Multiple Sizes
It’s really easy to add multiple thumbnail sizes that will allow you to display differently sized images in various parts of your site, while only uploading the image once. WordPress generates all of the sizes for you during upload.
To add a thumbnail size, you would add this to functions.php:
1 2 | // name of the thumbnail, width, height, crop mode add_image_size( 'post-image', 300, 180, true ); |
Or you could define more than one extra size like this:
1 2 3 | // name of the thumbnail, width, height, crop mode add_image_size( 'post-image', 300, 180, true ); add_image_size( 'featured-image', 652, 245, true ); |
Now you can display which ever size you want by passing the name of the desired thumbnail to the function, like so:
1 | the_post_thumbnail('post-image'); |
Checking for a Thumbnail
At times, it can be very useful to check whether a post has a featured image set, and alter the content if not, or display a default image. The function below will display an alternate image if no thumbnail is present.
You would add this code to single.php, index.php and any other template you want to display featured images:
1 2 3 4 5 | if(has_post_thumbnail()) { the_post_thumbnail(); } else { echo '<img />'; } |
This code snippet must go inside of the loop.
When developing WordPress sites, I will commonly set up three or four thumbnail sizes: one for a featured slider, one for the most recent posts, perhaps one for less recent posts, and one for the header image when viewing a single post.
Troubleshooting
When creating thumbnail sizes, it’s very common to have some of your images get distorted, or cropped incorrectly. This is most likely because the size was added after the image (and its thumbnails) were uploaded.
If this happens, use the Regenerate Thumbnails plugin to recreate the thumbnails for every image in the WordPress media library.
Have fun with images!
Pippin
Here's your complete code: http://pastebin.com/BZQHt3aP
- spam
- offensive
- disagree
- off topic
Like