One of the many awesome things about WordPress is its ability to support widgetized sections. The lingo in the WP admin terms these “sidebars” but they can be used in any number of other layout orientations; basically, anywhere you would like an easy-to-administer set of widgets.

However, if you’re like me and aren’t primarily (or even secondarily) a developer, adding something like a widget-capable section to your WordPress theme is a bit daunting, especially since the documentation from WordPress is a bit sketchy.  Fear not! Listed below are some simple steps and code snippets to allow you to add multiple widget-compatible sections to a WordPress theme:

Step 1: Register Your Sidebar(s)

The first thing you need to do is create a “registration” for each widget-capable section you wish to include in your theme.  To do this, add the following bits of code to your functions.php file in your theme directory:

1. <?php
2. /* Register sidebar attributes */
3. if (function_exists('register_sidebar')) {
4. register_sidebar(
5. array(
6. 'name' => 'Primary Sidebar',
7. 'before_widget' => '<li id="%1$s" class="widget %2$s">',
8. 'after_widget' => '</li>',
9. 'before_title' => '<h2 class="widgettitle">',
10. 'after_title' => '</h2>',
11. )
12. );
13. }
14. ?>

Or, if you want multiple sections:

1. <?php
2. /* Register sidebar attributes */
3. if (function_exists('register_sidebar')) {
4. register_sidebar(
5. array(
6. 'name' => 'Primary Sidebar',
7. 'before_widget' => '<li id="%1$s" class="widget %2$s">',
8. 'after_widget' => '</li>',
9. 'before_title' => '<h2 class="widgettitle">',
10. 'after_title' => '</h2>',
11. )
12. );
13. register_sidebar(
14. array(
15. 'name' => 'Secondary Sidebar',
16. 'before_widget' => '<div id="%1$s" class="module %2$s">',
17. 'after_widget' => '</div>',
18. 'before_title' => '<h2 class="title">',
19. 'after_title' => '</h2>'
20. )
21. );
22. register_sidebar(
23. array(
24. 'name' => 'Tertiary Sidebar',
25. 'before_widget' => '<div id="%1$s" class="module %2$s">',
26. 'after_widget' => '</div>',
27. 'before_title' => '<h2 class="title">',
28. 'after_title' => '</h2>'
29. )
30. );
31. }
32. ?>

In short, this creates a new sidebar listing in your Widgets section of the WordPress admin for each register_sidebar function you call, allowing you to assign widgets to the selected area.  The data in the array following each register_sidebar call assigns a name to the widget-capable section, sets what (if any) HTML is written before and after the widget data is printed out, and set what (if any) HTML is printed before and after the title of the widget, respectively.  The name value is particularly important and must be unique for each registered section, as this is what we will use to tell WordPress where in the theme the specific widget-capable section is supposed to display.

Step 2: Output Your Sidebar(s)

After registration in functions.php, it’s a simple matter of including a bit of code in any file in your theme that you wish to display one, or more, of your new widget-capable sections. The code required for this is very simple:

1. <?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('Name You Gave Your Sidebar Goes Here') ) { ?>
2. <?php } ?>

Just replace the “Name You Gave Your Sidebar Goes Here” bit with the name you assigned the particular section in the register_sidebar function in functions.php. For instance, on this site, I’ve widgetized the footer area, and added code in it like this:

1. <div id="col1" class="column">
2. <div id="pandora">
3. <div id="pandora_top">
4. <div id="pandora_top2"></div>
5. <ul id="pandora_body">
6. <?php pandorafeeds_display_bookmarked_songs(5, true);?>
7. </ul>
8. <div id="pandora_btm"></div>
9. </div>
10. </div>
11. </div>
12. <div id="col2" class="column">
13. <?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('Tertiary Sidebar') ) { ?>
14. <?php } ?>
15. </div>
16. <div id="col3" class="column">
17. <?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('Quadrary Sidebar') ) { ?>
18. <?php } ?>
19. </div>

