In All Reality - I can’t be a rockstar…so I do this instead.

In my previous post, I decided I would share my rough methodology on how I went about sprucing up my search widget in WordPress. If you’re just tuning in, here’s a quick update on what I described in The Making of a Not-So-Boring Search/RSS Widget:

• We downloaded some cool Photoshop brushes featured in Smashing Magazine, and used one of those to give a torn paper background to the search widget
• We took that background and prepped it for use from Photoshop, making minor modifications to include background transparency.
• We then modified the HTML for the search widget to accommodate the background styling.
• Finally, we added some simple CSS to pull in the background images.

Awesome. But what about the nasty, plain text links below the search area for the post and comment RSS feeds? Icky. Bland. Boring.

A Different Approach

Why do these links need to take up so much space? There’s no reason that we can’t compact them down into a single RSS button placed somewhere on the page, but I want to give my readers the ability to subscribe to both the posts and the comments…so we’re at a bit of a dilemma. But wait! Why can’t we roll these into a hidden section of the page that is easily accessible? A lot of sites do have that single button RSS link; this one will just have a special surprise.

Basically, the idea is to do this:

Making The Wrapping

Creating the images is just as easy if not easier than the images for the search background. I used the Rounded Rectangle Tool in Photoshop and then simple used the Pen Tool and the Direct Selection Tool to add some extra points for the tab curve and tweak the curve outward, respectively.

Once I have the shape the way I want it, I add a gradient across the surface in RSS-ish colors.  I add some text and a little RSS icon, and the tab is done. Then, all I need to do is turn off the background, crop it to just the tab portion (including the curve on the far left), and Save For Web.

That takes care of the tab, but we still need to save the background for when the tab is extended upward. That’s as easy as saving a 1px high strip from the extended background like so:

Note: the icons I’m using for the RSS links are adaptations from the Silk set found at FamFamFam. I’ve modified these separately and uploaded them.

Preparing The Box

Now that we’ve cropped out the images we need and uploaded them, it’s time to look at some code. As with the search box, it’s pretty basic. The following is placed in the sidebar.php file for my WordPress theme, right above the code for the search section:

1. <div id="rss">
2. <a class="tab">RSS</a>
3. <div id="rss_feeds" class="clearfix">
4. <a id="rss_comments" href="<?php bloginfo('comments_rss2_url'); ?>" title="Comments Feed">Comments</a>
5. <a id="rss_posts" href="<?php bloginfo('rss2_url'); ?>" title="RSS Feed">Posts</a>
6. </div>
7. </div>

Nothing scary there. Just some organizational <div> tags and some WordPress function calls to specific RSS link locations (which can be found in their Codex). I’m using the <a class="tab">RSS</a> tag to serve as the point of interaction where the reader will click to expand/contract the RSS section. And now for the CSS wrapping paper:

1. /* RSS Feeds */
2. #rss {
3. background: url(../images/bkgrd_rss_top.png) no-repeat;
4. margin: 10px 0 0 0;
5. }
6. #rss a {
7. display: block;
8. padding: 0;
9. }
10. #rss .tab {
11. height: 20px;
12. margin: 0 0 0 119px;
13. width: 68px;
14. }
15. #rss #rss_feeds {
16. background: url(../images/bkgrd_rss.png) repeat-y;
17. display: none;
18. padding: 3px 10px 3px 6px;
19. }
20. #rss_feeds a {
21. float: right;
22. padding: 2px 20px 2px 0;
23. }
24. #rss_feeds #rss_posts {
25. background: url(../images/ico_rss_post.png) no-repeat center right;
26. }
27. #rss_feeds #rss_comments {
28. background: url(../images/ico_rss_comment.png) no-repeat center right;
29. margin: 0 0 0 14px;
30. }

Nothing too fancy, but a brief explanation will help:

• #rss produces the background image of the tab, telling it not to repeat. This will sit behind the <a class="tab">RSS</a>.
• #rss a forces all <a> tags to display in block format, which allows margin and padding properties to be applied to them.
• #rss .tab sets the <a class="tab">RSS</a> to have a height matching the height of the tab background. It also sets a margin and width, making it act as a box over the tab on the right side, instead of a block clickable area across the top of the entire RSS section.
• #rss #rss_feeds sets the 1px background to tile and fill in the space occupied by the RSS links. We set it to hide by default with the display:none property.
• #rss_feeds a floats the RSS links, allowing them to still have block properties applied to them while displaying inline next to each other.
• #rss_feeds #rss_posts and #rss_feeds #rss_comments set the background icon images for the post and comments feed links, respectively.

All that give us the finished visual product. But how do we make it expand and collapse all nifty-like?

Enter jQuery

JQuery is a fantastic javascript library that makes visual effects extremely easy to achieve. It also does a lot more, like AJAX, but we’re just using the visual portion for this. Here’s what you need:

• jquery framework file
• jquery UI core file

You can customize the UI core file if you want to keep the filesize low. All we’ll be working with is the Blind effect, so you can build your own UI JS file to include just that. All I need do is link these files in the head section of my WordPress theme by writing:

1. <script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/jquery-1.2.6.js"></script>
2. <script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/jquery-ui-1.5.2.js"></script>

Now, I’ve made a separate JS file called functions.js where I store all my global javascript functions that are used throughout the site. I’ve linked this in the theme and I’ll take the following code and place it in there:

1. $(document).ready(function() {
2. //Function to hide/show RSS feeds tab and disable button unless JS is active
3. $('#rss_feeds').hide();
4. $('a.tab').click(function(){
5. $('#rss_feeds').toggle("blind", { direction: "vertical" }, 250);
6. });
7. });

In English this means that once the document is ready ($(document).ready(function()), make sure that the <div id="rss_feeds"> is hidden. Once that’s done, setup a function so that when the <a class="tab"> is clicked, jQuery will toggle the <div id="rss_feeds"> using the Blind visual effect of the jQuery UI.

That’s really it. It’s not very complicated at all, and it adds a nice little visual effect. The best part is, should javascript be disabled, the RSS tab will default to being open so that the reader doesn’t miss out on the easy access to the RSS links.

In the future, I’ll look for more little things that can be done to tidy up a site and add an extra little personality to it. Except to read about them here when I do.