This post is inspired by a post in the WordPress support themes forum, the question was about there being no RSS icon on the twenty ten theme.

There are two RSS feeds you can offer from your website, posts and comments, so this tutorial will deal with both, another consideration was to open the link in a new tab.

As always the modified theme is downloadable here: [download id="42"]

Icons

First task was to find a suitable icon, we went to our favorite free icons website and downloaded a couple from the Glossy Black Set, one came fron the social media set the other from the people set.

Here is a screenshot of the icons in place on the theme:

Stylesheet

 All we have done is adjusted the width of the blog-title class by 90px to allow for our RSS bar, then we floated the blog-description left, and added two styles for the placeholders for the images. 

/* Add RSS Icons to Twenty Ten Theme */
#site-title {
 width: 610px;
}

#site-description {
 position: relative;
 float: left;
}

/* Start Rss Link bar */
#rss-links {
 position:relative;
 float:right;
 margin: 0;
 width: 90px;
 height:32px;
}
#rss-icon {
 float:right;
 height:32px;
 margin: 0 5px;
}
/* End Add RSS Icons to Twenty Ten Theme */

RSS-1.php

Next we added a new file which will be our template part with our icon images and links, we added an inline style ‘border: none’ to the images, as the images are inside the banner class the images would have had black borders.

Notice the two feed URL’s returned with ‘bloginfo(‘rss2_url’)’ and ‘bloginfo(‘comments_rss2_url’) ‘, since ‘WordPress 3′ we now use ‘get_template_directory_uri()’ for the images path, if you added the images to a child theme you would use ‘get_stylesheet_directory_uri()’.

<div id="rss-links">
 <div id="rss-icon">
  <a href="<?php bloginfo('rss2_url'); ?>" target="_blank">
   <img src="<?php echo get_template_directory_uri(); ?>/images/rss.png" style="border: none; width:32px; height:32px;" alt="RSS" />
  </a>
 </div>
 <div id="rss-icon">
  <a href="<?php bloginfo('comments_rss2_url'); ?>" target="_blank">
   <img src="<?php echo get_template_directory_uri(); ?>/images/rss-comments.png" style="border: none; width:32px; height:32px;" alt="Comments RSS" />
  </a>
 </div>
</div>

Header.php

Last part is to add the template part to the header.php, we will add this after the description class, so we find the line:

<div id="site-description"><?php bloginfo( 'description' ); ?></div>

Add add two lines of code to return the template part, template parts are ideal for adding blocks of code to a theme making them easy to insatll in anoter theme, once the template part is created it is a single call to import it.

<div id="site-description"><?php bloginfo( 'description' ); ?></div>

    <?php /* Add RSS Feed Icon */ ?>
    <?php get_template_part( 'rss',1 ); ?>

Thats it we now have an RSS feed icon to match our twenty ten theme.