Add Featured Image Thumbnail From Post To RSS Feed

In this tutorial, i’ll show you how easy it to add a featured image from all your posts anywhere in your RSS feed. This tip works regardless of whether you’re using Feedburner or your default WordPress RSS feed address.

Note: Some RSS feed management services like Feedburner may cache your feed which means you may need to wait for it to update before your featured image displays. Pssst… You can Ping Feedburner so it updates immediately

PHP Code

Simply add this code to the end of your child themes functions.php file using a code editor and your featured image will appear in your feed. This code works with any theme as it uses the standard WordPress hooks and filters.

You can easily style the images in your feed by modifying the values in this in-line CSS for:

  • float-left – Easily change this to float right or align-none
  • margin right – This adds a space between the image and text when the image is floated to the left
  • height – This is the height you can set for the image in your feed
  • width – And this is the settings for the width of the image
  • border – This controls the border around the image which is a solid 2 px size light grey color

Note: You can only style your featured image in your feed using inline CSS. Adding a class to the PHP code and then styling your image from your themes style.css will not work.

Link Featured Image In RSS Feed Back to Single Post

This code includes a featured image which is linked back to the single post the featured image is attached to.

Set RSS Image Size

There’s different way you can set the size for images in your RSS feed. The above code includes the name of a custom image size which has been added to the child themes functions.php file like this:

/** Add new image sizes */
add_image_size( 'rss-image', 300, 150, TRUE );

Another option is to use the default Media settings for image sizes and replace rss-image in the code to either:

  • Thumbnail size – Use ‘thumbnail’
  • Medium size – Use ‘medium’
  • Large size – Use ‘large’

Media Settings – Image Sizes

Image Sizes

You can use the size in the above settings to control the size of images in your feed as seen in the image size list above. When using these sizes you would remove the CSS code from the PHP snippet which controls the height and width.

Styling RSS Feeds Font

If you’re using Feedburner to manage your feed, you could also change the font size, font family and color of your font so the post excerpt aligns with the bottom of your image.

Publicize Email Branding

Plugins

If your prefer to use a plugin, here’s 2 which get the job done:

Featured Image In RSS Feed – This plugin enables you to change the size of the post image in your feed otherwise it uses the thumbnail size set in your Settings > Media > Thumbnail Size.

Add Featured Image To RSS Feed – This plugin simply displays an image in your RSS feed using the Large size in your media settings.

Conclusion

You could also add more CSS code to the PHP snippet above and make your images rounded or even add a box shadow effect to your images.

Another option would be to add a conditional tag to the code if you only want thumbnails displaying in your feed from a specific category or to set other conditions.


Comments

11 responses to “Add Featured Image Thumbnail From Post To RSS Feed”

  1. Gretchen Louise Avatar
    Gretchen Louise

    Thank you for this easy, straight-forward code. Do you have any suggestions on editing it so that the image would be hyperlinked to the post? (i.e. click the image to get to the post) Thank you.

    1. Brad Dalton Avatar
      Brad Dalton

      Added. Took me half an hour to write and test the code which includes the linked image back to the post and inline styling.

  2. Hi Brad,

    Thanks for posting this. Do you know if this works with Genesis child themes at all? I’m using a custom Genesis child theme designed by myself, and have RSS set to WordPress’ summary.

    However, looking at my RSS feed, it just shows text so I’d love to show the featured image above the excerpt text so people can get an idea what the post is about because I post only recipes. Doesn’t seem right to just post text, and I don’t want to show the full post – what’s the point in visiting my site if you can read the entire post in the RSS reader?

    Thanks for your time.

    1. Brad Dalton Avatar
      Brad Dalton

      Hello Lisa

      I use this code myself however please note that the CSS will also need to be added to the code to work as it won’t work from any style sheet.

      1. Thanks for responding, Brad. I added it to my Genesis child theme’s functions.php and pinged feedburner. Waited a little while and refreshed my feed. It works, thank you!

        However, I’ve noticed that since my WordPress is set to summary instead of full posts in RSS that the image is on the same line as the text.

        For example: [IMAGE]Text excerpt […]

        I don’t mind the image not being styled (although I entered auto for left and right margins), but is there anyway I can separate the text onto a new paragraph away from the image at all?

        Perhaps, adding margin-bottom might do the trick, but wondered what your thoughts were? Thanks again.

        1. Brad Dalton Avatar
          Brad Dalton

          Yes, you need to add inline CSS.

  3. (I’m not sure if my previous comment was delivered, so I’m writing again. Sorry if it’s a duplicate!)

    Hi, I’m updating my friend’s RSS feed using your code (and the plugins), but it’s not changing. Still don’t see the image. Do you have any idea why?

    1. Brad Dalton Avatar
      Brad Dalton

      I use the same code on my site here and it works for me.

      I think the problem you may be experiencing is caused by using a plugin and code to do the same thing.

      Try de-activating your plugin.

  4. sherazade Avatar
    sherazade

    Hi !
    I’d like to know if this code works with Feedburner Newsletter because few days ago I Installed a Featured Images in RSS w/ Size and Position plugin it seems like it work juste for RSS feedburner but any picture displayed in feedburner newsletter.
    Thank you !

    1. Brad Dalton Avatar
      Brad Dalton

      I wrote this code to work with Feedburner as that’s what i use myself so try it out and ping your website to see your featured images included in your feed.

Leave a Reply

Join 5000+ Followers

Get The Latest Free & Premium Tutorials Delivered The Second They’re Published.