Include Thumbnails in WordPress Posts and RSS Feed

Have you ever wanted to define a featured image on your WordPress post? You need to enable thumbnails in your WordPress theme. Even after doing so, they won’t appear in your RSS feed. Let’s learn how to do both!

Enable Thumbnails

To enable thumbnails in your WordPress posts (or any post type you want), you must enable it in your theme using the add_theme_support function. The best time to do this is after the theme is loaded. There’s an action hook for that called after_setup_theme.

Navigate to Appearance > Theme Editor and open the template file in your theme called functions.php. Add the following code to it.

add_action( 'after_setup_theme', 'my_setup_theme' );

The second parameter in the add_action function is the name of the function you want to call. Let’s create that function now. Include the add_theme_support function, and pass in post-thumbnails as the feature to enable and an array of post types that will use thumbnails.

// Set up anything the theme uses.
function my_setup_theme() {
  // Add thumbnail support.
  add_theme_support( 'post-thumbnails', array( 'post' ) );
}

After doing the above, you should now see the Featured Image section in your editor and can add a thumbnail!

Display Thumbnails in Posts

Find the WordPress loop code in each of the theme files you’d like to display your thumbnails. Every theme is different, but you should be able to find something similar to the examples below:

<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>

<?php endwhile; else : ?>

<?php endif; ?>

<?php 
  if ( have_posts() ) {
    while ( have_posts() ) {
      the_post(); 

    } 
  } 
?>

Within the loop, wherever you’d like to display your thumbnail, use the_post_thumbnail function, passing in the thumbnail size and an array of attributes.

However, it would be safer to check if the post actually has a thumbnail and if not, we could display a default one instead. In this particular example, the default thumbnail lives in the theme’s folder.

<?php if ( has_post_thumbnail() ) { ?>
  <?php the_post_thumbnail( 'card', array( 'alt' => get_the_title(), 'class' => 'border mb-2' ) ); ?>
<?php } else { ?>
  <img src="<?php bloginfo( 'stylesheet_directory' ); ?>/img/thumbnail.png" class="border mb-2" alt="<?php the_title(); ?>" />        
<?php } ?>

Display Thumbnails in RSS

Even though you have enabled thumbnails and associated them to your WordPress posts, they won’t show up in your RSS feed automatically. To include thumbnails in your WordPress RSS feed, we’ll make use of two filter hooks called the_excerpt_rss and the_content_feed.

Navigate to Appearance > Theme Editor and open the template file in your theme called functions.php. Add the following code to it.

add_filter( 'the_excerpt_rss', 'my_rss' );
add_filter( 'the_content_feed', 'my_rss' );

The second parameter in the add_filter function is the name of the function you want to call. Let’s create that function now. Notice we’re using the same function for both filter hooks. It receives the current post content as an argument. Let’s call it $content.

// Adjust rss feed content.
function my_rss( $content ) {

}

Let’s continue adding to the function. First, we need access to the global variable called $post. This will give us some information we need about the post.

global $post;

Create a variable called $thumbnail to store the post’s thumbnail. We’ll use the function called get_the_post_thumbnail to get the actual thumbnail, passing in the post id, thumbnail size, and array of attributes we’d like to use.

$thumbnail = get_the_post_thumbnail( $post->ID, 'card', array( 'alt' => get_the_title() ) );

If the post doesn’t have a thumbnail, let’s use a default thumbnail. Create a variable called $defaultThumbnail with the value being the path to the image. In this particular example, the default thumbnail lives in the theme’s folder.

$defaultThumbnail = get_bloginfo( 'stylesheet_directory' ) . '/img/thumbnail.png';

If the post has a thumbnail, display that first followed by the content. If the post has no thumbnail, create an image tag with its source being the $defaultThumbnail image path we created above followed by the content.

if (has_post_thumbnail( $post->ID )) {
  // Include thumbnail in rss feed if one exists.
  $content = '<p>' . $thumbnail . '</p>' . $content;
} else {
  $content = '<p><img src="' . $defaultThumbnail . '" alt="' . get_the_title() . '" /></p>' . $content;
}

Finally, return the adjusted content.

return $content;

After doing the above, thumbnails should now appear in your WordPress RSS feed!

Visit our website at https://nightwolf.dev and follow us on Facebook and Twitter!