Twenty ten rss feed icon is not enabled by default

Twenty ten wordpress 3.0.2 default theme is a really great theme, that everyone loves it.

I have created this post, because some days ago, one of my readers, Caroline, asked me how to put an rss icon to Twenty Ten based theme. (Thanks for the idea, Caroline!)

Though the method is almost similar as my previous post, which is add about me about author in wordpress sidebar, but if you want to add the twenty ten rss feed icon in the header, then you can follow this video tutorial.

Before we start to place twenty ten rss feed icon, you may be interested on my other twenty ten theme tutorials, here are some of them:

1. Add logo to twenty ten theme.
2. Change twenty ten background.
3. WordPress drop down menu in twenty ten.
4. Twenty ten use image as background
5. Display thumbnails or featured image in twenty ten
6. Change background color of twenty ten nav bar.
7. Move twenty ten menu above the header image.
8. Add categories in navigation bar.
Alot more, you can find in twenty ten tag. Today we will add twenty ten rss feed icon, and redirect this icon to your feed’s address.

I like twenty ten theme too, but there is something missing, you do not have a rss feed icon on the theme that is very common for your reader’s ability to more easily access your feed.

See my post, how you can redirect your rss feed with feedburner, so your readers can subscribe via email, including customizing your email subscription box.

Usually most of wordpress blog has this rss feed URL address: yourdomain.com/feed

We will add this url after we add twenty ten rss feed icon later on.

Preparation to add twenty ten rss feed icon.

Actually you do not have to follow all the steps in this twenty ten rss feed icon video tutorial, but i made video that way so you can understand how the dynamic php wordpress code works.

We will hide site description, which is by default says,. “just another wordpress site”, (my post about remove just another wordpress site). It means your site description is still there in the code or page source, but hidden, and replaced by an rss icon.

I am a beginner myself, and i recommend wordpress coding ebook to learn wordpress coding. Actually not to learn, but to understand a little bit. This will make easier for you to follow this twenty ten rss feed icon video tutorial or my other tutorials. (including any wordpress tutorials in web).

One thing that obviously has to be prepared before we add twenty ten rss feed icon, is the rss feed icon itself.

In the demo tutorial, i use rssicon.gif, which you can download from this download link (right click, and select save image as to download), or you can replace it with any image you have, just adjust the size and position accordingly, depending your image dimension, and those stuff.

End result of this tutorial screenshot:

Adding twenty ten rss feed icon video tutorial and steps:

After you have all in previous point, preparatio to add twenty ten rss feed icon above, you can follow the steps or the video:

Twenty ten rss feed icon Video:

• Is my site loading fast? I use this shared hosting
• Try my theme >

Twenty ten rss feed icon steps:

Before you make modification, you can backup original file, or you can copy twentyten theme.

1. Prepare your Rss icon, in this video i use 30×30 px gif file, called rssicon.gif. The name of the icon is very important, as you need to change it accordingly if your rss icon named differently.

2. Upload this icon to cPanel or via ftp (tutorial how to upload file via ftp), this should be uploaded in /wp-content/themes/twentyten/images.

3. After the image is uploaded, log in to your dashboard.

4. Appearance → Editor → header.php

5. Copy all the code, paste in notepad++, or your other html editor. In the line 66, you should see this code:
<div id="site-description"><?php bloginfo( 'description' ); ?></div>

6. Replace that code with these codes:

<div id="site-description">
<div style="display:none;"><?php bloginfo( 'description' ); ?></div><!--end of the code which hides site descrption for rss icon-->
<a rel="nofollow" title="<?php bloginfo('name');?> feed" href="<?php bloginfo ('rss2_url');?>">
<img style="border:none; float:right; position:relative; top:-8px; width:30px; height:30px;" src="<?php echo bloginfo('template_directory').'/images/rssicon.gif';?>"/>
</a>
</div>

Look at this image, so you would see where approximentally the line you should pay attention.

Some things you should replace if you use another rss icon.

the width, height, and the name.

7. Save the file, by clicking “update file” and refresh your blog, now, we have twenty ten rss feed icon in twenty ten theme.