updated: aug 7, 2006 - fixed code error added hack for 2 side-bars
Summary
While browsing Theme Viewer looking for a cool theme that I could hack up I found theme that was tagged as "Widget ready". "Humm what's a widget?", I asked my self.
A widget is? The creator of WordPress Widgets says this:
“Widgets” is just a silly buzzword we’ve chosen for this sidebar-chopping plug-in we have developed. They could have been called Gadgets or Gizmos or Wizbangs or Whatevers. On the surface, they’re just things you can use to personalize your WordPress site without knowing HTML. Way down deep, they may be something entirely more significant.
That's cool but what if I don't like any one of the 54 Widget ready themes? Can I use my own theme and hack this into it?
Can I just point out that this is the story of my internet life: I went to a site to get a new theme and now I'm hacking up another theme to add widgets to it.
Get, Install and Configure the Widgets Plugin
First you'll need to get the WordPress Widgets: Download install and then configure it.
It's best to install the plugin here: wp-content/plugins/widgets as a new sub-folder.
Then go to the Plugins Admin Page and enable these 3 plugins:
-Sidebar Widgets
-del.icio.us widget
-Google Search widget
Hacking up a Theme
After doing this a few times I have found that it will work with any theme but you need to be able to at least read PHP and know what is is doing.
So open up your theme directory and create a new file named functions.php and place this code in it:
-
<?php
-
register_sidebar());
-
?>
**FIXED** This was an error***
An additional hack on can allow you to do some style processing as well:
*****************************************************
Creat a new page named functions.php in your theme directory with this code:
-
<?php
-
'before_widget' => '',
-
'after_widget' => '',
-
'before_title' => '<h2>',
-
'after_title' => '</h2>',
-
));
-
?>
The before_widget and after_widget parts let you insert some code around the Sidebar (links, categories, pages, etc) titles. This may only be useful if the theme does any kind of style-sheet processing like putting an under-line under
tags or if you want the Sidebar title to use a specific style-sheet class like
-
<div class="side-bar-title">
.
Now you need to hack up the sidebar.php file to get the Sidebar Widgets Admin to work.
Here's an example from the Sunburn Theme.
-
<ul id="sidebar">
-
<ul id="sidebar">
-
|| !dynamic_sidebar() ) : ?>
-
-
<?php wp_list_pages('title_li=<h2>Pages</h2>'); ?>
-
-
<li><h2>Archives</h2>
-
<ul>
-
<?php wp_get_archives('type=monthly'); ?>
-
</ul>
-
</li>
-
-
<li><h2>Categories</h2>
-
<ul>
-
<?php wp_list_cats('sort_column=name&optioncount=1&hierarchical=0'); ?>
-
</ul>
-
</li>
-
-
<li><h2>Search</h2>
-
<?php include (TEMPLATEPATH . '/searchform.php'); ?>
-
</li>
-
-
<li><h2>Meta</h2>
-
<ul>
-
<?php wp_register(); ?>
-
<li><?php wp_loginout(); ?></li>
-
<li><a href="http://validator.w3.org/check/referer" title="This page validates as XHTML 1.0 Transitional">Valid <abbr title="eXtensible HyperText Markup Language">XHTML</abbr></a></li>
-
<li><a href="http://gmpg.org/xfn/"><abbr title="XHTML Friends Network">XFN</abbr></a></li>
-
<li><a href="http://wordpress.org/" title="Powered by WordPress, state-of-the-art semantic personal publishing platform.">WordPress</a></li>
-
<?php wp_meta(); ?>
-
</ul>
-
</li>
-
-
<?php endif; ?>
-
</ul>
First it's creating an unordered list to place the sidebar content in and then it is checking to see if the dynamic_sidebar function exists.
Now upload all of your changes and then goto the Theme Admin and select the theme you just hacked up. You should see a link to Sidebar Widgets. Go there and start dragging and dropping your sidebar widgets.
But wait what if my theme has 2 side-bars?
No problem in the the finctions.php page you need to indicate the number of side-bars you want to use:
-
<?php
-
'before_widget' => '<ul>',
-
'after_widget' => '</ul>',
-
'before_title' => '<h2>',
-
'after_title' => '</h2>',
-
));
-
?>
-
-
Please take note of the 3rd line <strong>register_sidebars(2,array(</strong> which is indicating that we have <strong>2 side-bars</strong>.
-
-
Now open up the first side-bar file and change the code to thie:
-
[php]
-
|| !dynamic_sidebar(1) ) : ?>
Please take note of dynamic_sidebar(1) which is indicating this side-bar number 1.
Then add a second side-bar to your side-bar page (or where ever) and indicate that it is dynamic_sidebar(2).
Upload all of your changes and then goto the Widget Admin and should see a 2 boxes to drop widgets in now. Start adding items to the boxes and don't forget to save.
There you have it a them with 2 side-bars that both support widgets.