|

Add Featured Image Support To Your WordPress Theme

Add Featured Image Support To Your WordPress Theme

This tutorial will cover all the things we need to do in order to add featured image support to our WordPress Theme. We’ll talk a little bit about just what a featured image is in WordPress, how you assign a featured image to a blog post in WordPress, and how we can have fine grained control over the output of the featured image along with controlling aspect ratio. Most importantly, we will see how to add featured image support to your theme, otherwise we can’t make use of them. So let’s jump in and learn how to configure featured image support in a WordPress Theme.


What is a WordPress featured image?

A featured image is a single image that the author chooses to represent a single blog post in WordPress. Featured images are different from a regular image you might add to your post in the text area of a post. As you might be familiar with, you can insert an image anywhere in the post that you feel is appropriate. A featured image differs from this in that WordPress will set the featured image programmatically into your post. You do not manually choose it’s location. The featured image may be dynamic in that on the main blog listing homepage, you might see the featured image with a thumbnail size while on the single post view it may appear more as a banner. The takeaway is that a featured image is a separate field in your WordPress post that allows a theme to do some very interesting and dynamic display options with that image.


Adding Featured Image Support To Our Theme

We can start adding featured image support to our theme by navigating to our functions.php and adding some code to it at the end of the file. Here is the snippet to add to the file:

With this code in place, we should now see a screen option in the WordPress editor to set a featured image. Navigating there now does show us that yes, featured images are now enabled in our theme.
featured image screen option


Assigning The Featured Image

With our featured image support now in place, let’s go ahead and try adding a featured image to a post on our site. To set the featured image, let’s go ahead and click on ‘Set featured image’, then ‘Select Files’ from the Upload Files popup, click on the file you are choosing for the featured image and once it finishes uploading you can click on the Set featured image button.
featured image is now set


Hey wait a minute!

If you visit your site it looks like the wordpress featured image is not showing on page. What’s up with that?! Well that is because we have in fact turned on support for featured images in our theme, but we have not yet supplied the code into our theme files to handle the output and display of a featured image. We can do that now!


Adding Code To Output A Featured Image

We can start of with the basics. All we want to do is to output the featured image above the text of the blog post. How might we do that? We can start by navigating to our index.php file and making use of the the_post_thumbnail() function. Here is that updated code with the relevant parts highlighted.

Does the featured image work? Well, let’s take a look at our site!
featured image is working
Well, it’s not the best looking thing in the world, but yes, our featured image is now working!


How to customize featured image sizes with add_image_size()

Let’s go a little further and now add support for multiple sizes of the featured image using the add_image_size() function. We will add this function to our functions.php file. In fact we will add it two times , because we want to add a small size and a larger size of the image.

You’ll notice that we actually passed four arguments to the function. Let’s review what each does. The first argument is the size identifier for the image. In other words, since we named the first one ‘small-thumbnail’, we can now use that identifier in our theme when we want to output an image of this size to the page. The next two arguments are of course integer values and they represent the width and height that you want the image to display as. The fourth argument is a boolean option where true means to crop images to the specified width and height and false means to simply resize the image.


Setting the ‘small-thumbnail’ for blog post pages

In our index.php file, we can now use this snippet to output the smaller size image:


Setting the ‘single-post-image’ size for single posts

In our single posts, we would like to display the larger size image, so we can use this snippet in single.php

With this code in place, we can see that we now get a different featured image size whether we are on the homepage, or on a single post page.
different featured image sizes


Using CSS and HTML to position featured images

Right now, the small thumbnail and single post image don’t really fit in too well with our content. We can update both the index.php and single.php files to support our featured image. We will need to make use of a wrapping div element with a class we can target in the css file. It also makes sense to only output the wrapping class if there is a thumbnail associated with the post. We will make use of the has_post_thumbnail() function to help us in this regard. In the meantime, we have added featured images to our other two posts so we can test it all out once complete. Here is the updated index.php file and single.php file with the relevant markup highlighted.

index.php

single.php

With this markup in place, we also need to update our style.css file like so:

In the snippets above, we first check to see if the post currently being displayed in the loop even has a thumbnail. If it does, we output the markup and if it doesn’t we do not. This is a good practice to get in the habit of. It doesn’t really make sense to output empty html tags to the page when there is no content inside of it. So by using the has_post_thumbnail() function, we can accomplish that goal. Also, notice that we used two different classes. We assigned a class of ‘small-thumbnail’ to our index.php page and a class of ‘single-post-image’ to our single.php page. This way, we can assign specific CSS rules to the image, depending on the page that is being viewed. With regard to the CSS we have applied, first we simply applied a float of left and a margin which specifies the top, right, bottom, and left values.

Let’s now take a look at how things are coming along.
thumbnail featured images working great
Very Cool! What’s nice about featured images is that once the legwork is out of the way with regard to registering the featured image and various image sizes in functions.php, you can then have your theme dynamically display the featured image in various formats automatically. All you have to do is set the featured image and you are good to do. So in other words, set it and forget it!


Make Featured Images Clickable

Let’s now take a moment to enable the ability to click on our featured images to load the associated blog post. This is super easy to do. All we have to do is wrap the the_post_thumbnail() function with an anchor tag and specify the href value of that anchor tag using the the_permalink() function. Here are the snippets of both index.php and single.php with the highlighted lines.

index.php

single.php

When visiting the homepage or single page views of a post on our site, we can see that the featured image is not clickable. Note the cursor being that of a hand to indicate a clickable link in the screenshots here.


Users can click the featured image on the home page

clickable featured image


Users can click the featured image on a single page

clickable featured image on single page


Add Featured Image Support To Your WordPress Theme Summary

In this tutorial, we learned all about featured images in WordPress. We learned that you must first add support for a featured image in your theme by adding some code to your functions.php file. Specifically, the add_theme_support( ‘post-thumbnails’ ); function must be called in functions.php. Once we enabled featured images, we saw how to display a featured image in our WordPress posts. Once we had the basics down, it made sense to set the featured image size for various formats. We chose one size for the homepage, and another for single post pages. Towards the end of the tutorial, we used some CSS to position our featured images in a pleasing way, in addition to making our featured images clickable.