How To Add Thumbnails to WordPress Posts

0

A beautiful featured image standing aside to your posts may be a nice feature to have for your theme. Whether you want to give your website more color, a more professional or consistent look or just a way to visually showcase your work, you may just want to have your site powered with this. Here I will present you with my way of implementing this feature into a theme. Since WordPress 2.9 there is built-in functionality for post thumbnails. Prior to that several tweaks were used to generate the thumbnails. In this article I will present how to implement the thumbnail core-functionality into the theme and also how to provide other alternatives for users that have versions older than 2.9 or have their site set up with old style to add thumbnails.

WordPress Featured Images

The new, built-in way to add thumbnail support to themes, available since version 2.9. Thumbnails were very popular way prior to this version, especially among magazine-styled themes, so a core functionality to add thumbnails was required to ease things up.

As any extended theme feature, support for it must be declared in the theme’s functions.php. Here’s how a standard implementation looks like:

1
2
3
4
if (function_exists('add_theme_support')) {
  add_theme_support('post-thumbnails');
  set_post_thumbnail_size(150,150);
}

First is checked if support for extended features exists, in order not to generate errors if users have versions prior to 2.9. Then, theme support for post thumbnails is declared and the default size of the thumbnails.

In this case, thumbnail support is added for both posts and pages. Let’s say you want to have this feature only for posts. In this case change the second line to this:

1
add_theme_support('post-thumbnails',array('post'));

The default thumbnails size is fixed and images are resized. If you want images to be cropped instead, change the third line to this:

1
set_post_thumbnail_size(150,150,true);

The third variable is the crop flag, which if set to true will crop your images instead of resizing them.

Well, not really. Until now I haven’t seen these parameters having any effect. If you want to declare a default thumbnails size and scaling method, I recommend you go to Settings › Media and set the thumbnail size and scaling method from there.

This only tells WordPress that post thumbnails are supported and adds an option to set the thumbnails in the editor. To display the thumbnail, the following code must be added in the template files in the location where you would like to display the thumbnail:

1
if (function_exists('has_post_thumbnail') && has_post_thumbnail()) the_post_thumbnail();

It is verified whether post thumbnails are supported and a thumbnail is declared and the last function displays it.

Several parameters can be given to the_post_thumbnail() function, I will stick only to one of them: size. The default  thumbnail size can be overridden in the following manner:

1
the_post_thumbnail(array(300,300));

The numbers correspond to width and height. In place of the array, predefined sizes can also be added, like ‘thumbnail’, ‘medium’ and ‘large’.

Now, if you go to the editor, you’ll see a nice new box called Featured Image, located on the right column, below the post tags, as shown in the image on the right. To select the image you would like to use as thumbnail, click on the “Set featured image” link. “The Add an Image dialog will show up where you can upload an image or select one from the Media Library. From here you can also select the size in which you would like to display the thumbnail; ignore the alignment as it does not apply in this case. To set the image as a thumbnail instead of simply inserting it into the post, click the “Use as featured image” link, shown in the image below. After updating the post the selected image will appear at the specified location in the post. You can remove or change this image later.

Now let’s say your users have a version older than 2.9, or have used a theme before that had a custom way to add thumbnails. Having the new thumbnail system may be nice, but they will also end up with a lot of broken images if the old thumbnail system is no longer supported. For backwards compatibility I still like to incorporate the old custom methods of adding thumbnails, along with the new built-in one. The most popular one is using the timthumb script.

If this post helps you any way plz Join techinfoBiT on facebooktwitter,  or subscribe blog-feed.

LEAVE A REPLY

Please enter your comment!
Please enter your name here