I wanted to add RSS subscription icons to the Twenty Eleven theme I’m playing with at present (using a child theme of course!). These are the steps I went through.

HTML Changes

1. If you haven’t already made changes to the header.php file in your theme copy the original header.php file from the Twenty Eleven theme folder to your child theme folder.
2. Within the header.php folder you need to add new HTML to create the structure that will hold your RSS subscription information. I chose to add 3 new div tags after the end header tag of the standard file as follows:

	</header><!-- #branding --> *** This is the end of the <header> tag in the original file, use it as a marker ***

        <!-- Start RSS Feed holding div- this added by me-->
               <div id="rssfeed">
                   <div id="postsrss">
                      <a href="http://feeds.feedburner.com/yourfeed"><p>RSS Posts:<img src="/wp-content/themes/child2011/images/posts-rss.png" width="24" height="24"></p></a>
                   </div>
                   <div id="commentsrss">
                      <a href="http://feeds.feedburner.com/yourfeed"><p>RSS Comments:<img src="/wp-content/themes/child2011/images/commentsrss.png" width="24" height="24"> </p></a>
                   </div>
               </div>
         <!-- End RSS Feed holding div-->    

<div id="main"> *** This is from the original file, use it as a marker ***

4. In this code the “postrss” div will contain the subscription icon for the posts and the “commentsrss” div will contain the subscription icon for the comments. I enclosed both of these divs in a container div called “rssfeed” (for styling, layout control etc.
5. In the links above I’ve used feedburner addresses, if you don’t use feedburner just substitute your own addresses.
6. This structure could be expanded to include an email subscription with a form in it etc.

CSS Changes

1. Now we have to add CSS rules to the style.css file in the child theme folder to style the 3 divs added above “rssfeed”, “postrss” and “commentsrss”
2. I wanted the subscription icons to be at the right hand side of my page just under the navigation menu so I floated the containing div (“rssfeed”) left and floated the two remaining divs “postrss” and “commentsrss” right.
3. I had to add suitable padding, margins and styling on the tags to achieve the results I wanted and you will have to do the same. Hopefully you can adapt the CSS I used to meet your particular needs. Here’s my CSS:

/*Style RSS feed div*/
#rssfeed {
	float:left;
	width:100%;
	margin:0;
	padding:0;
}
#postsrss {
	float:right;
	padding:0 10px 0 10px;
}
#postsrss p img {
	margin-left:10px !important;
}
#postsrss p {
	margin:0 !important;
	padding:0 !important;
	color:#FB9E3A;
}
#postrss a, #postrss a:focus, #postrss a:active, #postrss a:hover {
	color:#FB9E3A !important;
}
#commentsrss {
	float:right;
	padding:0 10px 0 10px;
	border-right:1px solid #666;
}
#commentsrss p img {
	margin-left:10px !important;
}
#commentsrss p {
	margin:0 !important;
	padding:0 !important;
	color:#0562C5;
}

4. The !important declarations at the end of some of the lines is to ensure that these rules take priority in the cascade (the “C” in CSS).
5. That’s pretty much it. Hopefully it makes sense. It’s still not quite there – for example I want to remove the underline on the RSS links when I hover over them, currently the underline still appears.
6. you can see the results of this on this site at the top.

Hopefully this will be of some use to you if, like me, you want to explicitly add RSS subscription icons to the Twenty eleven theme somewhere of your choosing and not be limited to a widget for the sidebar or footer. get in touch if you have any questions or suggestions on how I can improve this – I’m no expert with either HTML, PHP or CSS and I’m certain some of what I’ve done can be improved especially in the CSS