Category: SDAC Blog

I recently started looking into WordPress Widgets which allow people to customize their WordPress web site or blog without knowing any HTML. Widgets allow WordPress users to simply “drag and drop” features in their sidebars. Sound interesting?
A basic overview on how to get widgets working on your site:

1. Download the Widgets plugin for WordPress
2. Read the README file to figure out where to put the files that you just downloaded
3. Within the WordPress Admin, activate the Widgets plugin
4. If you are using a custom theme, make sure you have the functions.php file in your directory with the following code: , otherwise you should have moved over the functions.php file that was included with the widgets plugin download to use with the classic or default theme.
5. Within your sidebar code (either in the sidebar.php file or within your template file) add: at the beginning of your sidebar code (assuming you are using sidebar.php) then at the end In between those two PHP statements, you can put any default code that you would like to display if you decide not to use the widgets for the sidebar.

That is it for the basic set up. You can then log into the WordPress admin and under “Presentation”, you will see “Sidebar Widgets” as an option to choose in the menu. If you want to add/delete/edit your sidebar, you can now just drag and drop widget “blocks” in the sidebar window. If you want the calendar at the top, followed by your link list, followed by an RSS feed, drag all those options in. If you decide that you really want the RSS feed at the top, just drag it to the top of the list. This is quite cool (and easy)!
Advanced Widget Customization:
In most sites that I have worked on, there are more than one sidebars…and ideally I would like to make all of them use widgets because it is so darn cool and easy. If I want two sidebars, I would go into the functions.php file and instead of using: I would use:

'Sidebar 1',
'before_widget' =&gt; '<div class="side-c %2$s">', // Removes <li>
'after_widget' =&gt; '</div>', // Removes </li>
'before_title' =&gt; '<h3>', // Replaces <h2>
'after_title' =&gt; '</h3>', // Replaces </h2>
));
register_sidebar(array('name'=&gt;'Sidebar 2',
'before_widget' =&gt; '<div class="side-c %2$s">', // Removes <li>
'after_widget' =&gt; ' </div>', // Removes </li>
'before_title' =&gt; '<h3>', // Replaces <h2>
'after_title' =&gt; '</h3>', // Replaces </h2>
));
?&gt;

Ok, that does a little more than just giving me the option to have two sidebars. The code above allows me to name the sidebars (I named mine “Sidebar 1” and “Sidebar 2”. The code also allows me to remove the list code that the sidebar generally uses (and I do not) as well as allows me to replace h2 tag with something else (in this case the h3 tag). You can also customize the div classes and IDs in the example above. Now in your Sidebar Widget Admin page, you can drag and drop widgets on both Sidebars. **If you would like more than two sidebars, just use the code above to duplicate new Sidebars…just make sure they are have unique names. The only thing you will need to do now is duplicate the sidebar.php file so you can call in the second sidebar. For example sake, I duplicated sidebar.php and named it sidebar2.php and the only code I changed in the sidebar files (when using more than one sidebar) is this line:

 to: <code> [php]

. Then, sidebar2.php would have that same line, except I would change the title from “Sidebar 1” to “Sidebar 2”. Finally, in the template, I would use the use the WordPress code to call in Sidebar 1 by using and then elsewhere in the template I would use to call in the second sidebar.

More information

• Widgets API Documentation
• Widgets Blog

**Please note that I have placed spaces between the opening “<" and the tag name so it would appear in the text.