creative grease: stains on the driveway of hot glue media

WordPress Basics: Adding an RSS Button

Did you know that there are pretty good odds that some of the people reading your blog actually want your blog to stalk them? To encourage them, put a big shiny RSS button on your sidebar*. It takes a little bit of technical knowhow, but if you’re not afraid of a few lines of HTML, here’s how:

Part 1: The Image
First, find yourself an RSS button image. There are plenty of options out there, like this one from the Open Clip Art Library. Be sure to use a properly licensed image (don’t use a random image off Google Images, for example). OCAL images are in the public domain and therefore free for personal and commercial use.

You’re also welcome to use our grease splatter RSS icon (and its matching email icon) if you’d like. Both are licensed under under a Creative Commons Attribution 3.0-US license (they’re free for personal and commercial use. there’s no need to link back or otherwise credit, unless you’re redistributing them in their original form, in which case a link to this post is required.)

Resize your image using your favorite image editing software – something around 100px square is a good size, depending on the size of your sidebar.

Upload your image to your server, either through FTP (if you’re handy with that sort of thing) or through the WordPress Media Library (Media -> Add New).

Make note of the image URL. If you used the Media Library, the URL will most likely look something like
http://yoursitename.com/wp-content/uploads/2010/03/yourfilename.jpg
Copy this into a blank document or write it down – you’ll need it in a minute.

part 2: the feed
Next, you need a feed to link to. If you want to track subscriptions, view statistics, and offer an email subscription option, I’d recommend using FeedBurner. It’s simple to get set up – go to feedburner.google.com, sign in with your Google account, and enter your blog address in the “Burn a feed” box. Follow the on-screen steps, and you’ll soon have a Feedburner feed link. Make note of this along with your image URL from the previous section.

If you don’t care much about feed stats, you can use the built-in WordPress feed. Generally speaking, your feed address will be http://yoursite.com/feed, but you can find out for certain by entering your blog address into the Feed Validator. Don’t worry too much about what it spits out, but watch the white box near the top of the screen, which will output your feed address. Make note of this along with your image URL from the previous section.

Part 3: Putting it All Together
So you have an image and a link – now it’s time to put them into your sidebar with a bit of HTML.

Log in to your WordPress admin console, and navigate to Appearance -> Widgets. Find the Text Widget in your bank of available widgets, and drag it over to the sidebar. Open the text widget and paste the following code into the text area:
View Code

Replace the variables in the code thusly:
A1 should be the URL of your feed
A2 should be the height, in pixels, of your image
A3 should be the URL of your image
A4 should be the width, in pixels, of your image

When it’s all put together, it will look something like this:
View Code

Give your widget a title, like “Subscribe” or “RSS”, and save it. Now go admire your work!

Don’t forget, we can be hired to make WordPress work for you, and we can be hired to teach you to do it yourself. Training available for individuals, businesses, animals, vegetables, minerals, affinity groups, weddings, birthdays, bar mitzvahs, and karaoke clubs.

*This is specifically written for self-hosted WordPress.org blogs with a widgetized theme, not WordPress.com hosted blogs. If you have a hosted blog, you’re welcome to give this a go, but YMMV.

dani made this mess on March 17th, 2010 | discuss