The first column contains my custom Pandora feed output, but the orange highlighted snippets in col2 and col3 tell the theme that any widgets that are assigned to the Tertiary or Quadrary Sidebars are to be placed between the brackets in the IF statements listed there.

Step 3: Add Some Widgets!

The last, and easiest part of it all.  Head to the Widgets section of your WordPress admin, and you’ll find that your new widget-capable sections have been added to the list you can select from:

Simply select your section, hit “Show”, and add widgets until your heart is content.

I encourage anyone adding extra sections to experiment with their placement.  They can be useful in any number of locations around your page, and possibly even on specific pages or post templates as well.  Plus you’ll be the envy of the WP theme development crowd :)

Update:  I found a post very similar to this one that might be of further help.  View it here.

I’ve discovered as of late that there are a lot of practices that haven’t been adopted by the web community that have been around for quite some time (meaning a year or two in web terms).  This is particularly surprising to me in some cases simply because of the sheer usefulness of the practice(s) in question.  A lot of this is simply because of ignorance, and I use that term as it was intended, not with any negative connotation.  So, to help correct that, I thought I’d churn out a quick post on one of the biggest time-savers: the reset stylesheet.

If you’re unfamiliar with what a reset stylesheet is, the concept is very simple.  So simple, in fact, that once you understand it you’ll wonder why we haven’t been using the idea all along.  But to understand why a reset stylesheet is so great, there’s a bit of a back story.

A Brief History of Web Browsers and Why They Suck

The web has been, unbeknownst to most people, a fairly brutal battleground since its inception.  The W3C has been the determining body for what standards browsers and other content devices should adhere to, and they have been soundly ignored from the beginning.  Things really came to a head in the battles between Microsoft and Netscape, with each racing to develop their own proprietary methods that would make developers want to create sites for their browser specifically.

Eventually things calmed down, mostly because of accessibility concerns.  However, the fallout from the earlier battles is apparent in that most browsers still have differing methods of rendering data on the screen.  Things like forms having extra spacing inside them, input fields having their own font families different from the surround elements, lists with varying levels of padding, etc.  This is a huge headache for design and development, to say the least.

Ok, so what is it?

A reset stylesheet is a specialized CSS file, or a collection of CSS definitions, that override all default styling provided by a browser for HTML tags with a visual output.  The practical result of such a sheet is that it removes the ambiguity in display, telling all browsers that this has these types of margins and that has this type of padding.

Exactly what a particular reset stylesheet does is, obviously, based on its contents.  Different stylesheets have been developed with varying degrees of specificity as to what styling they apply.  The stlyesheet that I’ve found to work best for most situations has been one developed by CSS guru, Eric Meyer.  I’ve made a few modifications to his stylesheet and added a few other items:

Download the stylesheet listed below here: Reset Stylesheet (save as…)

1. html, body, div, span, applet, object, iframe,
2. blockquote, pre,
3. a, abbr, acronym, address, big, cite, code,
4. del, dfn, em, font, img, ins, kbd, q, s, samp,
5. small, strike, strong, sub, sup, tt, var,
6. dl, dt, dd, ol, ul, li,
7. fieldset, form, label, legend,
8. table, caption, tbody, tfoot, thead, tr, th, td {
9. margin: 0;
10. padding: 0;
11. border: 0;
12. outline: 0;
13. font-weight: inherit;
14. font-style: inherit;
15. font-size: 100%;
16. font-family: inherit;
17. vertical-align: baseline;
18. }
19. /* remember to define focus styles! */
20. :focus {
21. outline: 0;
22. }
23. body {
24. line-height: 1;
25. color: black;
26. background: white;
27. /* opacity: .99; text-rendering bug in Fx2/Mac --- doesn't validate */
28. }
29. h1, h2, h3, h4, h5, h6 {
30. margin: 10px 10px 10px 5px;
31. padding: 0;
32. }
33. p {
34. margin: 5px;
35. padding: 0;
36. }
37. ol, ul {
38. list-style: none;
39. }
40. /* tables still need 'cellspacing="0"' in the markup */
41. table {
42. border-collapse: separate;
43. border-spacing: 0;
44. }
45. caption, th, td {
46. text-align: left;
47. font-weight: normal;
48. }
49. blockquote:before, blockquote:after,
50. q:before, q:after {
51. content: "";
52. }
53. blockquote, q {
54. quotes: "" "";
55. }
56. /* CLEAFIX */
57. .clearfix:after {
58. content: ".";
59. display: block;
60. height: 0;
61. clear: both;
62. visibility: hidden;
63. }
64. .clearfix {display: inline-block;}
65. /* Hides from IE-mac \*/
66. * html .clearfix {height: 1%;}
67. .clearfix {display: block;}
68. /* End hide from IE-mac */
69. .clearer {
70. clear: both;
71. }

