How to Optimize RSS to Display Featured Blog Images

March 14, 2012
wordpress-blog-expert-series

Images are playing a bigger part of blogging, with themes that highlight the posts’ featured images becoming more popular, creating great visually appealing layouts. Even more so with the popularity of Pinterest and Facebook sharing, which uses an image from the page or post. Even with various methods for including specific Facebook OpenGraph code within your post, your content could be shared via other methods that don’t take the Opengraph information into account, like RSS and feed syndication or sharing services like the awesome DLVR.it or Feedburner.

UPDATE AUGUST 2013: I went ahead and created a WordPress plugin for this, since there were quite a few people not having success with editing their theme files. Please read the new post instead of trying to follow the more technical code modifications below!

Click here: WordPress Featured Images in RSS Feed plugin

Here’s a fairly simple way to include the featured image of your WordPress blog post in the RSS/Feedburner feed itself, so that services that syndicate or share via RSS, use it when posting to Facebook and other image-friendly sharing sites like tumblr or posterous, etc.

Edit your theme’s functions.php file (via FTP, your host’s File Manager, or WordPress’ Editor under Appearance) which is under the /wp-content/themes/themename/ folder, or create one if need be, and add these lines near the top:

function featuredtoRSS($content) {
global $post;
if ( has_post_thumbnail( $post->ID ) ){
$content = '' . get_the_post_thumbnail( $post->ID, 'thumbnail', array( 'style' => 'float:left; margin:0 15px 15px 0;' ) ) . '' . $content;
}
return $content;
}
add_filter('the_excerpt_rss', 'featuredtoRSS');
add_filter('the_content_feed', 'featuredtoRSS');

To display larger images instead, change the word ‘thumbnail‘ to ‘medium‘, ‘large‘ or ‘full‘. To remove the float so the image appears above your text, replace the content line above with this one:

$content = '<div>' . get_the_post_thumbnail( $post->ID, 'full', array( 'style' => 'margin-bottom: 15px;') ) . '</div>'. $content;

You should be able to preview your RSS feed using your favorite feed reader, but keep in mind services like Feedburner cache your feed, so expect to wait 12-24 hours for it to update before you see these changes.

For more WordPress support check out these helpful articles from our WordPress Expert Series:

Why the 1-Click WordPress Install Should Be Avoided

WordPress for Enterprise Facts, Myths, and Tips for Success

3 Surprising WordPress Uses Beyond Blogging for Business

How to Set Up 301 Redirects to Maintain WordPress SEO

Share

You Might Also Like

