wpvidZ

Learn WordPress With Video Tutorials

  • Blog
  • Browse
    • Backup & Restore
    • WordPress Localhost
    • WordPress Hosting
    • WordPress themes
    • Version Updates
    • Plugin Tips
    • Security
    • Tutorials
    • WordPress SEO
    • WP Miscellaneous
    • Sitemap
  • WP 5+ Tutorial
  • Search
wpvidZ Blog Tutorials WordPress twenty ten rss feed icon video tutorial

Tutorials

WordPress twenty ten rss feed icon video tutorial

Last updated on February 18, 2017
Posted on December 22, 2010

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:

  • 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.

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.

feed RSS twenty twentyten Wordpress

Latest Posts

  • Twenty Nineteen Theme Full Tutorial – Creating a Website
  • Uninstall W3 Total Cache Plugin – Incredibly Easy!
  • Create WordPress Website 2018 on SiteGround Genesis
  • WordPress Noopener Noreferrer Rel Attribute Quick Fix
  • WordPress CDN Setup with MaxCDN and W3 Total Cache Plugin
  • Twenty Seventeen One Page Parallax Scrolling Website Style
  • How To Add Google Map in WordPress Contact Page
  • WordPress 4.7 Justify Text and Underline
  • Twenty Seventeen Footer “Proudly Powered By WordPress” Text
  • How To Add YouTube Subscribe Button To WordPress Website
← Wp robot vs Autoblog Samurai [the difference]
→ WordPress internal server error [How to fix]

Comments

  1. Brian says

    January 1, 2011 at 10:15 am

    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.

    • Kimi says

      January 1, 2011 at 6:46 pm

      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. John Rickets says

    January 11, 2011 at 6:43 pm

    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. John says

    January 11, 2011 at 6:44 pm

    Just got here to find some cool animated rss logo for my website. Anyway, thanks for sharing your methods.

  4. zeaks says

    January 11, 2011 at 11:29 pm

    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

  5. Renee says

    April 8, 2011 at 9:42 pm

    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!

    • Kimi says

      April 14, 2011 at 7:27 pm

      Hi Renee,

      Actually there are many ways, yes, but the easiest would be in sidebar, with text widget.

      Reference: https://www.wpvidz.com/about-me-or-about-author-in-sidebar/

      I hope this helps

      Kind regards,

      Kimi.

  6. Lesley says

    June 1, 2011 at 11:19 pm

    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!

  7. RADScientist says

    July 1, 2011 at 3:07 pm

    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.

  8. RADScientist says

    July 1, 2011 at 3:09 pm

    sorry, it looks like the comments module on this site blanked out the php code. Hopefully, the moderator will be able to fix it.

  9. peter says

    December 29, 2012 at 4:26 pm

    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.

    • Kimi says

      January 4, 2013 at 4:17 pm

      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

Comment form on this post is closed after 60 days.

Search

Worth Reading

  • WordPress CDN setupWordPress CDN Setup with MaxCDN and W3 Total Cache Plugin
  • WordPress Google maps in contact pageHow To Add Google Map in WordPress Contact Page
  • The configuration of YouTube Subscribe button in Google Developers web pageHow To Add YouTube Subscribe Button To WordPress Website
  • Adding Social Media Links to WordPress Menu With CSS Classes
  • Unable to create directory wp-content/uploads in WordPress
  • Forward Twitter to Facebook Using App and Feedburner Tutorial
  • Kitchen Sink WordPress - Seem Simple But Important
  • Admin Pointers, Drag and Drop WordPress 3.3 Media Upload Features
  • How to sell ebook in a wordpress blog?
  • Check your site's performance using Google labs Page Speed

Backup & Restore

Backup WordPress Without a Plugin or FTP

Export WordPress Database using phpMyAdmin

BigDump Alternative – When BigDump Failed Importing Large WP Database

At This Place The Current Query Includes More Than 300 Dump Lines

View All..

Live Online Website

View All..

Offline Installation

How to Upload WordPress localhost to live server manually

Steps to Install WordPress on Windows 8 and WAMP 2.4

Install WordPress on Mavericks OS X 2014

Maximum upload file size in WAMP WordPress

View All..


WPvidz Hosting Image

  • About Me
  • Contact
  • Affiliate Disclosure
  • Privacy Policy
  • Term of Use

Copyright© 2023 wpvidz.com SG2021 | sitemap.xml


WPvidz.com is independent from WordPress.org but is proudly powered by WordPress & its block-based editor (Gutenberg)

WpvidZ.com uses cookies" to give you the best browsing experience possible. If you click "I Accept" below then you are consenting to this. For more information about your privacy settings on this website, please visit the Privacy Policy page. I Accept