post thumbnails
Additions like post thumbnails are not currently part of the tutorial itself and so the theme here does not include this feature. This post will outline the steps needed to add this feature to our theme by adding 2 code snippets.
Thumbnail images are a nice feature to make your site more engaging. They are usually shown on the main pages, ie the category page that shows the overview of posts for that category. We can add these to our category.php page, inside the loop, and integrate them into our design quite easily. This will create a more visually engaging page and give more context at the same time as acting as a strong prompt for click-throughs.
To add this feature, we will add one line into the functions.php file which will result in an addition to the post settings in the right panel in admin. The Feature image drop down will then allow for an image to be added, via upload or media library. To show it on our page, we then add one more snippet to the template of the pages we’d like to show this image on ~ easy :)
Step 1 : add theme support
Edit the theme’s function.php and add the following:
# ------------------------------------------
# post thumbnails
# ------------------------------------------
add_theme_support( 'post-thumbnails' );This enables the post thumbnails to be used by the theme. At this point, the only change applied is that the post editor will now show the extra option in the post settings. It does not show up anywhere on our site’s pages until we have added it to our template file/s.
NOTE: the file used for this feature is already included in WP core: wp-includes/post-thumbnail-template.php ~ and this is not a file we will ever edit!!! Useful for reference alone.
Step 2 : add theme support
The final step is now to decide where this image should be shown. Typically used on the catgory page alongside the title and excerpt (or full content), we can also add this to be shown on the post page itself. All depends on our initial plans :)
We will now check the template file ~ e.g. the category.php file and add the following into the loop:
<!-- add post thumbnail -->
<?php
if ( has_post_thumbnail() ) {
the_post_thumbnail();
}
?>Where exactly this is placed depends on our design. Typically we would put this after the headings (and meta data if used) and before the textual content. We can then also add it to the post page itself by adding the same code to the single.php file.
Step 3 : upload & test
With the code additions done, we can now upload the updated files to our theme. By editing our posts, uploading an image to the new options in the settings for the featured image, the selected image will now appear on our chosen pages. We might need to tweak our CSS to ensure it displayes as intended.
& DONE :)
The code quoted here is the most basic and is all we will need to add this image ~ there are various other parameters we could use to refine details, such as specific sizing etc.
See this Post Thumbnails article in the WP Codex.