Include Thumbnails in WordPress Posts and RSS Feed
Tags: php, wordpress, webdev
Published: 2021-01-23 16:19:22

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](https://developer.wordpress.org/reference/functions/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](https://developer.wordpress.org/reference/hooks/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.

```php
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.

```php
// 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!

![WordPress Featured Image](https://dev-to-uploads.s3.amazonaws.com/i/s6w48rsx2c7gowq0670n.png)

## Display Thumbnails in Posts

Find the [WordPress loop](https://codex.wordpress.org/The_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
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
   
<?php endwhile; else : ?>
       
<?php endif; ?>
```

```php
<?php 
  if ( have_posts() ) {
    while ( have_posts() ) {
      the_post(); 
   
    } 
  } 
?>
```

Within the loop, wherever you’d like to display your thumbnail, use [the_post_thumbnail](https://developer.wordpress.org/reference/functions/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
<?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](https://developer.wordpress.org/reference/hooks/the_excerpt_rss/) and [the_content_feed](https://developer.wordpress.org/reference/hooks/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.

```php
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**.

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

Let’s continue adding to the function. First, we need access to the [global variable](https://codex.wordpress.org/Global_Variables) called **$post**. This will give us some information we need about the post.

```php
global $post;
```

Create a variable called **$thumbnail** to store the post’s thumbnail. We’ll use the function called [get_the_post_thumbnail](https://developer.wordpress.org/reference/functions/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.

```php
$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.

```php
$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.

```php
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.

```php
return $content;
```

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

---
#### Visit our website at [https://nightwolf.dev](https://nightwolf.dev) and follow us on [Facebook](https://www.facebook.com/NightWolfDevelopment) and [Twitter](https://twitter.com/nightwolfdev)!
---