It’s a bit lengthy, but still a very small overall file as far as size is concerned.  It can obviously be condensed and is presented in its current format for readability.  The notable changes that I’ve made to Eric’s base stylesheet have been the addition of the “clearfix” methodology (as described at Webtoolkit) to the bottom, as well as a utility clearing class that I found myself using in nearly every site.

Briefly, what the above code does:

• The <html> <body> <div> <span> <form> <ul> <ol> and other tags are all specifically told to have no margins, no padding, no borders, no outlines, and to inherit their font settings from their parent elements.
• The <body> is given a default color attribute of black and a default background color of white, so you don’t have to set these every time you make a new site.
• Headings and paragraphs are given a specified set of margins and zero padding.
• List items are set to show no bullet or other notation by default (especially useful since most lists tend to end up as navigation or with custom styling).
• For browsers with better support of CSS2 & 3 standards, other things like defining a default focus state for form elements are added as well.
• The clearfix code snippets allow the application of a clearfix class to any element, resulting in that element clearing itself after all floated elements inside it (extremely useful).
• The utility clearer class can be applied to any element, causing it to clear any floats above it.

And that’s basically it.  Here are some important tips and directions:

• Include your reset stylesheet above all other stylesheets.  People tend to forget that HTML is read in a procedural manner, and if your reset stylesheet is placed below all other stylesheets, it’s styling will take precendence over the other CSS definitions. “Thou shalt not have other stylesheets before me.”
• To make your life less of a hassle, always include your reset stylesheet from the very start of your design/development.  Trying to add a reset stylesheet after the fact can sometimes be more of a headache than starting from scratch.
• Recycle!  Save your reset stylesheet code as a snippet or simply as a file located somewhere that you can easily copy and paste into any new projects you begin to work on.

Thanks to all those people who have developed this idea long before I got hold of it, because it has saved me a ton of time and headache.  Enjoy!

Image credit: sumeja

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.

Maintaining your own site can be a real chore.  That’s one of the many reasons why I like WordPress so much: it makes updating and adding new content easy.

But what about non-content updates?  I’m talking about tweaking something that doesn’t look exactly the way you’d like it to visually.  A lot of people seem to shy away from this because it seems very daunting.  That’s yet another reason why I love the general setup of WordPress: changing the visual composition is just as easy as changing the content.

Note: from this point on I’m going to assume the reader’s at least beginner knowledge of Photoshop, CSS, and HTML.

The Goal

As you can tell from the header picture above, the search section in the sidebar of this site was pretty lacking for awhile.  It worked fine, but looked like crap (which in my book is just as important as making sure it works).  So, I set out to give it facelift.

But where to begin?  Probably the most daunting part of making a visual change to any part of a site is the fact that it involves being *GASP* creative.  It’s really not that hard; give yourself some credit: you’re more creative than you think.  In my case, I’ve decided to go with this whole mixed-media jump-off-the-page approach because I feel it is more engaging to the viewer and keeps me from being entirely bored after staring at it for hours trying to get something to work right in IE6.  So, I decided I need to do something that goes along with that.  Enter the torn paper look.

