Everything You Need to Know About Thumbnails in WordPress

Since version 2.9 of WordPress, article thumbnails have appeared in the form of a “Featured image” module in the editor.

These thumbnails require the theme to support such functionality, which is still far from the case. I, therefore, suggest that you follow this tutorial to make your theme compatible and thus benefit from a very useful functionality.

Most current blogs display a thumbnail to hang the reader next to the title and description of an article. This is the case on WordPress Channel and on countless blogs.

Activate Support For Article Thumbnails

To activate support for thumbnails, go to the Appearance module then Editor. You can also use your favorite FTP client to edit the theme files located in the / wp-content / themes / NOM_DU_THEME folder. You will then be able to make a backup beforehand.

Then edit the functions.php file and add the following lines of code:

if (function_exists( 'add_theme_support' )) {
  add_theme_support( 'post-thumbnails' );
}

This piece of code activates the Featured Image module in the WordPress editor.

Show Article Thumbnail

Now that you have the module for adding thumbnails, we need to indicate where we want them to appear on the site. Typically, we have to intervene in the WordPress loop.

As a reminder, the loop or loop displays your articles in the different pages of the site: home, category, tags, etc.

To avoid going into the technique, first, locate the line that calls the content or extract of your article in the file index.php :

<?php the_content(); ?>

or

<?php the_excerpt(); ?>

Then place this line of code before either of these 2 functions:

<?php
if ( has_post_thumbnail() ) { // Vérifies qu'une miniature est associée à l'article.
  the_post_thumbnail();
}
?>

Do not forget to save the file in question then repeat the operation for all the files which display the loop (category.php, home.php if present, etc.).

Use Different Thumbnail Sizes

Different sizes of thumbnails exist. In reality, you should know that the thumbnails of articles can be used for a lot of things: think of the tool as a module where the user will indicate an image.

The display function that we just put in the code can, therefore, be placed anywhere, especially since size parameters exist.

the_post_thumbnail();                  // la miniature par défaut
the_post_thumbnail('thumbnail');       // Miniature (150px x 150px max)
the_post_thumbnail('medium');          // Taille moyenne (300px x 300px max)
the_post_thumbnail('large');           // Taille large (default 640px x 640px max)
the_post_thumbnail( array(100,100) );  // Autres tailles

As you can see, the sizes are based on the parameters defined in the WordPress back office under Settings then Media. Take care to modify them as you wish or define a tailor-made with the last parameter.

NB : be careful not to create chain sizes without taking care to check the storage space provided by your host. Each size creates one more image file on your server.

What to Do to Recover Old Thumbnails?

If like me you have used custom fields for years to indicate the URL of your article thumbnails – based on the timthumb.php script, for example, there is the Get the Image plugin from Justin Tadlock. However, I have not yet tested such an extension. So this is a track that I give you to dig a little more on the subject.

Without the use of a plugin, you will lose all your previously defined parameters.

It is recommended to always use a WordPress theme based on the native thumbnail function. In this way, you benefit from greater stability for future versions and better compatibility with plugins that increasingly use this functionality. You can also read this tutorial on how to retrieve the first image of an article via PHP, thus avoiding having to use thumbnails.