24 Comments

  • Reply DTR March 14, 2012 at 10:32 am

    This is great content… very important for certain syndication scenarios. Oh wait, I wrote it, but hey it’s true.

    What, you don’t have syndication scenarios? You need social sharing strategy? Content strategy? I know someone that can help. 😉

    At the very least, leave a comment that you loved the blog post, I get a nickle for every one.

    Thanks,
    Rob

  • Reply Miguel Salcido March 14, 2012 at 1:50 pm

    Dear lonelyblogger15,

    This is a great post, a bit technical but useful for sure! I wanted to add that you can “resync” your feedburner feed and the changes should show right away for you. This should be helpful for QA.

  • Reply DTR March 14, 2012 at 2:15 pm

    Hi Miguel,

    Thanks for the comment. Look, I found a nickel!

    Ah yes, I was going to mention resync and pinging options in feedburner, but didn’t want to make it too Feedburner specific, and just waiting is easier. But for those that want to know, here’s where you can resync your feedburner feed:
    http://feedburner.google.com/fb/a/troubleshoot – Click the big Resync near the bottom. Or have it refresh the feed by pinging it here:
    http://feedburner.google.com/fb/a/ping

    It is a bit technical, but there’s not yet a plugin that does this, hence the code. Ah, here’s a plugin that adds a logo (same for all posts) to your RSS feed, for the less technical:
    http://wordpress.org/extend/plugins/rss-add-image-header/

    I will also add that the code above kinda goes against my rule of editing themes directly – you should create a child theme for any style customizations, as a rule – so if you’re doing this plus other customizations, a child theme may be the better way to go. I’ve also seen similar tips that edit the core WordPress file wp-rss2.php, but please, never edit the core files – they may get overwritten with the next WordPress update.

    As always, if anyone needs help with the more technical aspects of their web site, feel free to contact me, or attend one of my workshops: http://meetup.com/webhelp/

    Thx,
    DTR

  • Reply How to Optimize RSS to Display Featured Blog Images | Web Wizards April 2, 2012 at 7:02 am

    […] the full post at: How to Optimize RSS to Display Featured Blog Images  Posted in Featured Articles, Social Media, Tips and Tricks, […]

  • Reply 3 Surprising Wordpress Uses Beyond Blogging for Business | Web Wizards April 9, 2012 at 7:01 am

    […] the full post at: 3 Surprising WordPress Uses Beyond Blogging for Business Posted in Featured Articles, Tips and Tricks, […]

  • Reply Top Social Media Tips from Community Managers | Brands With Fans | Social Media Marketing Blog October 5, 2012 at 2:49 pm

    […] You might also check out our post on optimizing RSS to display featured blog images. […]

  • Reply LinuXplained January 15, 2013 at 1:51 pm

    Thanks! I modified my feed based on this and now have thumbnails in my RSS feeds.

  • Reply Nancy Raskauskas February 7, 2013 at 10:34 am

    Thank you for actually describing how to fix this issue, after looking t about 25 blogs and forums and finding no real help.
    I followed your directions of putting the code into functions.php but it still did not render my images in the feed syndications. I refreshed and pinged both my feedburner and my NetworkedBlogs syndications. Possibly because:
    1. I may have placed the code in the wrong “top” area. Not really sure exactly what you meant.
    2.My post images are inserted by custom fields. Is there a way to include images when inderted this way?

    • Reply Rob Marlbrough (@DowntownRob) February 7, 2013 at 3:39 pm

      Hi Nancy,

      Thanks for your comment, glad you liked it.

      “Near the top” of the functions.php file is fine, anywhere in that file should work.

      This code only works with the “Featured Image” of your blog post. For using custom fields, with a theme using that custom field, it wouldn’t work… although, you could try setting a Featured Image, as well as your custom field, and the theme may not even use the Featured Image, but this code will, and all would work well.

      Hope that helps!

      • Reply Louise February 18, 2013 at 9:37 am

        Hi there,

        I’ve been trying to add the code but when I do, the site goes down and just shows, on a blank white page, the code that I tried to paste in?

        Thanks for your help

      • Reply Scarlett Lillian May 5, 2013 at 2:56 am

        I’ve been having the same issue as Louise below! Help! I’m afraid to “break” the site but I really want my featured images in my feedburner feed.

        • Reply DowntownRob May 6, 2013 at 3:47 pm

          Ah, I didn’t see Louise’s comment from Feb until now… so let me address it and Scarlett’s now. Editing the functions.php file can be touchy, and can definitely mess up a site if you’re not careful. I’d say first and foremost, add the code near the top, but definitely below the <? at the very very top. If you're not used to code editing, I'd hire someone to do it for you. If you'd like me to do it for you, feel free to send me an email… rob at fandommarketing.com 😉

  • Reply Announcing the WordPress Featured Images in RSS plugin | Web WizardsWeb Wizards August 14, 2013 at 12:39 pm

    […] to a theme by editing the theme’s functions file and manually adding the code (including one I wrote for Fandom Marketing), but 99% of the folks I talk to don’t understand how to do that. So, this plugin was born. […]

  • Reply 3 Surprising Wordpress Uses Beyond Blogging for Business | Web WizardsWeb Wizards October 26, 2013 at 8:25 pm

    […] Read the full post at: 3 Surprising WordPress Uses Beyond Blogging for Business […]

  • Reply alex February 22, 2014 at 1:11 am

    Hi,
    Hum I can Try…just need to wait 24h 🙂

    Thanks

  • Reply Named one of The 20 Best Blogs for Building your Brand Online | Online Branding Expert | Zing Your Brand March 20, 2014 at 7:49 pm

    […] posts: How to Optimize RSS to Display Featured Blog Images, How Sprout Social Helps Brands Spread The Love, 5 Content Management Plugins for […]

  • Reply Che Gadget March 30, 2014 at 2:47 am

    Tried it, it works! thank you very much!

  • Reply Mark DeJesus May 19, 2014 at 6:03 pm

    Just so you know, I put this in and my whole site crashed.

    • Reply DowntownRob May 19, 2014 at 6:24 pm

      Hi Mark… yes you have to be very careful with the placement of the custom code… or it can break the site – but this post is from 2012, and there’s now a plugin mentioned that does all this for you, so use it instead: http://brandswithfansblog.fandommarketing.com/wordpress-featured-images-in-rss-plugin/

      • Reply Mark DeJesus May 20, 2014 at 12:38 pm

        So kind of you to reply and show the correct link. I shouldn’t have messed with the code. The plug in works nice! I always love if I can find a feature in a plug in!

  • Reply The Germanz July 7, 2014 at 4:35 pm

    Worked for me. Thanks!

  • Reply Christopher Laird Simmons August 6, 2014 at 9:55 am

    Great work. Super helpful! Thanks.

  • Reply FineNaturalHairandFaith August 10, 2015 at 7:52 pm

    Plug in worked like a charm. Thank you!

  • Leave a Reply