WordPress Post Thumbnail
Post Thumbnail adds a featured image box within the wordpress editor, which works similar to the add an image function. This makes it a lot easier for those with not that much knowledge on the workings of a website to quickly add an image that will displayed on other pages. Here is a quick tutorial on how to get it to work within a theme.
Activating the function
First things first, open up the functions.php within your theme, if you don’t have one you will need to create one. To activate support for this function do one of the following:
To add it to both posts and pages:
add_theme_support( 'post-thumbnails' );
For just posts:
add_theme_support( 'post-thumbnails', array( 'post' ) );
For just pages:
add_theme_support( 'post-thumbnails', array( 'page' ) );
Setting a size for the featured thumbnail:
set_post_thumbnail_size( 70, 70 );
The above will make the image 70 pixels by 70 pixels, however if the image isn’t square it will mean that it will make the larger size 70px and then resize the smaller side to keep the aspect ratio of the image (for example 70px by 25px).
To force the image to crop to 70px by 70px instead of maintaining the aspect this can be used instead:
set_post_thumbnail_size( 70, 70, true );
Display thumbnail in a theme
To add this feature into your theme so that it will display the image on the page, just add this bit of code where you would like the image to be shown within the loop. You don’t need to encase it in the image element it will generate everything it needs to display the image.
<?php the_post_thumbnail(); ?>
Adding different sizes
Sometimes different sized images are required for different pages of a site, here is how to do it.
if ( add_theme_support( 'post-thumbnails' );
set_post_thumbnail_size( 70, 70, true ); // default thumbnail size
add_image_size( 'single-post', 300, 9999 ); // size for post or page image
add_image_size( 'archive-thumbnail', 30, 30, true ); // size for archived image.
}
The above example is for 3 different sized images for the homepage, post page and the archives page. By setting the single-post to a large number for the height will ensure that the width is 300px while maintaining the aspect ratio of the height.
To get it to display the different image sizes all that needs to be added into the pages code is the name that has been given within the function.
For the post page:
<?php the_post_thumbnail( 'single-post' ); ?>
For the archive page:
<?php the_post_thumbnail( 'archive-thumbnail' ); ?>
The names don’t have to be what has been given in the example, they can be called what you like.
Adding thumbnail to a post or page
In the WordPress editor there will now be a box on the right hand side, depending on the version of WordPress it will be called something different, from this box or the usual ‘add image’ dialogue box you will be able to add a featured image. The only difference from adding an image to a post normally, is instead of pressing the ‘insert into post’ button, there will be one next to it called something like ‘use as thumbnail’ (again the wording might be different). By pressing this button it will add it to the image box on the right and it will be set as the featured image.
Adding some style
If you wish to add some styling to these images you can do so by using the default class .wp-post-image. Alternatively you can set your own class, so if you have multiple sizes and want different styles this way can be quite useful:
<?php the_post_thumbnail( array( 'class' => 'class-name-here' )); ?>
Socialise