WordPress twenty ten rss feed icon video tutorial

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:

twenty ten rss feed icon
end of the twenty ten rss feed icon tutorial

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:

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.

twenty ten rss feed icon
twenty ten rss feed icon — line 66

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.

Share the knowledge
Share on Google+0Tweet about this on TwitterShare on Facebook0Pin on Pinterest0Share on Reddit0Email this to someonePrint this page

Comments

  1. Brian says

    Sorry to bother you, but you seem pretty knowledgeable about the subject. Can you tell me where in the header.php file I should add the code you’ve laid out so that the little rss feed icon would appear on the far right side of the black navigation menu bar of my blog? I’m still relatively new to php and I’m kinda stumped here! Thanks in advance for any assistance you can provide.

    • says

      Hello there Brian,

      I am also still learning, not yet knowledgeable..

      Hmm, did you watch the video tutorial? if you follow exactly the step you should see the exact tutorial result which is basically hiding the site description and replacing it with a RSS icon..

      That’s the easiest stuff for me.

      Kimi.

  2. says

    Hi there… I was just looking for an animated version of RSS icon when I got here on your site. Your site seems to be pretty busy huh.. Anyway, if you could help me to find one, please let me know. Thanks/

  3. says

    Thanks for the tutorial. I thought I’d mention that cause I’m using a twenty ten child theme I used instead of template_directory

  4. says

    Wow this site is awesome and i love the tutorials. I just started my blog 3 weeks ago and am so non-techy, but your site (and YOU!) are so helpful! Question: how do I add the RSS icon to someplace OTHER than the site description area. I like my site description :) Can I add a text widget on the right side somewhere? Or next to “Contact Me” or something? i’m open to suggestions. Thank you, i’m learning a lot of good stuff from you!

  5. says

    Thank you for this! I have had SO much trouble deciding on a theme, so I just decided to stick it out with TwentyTen. Your tips are going to make it much more tolerable!

  6. says

    Brian,

    You can add an RSS icon to the right side of the black navigation menu in the Twentyten theme using the following steps:

    1. In the WordPress dashboard, go to Appearance/Editor and select the header.php file

    2. Scroll to the bottom and look for the line that reads, “”

    3. Move this line down 3-4 lines to make space to add some additional code.

    4. Paste the following block of code into the space above the line you moved,
    <a href="”>
    <img style="border:none; float:right; position:relative; top:4px; right:-4px;" src="”/>

    5. You now need to upload an rss icon that is sized properly with a black background to the twentyten/images/ directory. I found a really nice one that looks good on the twentyten menu. You can see how it looks here: drywelljournal.com.

    6. In the code above, you’ll see where I have the rss icon name. You will need to change the name to the correct name for your icon. (if you download the icon from my website above, you can leave the name the same and just save it to your machine from my website and then upload it to your WordPress twentyten/images/ folder.

    I hope that’s helpful.

  7. peter says

    I tried to do exactly you you said on this page but the icon wont just show up i don’t know whether the system i used to upload the picture is what was wrong because i just upload using legacy file manager in cpanel and that is all, then paste the code given. if you check my sitehttp://www.hatsglobally.com you will see the adjustment in the header but the icon didn’t show up.

    • says

      Hi Peter,

      I have checked your site, and the icon is there.

      Sorry for late reply.

      Happy new year for you and you loved ones

      Kimi