I am a: Quirky sysadmin. Geek. Gamer. Comic fangirl. My little space, my home on the interwebs. I blog about personal stuffs, work, various coding projects, and anything else I feel like.

There’s been a bit of confusion on the “how to” when joining the WordPress WebRing and how to use and/or setup the code. I often forget that not everyone knows that you DON’T actually have to use the SSNB code and can opt to have a minimalistic HTML version (like I use).

So here’s how:

You go to the WordPress WebRing site. Click Join This Ring. If you have a WebRing account already, you just fill in your site details (login if you’re not logged in already!). If you do not have a WebRing account, you fill out the account information form towards the bottom of the page.

Once you successfully fill out and submit your application, you’ll see Confirmation – Ring Application Sent followed by a bit of HTML code (actually it’s JavaScript, but that’s immaterial here). That is your SSNB code. If you belong to a WebRing and already have that code on your website, then your WordPress WebRing code is already there. WebRing introduced SSNB a few years back as a quicker way to add yourself to many WebRings without having to keep editing your webpage code. While handy, the downside to this is that you cannot edit the ring code displayed.

Also: WordPress.com users will not be able to use the SSNB code due to its Javascript content. WordPress.com does not allow the posting of scripts in sidebar modules or posts for security reasons — I was not aware of this until only recently, so all the more reason to post this tutorial!

Back to the subject at hand: the ability to use editable HTML code for your site is still supported by WebRing.

YAY! :)

Simply visit the WordPress WebRing site again — under Member Tools click on Edit Site Information, then click Get Navigation Code. Now you’ll see another box with the SSNB code. Scroll all the way down to the very bottom and look for Members who wish to use the HTML version of this nav bar should go here. When you click on that, you’ll be given code that you can edit to your liking.

(Take notice of your WordPress WebRing ID code. You’ll see “id=”.)

The following is what I use as a guide:

<p align="center">Wordpress Bloggers<br /><a href="http://S.webring.com/go?ring=wordpressblogger&amp;id=YOUR_ID_HERE&amp;sprev" title="Skip Previous">&lt;&lt;</a> &nbsp; <a href="http://S.webring.com/go?ring=wordpressblogger&amp;id=YOUR_ID_HERE&amp;prev" title="Previous">&lt;</a> &nbsp; | &nbsp; <a href="http://S.webring.com/go?ring=wordpressblogger&amp;id=YOUR_ID_HERE&amp;next" title="Next">&gt;</a> &nbsp; <a href="http://S.webring.com/go?ring=wordpressblogger&amp;id=YOUR_ID_HERE&amp;skip" title="Skip Next">&gt;&gt;</a><br /><a href="http://S.webring.com/hub?ring=wordpressblogger&amp;id=YOUR_ID_HERE&amp;hub" title="List All">List All</a> | <a href="http://S.webring.com/go?ring=wordpressblogger&amp;id=YOUR_ID_HERE&amp;random" title="Random Site">Random Site</a><br /><a href="http://S.webring.com/wrman?ring=wordpressblogger&amp;addsite" title="Join WordPress Bloggers">Want to Join?</a></p>

Remember:

Change each instance of YOUR_ID_HERE to the id number listed in your WebRing code.

If you edit your code, remember to use the HTML equiv’s of ampersands so your code will validate! :)

(I always forget that part!)

If you get stuck, need help, or have any questions please feel free to ask here!

The principles of this tutorial can easily be applied to any other WebRing. Just remember to change “WordPress Bloggers” to the name of the ring being added, and be certain to change the ID number and ring values (the “ring=” part).