In a previous post, I covered creating a simple WordPress theme, which forms the basis for the theme I use on this site. That theme creation guide covered only the very basics of setting up a WordPress theme. I’ve since upgraded to WordPress 3.0 which introduces a number of new features including Dynamic Menus. In this post, I’ll cover taking advantage of the dynamic menus api, as well as “widgetizing” my theme, which allows me to configure which widgets will show up on sidebars in my site.
My updated theme is available below for reference.
Widgetizing a Theme
Widgets have been around for a while in WordPress, but I didn’t get around to implementing them in my theme on the first go around, so I’m going to do it now.
Widgets are small bits of content in WordPress that can dynamically be placed on different parts of your site. The most common use for them is to allow a blog administrator to choose which content shows up on his/her site’s sidebar.
WordPress has a pretty straightforward API for working with widgets.
Register a Sidebar
The first step in widgetizing a theme is registering a sidebar. This defines a sidebar that you can later use throughout your site. For my site, I’ll just be registering one sidebar to use as the right sidebar. To register a sidebar, you add the snippet below to the functions.php file in your theme.
if ( function_exists('register_sidebar') )
register_sidebar(array(
'before_widget' => '<li>',
'after_widget' => '</li>',
'before_title' => '<h2>'
'after_title' => '</h2>',
));
This tells PHP that if this version of WordPress uses widgets (that’s what the if function exists stuff does), then register a single sidebar. The expectation is that the markup will be in a special form that wraps the title of the widget in <h2></h2> tags. Also, each individual widget will be wrapped up in <li></li> tags. Please note that the latter part (<li> tags) is a bit of a departure from the norm. Usually there is no wrapping around a widget by default, but to continue using my chosen styling (I’ll reference that later), I want each widget to be wrapped up in <li></li> tags.
Insert the Dynamic Sidebar
The next step is to modify the sidebar.php content so that it uses the new dynamic sidebar. My original sidebar.php content looked like below.
<div id="menu">
<ul>
<?php /* Widgetized sidebar, if you have the plugin installed. */
if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar() ) : ?>
<?php wp_list_categories('title_li=' . __('Categories:')); ?>
<li id="archives"><?php _e('Archives:'); ?>
<ul>
<?php wp_get_archives('type=monthly'); ?>
</ul>
</li>
<?php wp_list_bookmarks('title_after=&title_before='); ?>
<?php endif; ?>
</ul>
</div>
Previously, I had left in the basics for a dynamic sidebar (the if statement that calls the dynamic sidebar). Since I had not registered any dynamic sidebars, the dynamic sidebar was just never used. Instead, the theme defaulted to the content within the if block. This is the expected behavior. Whatever you put inside the if block will appear if widgets are not used or not enabled. Since I already had that in place, I left my sidebar.php as it was.
Note that I am not passing any values into the dynamic_sidebar() call. This is because I only registered a single sidebar. If earlier I had registered multiple sidebars, I could instead state the exact name of the sidebar that was registered when calling dynamic_sidebar(), to insert the specific sidebar that I wanted. dynamic_sidebar() calls can also be used anywhere in a theme. In most cases though, they end up in the sidebar.
Also note that the tags I use in my default (non-widgetized) sidebar wrap up each widget in an <li></li>. In some cases (categories), this is done by the WordPress API call, in others (archives), I do it manually.
This matches up with my initial styling below, which makes each widget a nice box with rounded corners. I’ve pasted the styling below for your reference.
#menu > ul > li
{
display: block;
padding: 10px 10px;
margin: 10px 0px;
border: 3px solid #E7C042;
background-color: #F5E6B4;
font-size:110%;
color:#6484CA;
font-weight:bold;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
}
#menu > ul > li > h2
{
font-size:110%;
}
#menu a,
#menu a:link,
#menu a:visited
{
font-size:75%;
color:#6484CA;
}
#menu a:hover
{
text-decoration:underline;
}
#menu > ul > li > ul
{
padding: 0px;
margin: 0px;
list-style-type: none;
color: #D1DBEF;
}
#menu > ul > li > ul > li
{
background-image: url(images/bullet_orange.png);
background-repeat: no-repeat;
background-position: 0px 2px;
padding-left: 14px;
margin-left: 2px;
}
#menu > ul > li > ul > li > a,
#menu > ul > li > ul > li > a:link,
#menu > ul > li > ul > li > a:visited,
#menu > ul > li > ul > li > a:hover
{
color: #000000;
font-weight: normal;
}
Selecting Widgets
That’s all for widgetizing the theme. I just packaged up my theme and installed the new version on my site, and I was ready to go. After installing the latest theme, WordPress informed me that the new theme supported widgets, and to go to Widget Settings to configure them.
WordPress gives a notice when a new theme with widgets is enabled.
Once on the Widget Settings screen, things were pretty straightforward. WordPress already has default plugins that cover the widgets already used in my theme (Categories, Archives, Links). To add Widgets, you just drag and drop them to your chosen sidebar and then configure them. I’ve include a quick screen capture of how I configured the 3 Widgets on my site.
The configuration for the 3 WordPress widgets I use.
In future posts, I’ll cover how to create your own widgets, but this is all you need to convert a simple them to a Widget enabled theme.
Adding Dynamic Menus to a Theme
WordPress 3.0 recently added Dynamic Menus to its list of features. Fortunately, dynamic menus work a lot like widgetized themes, so many of the steps in implementing a dynamic menu are the same.
Register a Menu
First thing’s first, I needed to register a menu. To do this, I simply had to add the following snippet to the functions.php file of my theme.
if ( function_exists( 'register_nav_menus' ) ) {
register_nav_menus(
array(
'home_menu' => 'Home Menu'
)
);
}
Here I’ve illustrated the use of the register_nav_menus call as opposed to register_nav_menu. This allows you to register multiple menus if you are going to use multiple ones on the site. For now I’m just using one. I’ve registered it with an id of ‘home_menu’ and a human readable name of ‘Home Menu’.
Inserting a Dynamic Menu
Again, inserting a dynamic menu works a lot like inserting a sidebar for widgets. My original menu code is shown below.
<div class="grid_8 navigation" id="navigation">
<ul>
<li><a href="/" title="Home">Home</a></li>
<?php wp_list_pages('depth=3&title_li='); ?>
</ul>
</div>
I want to have the dynamic menu call generate the same markup, and fall back to the old default menu if dynamic menus are not enabled in a WordPress installation. The modifications I made are shown below.
<?php /* Dynamic menu if available */
if ( !function_exists('wp_nav_menu') ||
wp_nav_menu(
array(
'menu'=>'home_menu',
'container_class'=>'grid_8 navigation',
'container_id'=>'navigation',
'menu_class'=>'grid_10') ) )
{ ?>
<div id="navigation">
<ul>
<li><a href="/" title="Home">Home</a></li>
<?php wp_list_pages('depth=3&title_li='); ?>
</ul>
</div>
<?php } ?>
Setting the container_class and container_id allows me to match the markup for the div that previously surrounded my menu, and the menu_class allows me to apply the correct styling to the ul that the dynamic menu generates.
Also, similar to the use in the dynamic sidebar, I use an if block to first check if the function exists, and then call the method for the dynamic menu. If either condition fails, then the default menu is rendered.
Configuring the Menu
That’s all I needed to do for theme modification. After reinstalling my theme again, my menu was ready to be configured. To do this, I simply went to the Appearence > Menus section of the site administration page. I added a new Menu call Home and added 4 items to it. The first two were Pages, for my Home and About page. Note that adding Home is a little odd, since its not technically a page. If you click View All under Pages you’ll see Home as an option. I also added two additional items, one for my Technology category and one for my Running category, shortening the names to Tech and Run respectively. The screenshot below shows what my configuration looked like.
This is the menu configuration I used.
And that’s all there was to it. My site and theme are now using dynamic sidebars, so I can easily take advantage of common widgets developed for WordPress, and my main navigation area is controlled by the all-new WordPress 3.0 Menus.
Once again, I’ve posted my updated theme as reference for anyone that would like to use it or reference it.
Posts