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 the 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 its 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:
/* Add Featured Image Support To Your WordPress Theme */
function add_featured_image_support_to_your_wordpress_theme() {
add_theme_support( 'post-thumbnails' );
}
add_action( 'after_setup_theme', 'add_featured_image_support_to_your_wordpress_theme' );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.
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.
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 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.
<?php
get_header();
if ( have_posts() ) :
while ( have_posts() ) : the_post(); ?>
<article class="post">
<h2><a href="<?php the_permalink() ?>"><?php the_title() ?></a></h2>
<p class="post-meta"><?php the_time( 'F jS, Y' ); ?> | <a
href="<?php echo get_author_posts_url( get_the_author_meta( 'ID' ), get_the_author_meta( 'user_nicename' ) ); ?>"><?php the_author(); ?></a>
| <?php
$categories = get_the_category();
$comma = ', ';
$output = '';
if ( $categories ) {
foreach ( $categories as $category ) {
$output .= '<a href="' . get_category_link( $category->term_id ) . '">' . $category->cat_name . '</a>' . $comma;
}
echo trim( $output, $comma );
} ?>
</p>
<?php the_post_thumbnail(); ?>
<p>
<?php echo get_the_excerpt() ?>
<a href="<?php the_permalink() ?>">Read more »</a>
</p>
</article>
<?php endwhile;
else :
echo '<p>There are no posts!</p>';
endif;
get_footer();
?>Does the featured image work? Well, let’s take a look at our site!
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.
/* Add Featured Image Support To Your WordPress Theme */
function add_featured_image_support_to_your_wordpress_theme() {
add_theme_support( 'post-thumbnails' );
add_image_size( 'small-thumbnail', 100, 100, true );
add_image_size( 'single-post-image', 250, 250, true );
}
add_action( 'after_setup_theme', 'add_featured_image_support_to_your_wordpress_theme' );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. A 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:
<?php the_post_thumbnail('small-thumbnail'); ?>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
<?php
get_header();
if ( have_posts() ) :
while ( have_posts() ) : the_post(); ?>
<article class="post">
<h2><a href="<?php the_permalink() ?>"><?php the_title() ?></a></h2>
<p class="post-meta"><?php the_time( 'F jS, Y' ); ?> | <a
href="<?php echo get_author_posts_url( get_the_author_meta( 'ID' ), get_the_author_meta( 'user_nicename' ) ); ?>"><?php the_author(); ?></a>
| <?php
$categories = get_the_category();
$comma = ', ';
$output = '';
if ( $categories ) {
foreach ( $categories as $category ) {
$output .= '<a href="' . get_category_link( $category->term_id ) . '">' . $category->cat_name . '</a>' . $comma;
}
echo trim( $output, $comma );
} ?>
</p>
<?php the_post_thumbnail('single-post-image'); ?>
<?php the_content() ?>
</article>
<?php endwhile;
else :
echo '<p>There are no posts!</p>';
endif;
get_footer();
?>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.
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 are the updated index.php file and single.php file with the relevant markup highlighted.
index.php
<?php
get_header();
if ( have_posts() ) :
while ( have_posts() ) : the_post(); ?>
<article class="post">
<?php if ( has_post_thumbnail() ) { ?>
<div class="small-thumbnail">
<?php the_post_thumbnail( 'small-thumbnail' ); ?>
</div>
<?php } ?>
<h2><a href="<?php the_permalink() ?>"><?php the_title() ?></a></h2>
<p class="post-meta"><?php the_time( 'F jS, Y' ); ?> | <a
href="<?php echo get_author_posts_url( get_the_author_meta( 'ID' ), get_the_author_meta( 'user_nicename' ) ); ?>"><?php the_author(); ?></a>
| <?php
$categories = get_the_category();
$comma = ', ';
$output = '';
if ( $categories ) {
foreach ( $categories as $category ) {
$output .= '<a href="' . get_category_link( $category->term_id ) . '">' . $category->cat_name . '</a>' . $comma;
}
echo trim( $output, $comma );
} ?>
</p>
<p>
<?php echo get_the_excerpt() ?>
<a href="<?php the_permalink() ?>">Read more »</a>
</p>
</article>
<?php endwhile;
else :
echo '<p>There are no posts!</p>';
endif;
get_footer();
?>single.php
<?php
get_header();
if ( have_posts() ) :
while ( have_posts() ) : the_post(); ?>
<article class="post">
<?php if ( has_post_thumbnail() ) { ?>
<div class="single-post-image">
<?php the_post_thumbnail( 'single-post-image' ); ?>
</div>
<?php } ?>
<h2><a href="<?php the_permalink() ?>"><?php the_title() ?></a></h2>
<p class="post-meta"><?php the_time( 'F jS, Y' ); ?> | <a
href="<?php echo get_author_posts_url( get_the_author_meta( 'ID' ), get_the_author_meta( 'user_nicename' ) ); ?>"><?php the_author(); ?></a>
| <?php
$categories = get_the_category();
$comma = ', ';
$output = '';
if ( $categories ) {
foreach ( $categories as $category ) {
$output .= '<a href="' . get_category_link( $category->term_id ) . '">' . $category->cat_name . '</a>' . $comma;
}
echo trim( $output, $comma );
} ?>
</p>
<?php the_content() ?>
</article>
<?php endwhile;
else :
echo '<p>There are no posts!</p>';
endif;
get_footer();
?>With this markup in place, we also need to update our style.css file like so:
.small-thumbnail {
float: left;
margin: 0px 10px 10px 0px;
}
.single-post-image {
float: left;
margin: 0px 12px 12px 0px;
}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.
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 go. 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
<?php if ( has_post_thumbnail() ) { ?>
<div class="small-thumbnail">
<a href="<?php the_permalink() ?>"><?php the_post_thumbnail( 'small-thumbnail' ); ?></a>
</div>
<?php } ?>single.php
<?php if ( has_post_thumbnail() ) { ?>
<div class="single-post-image">
<a href="<?php the_permalink() ?>"><?php the_post_thumbnail( 'single-post-image' ); ?></a>
</div>
<?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
Users can click the featured image on a 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.
