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.
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
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.
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.
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.
Added. Took me half an hour to write and test the code which includes the linked image back to the post and inline styling.
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.
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.
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.
Yes, you need to add inline CSS.
(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?
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.
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 !
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.