Texturize Me!

Awhile back I found this great post on Smashing Magazine.  I think I downloaded almost every brush they had listed, but in particular I was intrigued by the torn paper brushes.  I selected one that looked like a scrap of paper, and smacked it over my original layout file in Photoshop.

I added a little bit of emboss to make it pop, and called it good.  Nothing super fancy, but enough to make it interesting.

Now, the bigger issue is scalability.  Since whatever I end up putting in this search area could potentially increase with the browser’s text size, I need to make sure that it grows.  So, what is now a single image will become two, and the bottom portion will have a transparent background so it can move down the page and still have the page background show through.  Let’s look at the code:

1. <form method="get" id="searchform" action="<?php bloginfo('url'); ?>/">
2. <div>
3. <label class="nodisplay" for="s"><?php _e('search for:'); ?></label>
4. <input type="text" value="<?php the_search_query(); ?>" name="s" id="s" />
5. <div class="right">
6. <input type="image" src="<?php bloginfo('template_directory'); ?>/images/btn_search.gif" id="searchsubmit" value="search" />
7. </div>
8. </div>
9. <div class="btm"></div>
10. </form>

Now, I made my theme from the Default Theme that’s included with WordPress, so the above code is located in the searchform.php template page.  All themes are different, so yours may be somewhere else entirely.  The idea here is that the background portion that is more solid will be its own image that will tile, while the bottom part with the ragged edge will be a single, non-tiling image.  To accommodate this, all of the actual content of the search form (the <label> <input type="text"> and the <input type="image">) is contained within its own <div> that will have the tiling background.  A separate <div> (the one with the class="btm") is placed just below that, which will be styled to show just the ragged edge.

Next up, saving the images and writing the CSS.

Enter Photoshop

Photoshop is great.  Saving the first background image (the one that will tile) is easy.  The image is cropped to only have the solid portion, click the Save For Web option in the menu, and you’re done.

The ragged portion at the bottom is a little trickier.  We want the ragged edge to be able to move down the page as this search widget area lengthens.  If we simply cropped the image with the page background behind it, then when it moved it would eventually show the crop line.  Nope, instead we’re going to erase around the ragged edge of the image to make it transparent, and then save it as a GIF.  Don’t worry about being too exact; a surprisingly large amount of visual effects on the web rely on your eye automatically blending like-colored and blurred areas together on screen and other visual tricks:

The CSS

Now that the images have been cropped, edited, saved, and uploaded correctly, we’ll write in some simple CSS to make everything come together.  The following is entered into the stlyesheet I have connected to my site that defines the visual composition:

1. /* Search Form */
2. #searchform div {
3. background: url(../images/bkgrd_search.jpg) repeat-y;
4. padding: 0 12px 0 7px;
5. }
6. #searchform div.right {
7. background: none;
8. padding: 0;
9. }
10. #searchform div.btm {
11. background: url(../images/bkgrd_search_btm.gif) no-repeat;
12. height: 18px;
13. }
14. #searchform input#s {
15. border: solid 1px #A5ACB2;
16. margin: 12px 0 6px 0;
17. width: 100%;
18. }

I quick run-through on what the code is doing here.

• #searchform div assigns the background to the <div> containing all the form elements, tiling by default.  Since this is assigned to all <div> tags within the <form>, we need:
• #searchform div.right.  This excludes the <div> that aligns the search button to the right from tiling the background image again.
• #searchform div.btm edits the “empty” <div class="btm">.  It tells it to have the ragged edge as a background, to not tile, and to be the exact height of the image.  This is important, because otherwise the <div> would collapse since it contains nothing inside it.
• #searchform input#s just contains some simple styling for the search box.

That’s it; we’re done!

Going Further

Next time up: the RSS portion.  It’s a bit more complicated, but luckily it involes jQuery, which makes it extremely easy.  Until then…