Dynamic menu for your WordPress theme

I have found various descriptions about a dynamic navigation menu in a WordPress theme. What I’ve seen these solutions grab some pages and display the result either in the header or sidebar of the theme. It’s called dynamic because you can add pages to your blog and – depending on the implementation – a link to the appropriate page will appear in the menu.

Here’s my idea: What about adding another sidebar to your theme that holds some Text widgets, each representing an item in your menu? I think that’s ultra neat because you can:

  • change your menu just by adding another Text widget
  • rearrange the order with drag and drop
  • use Widget Logic to control where your menu items appear.

Let’s implement this.

Changing the theme

Since I’m using a modified version of the great Copyblogger Theme I’ll show you how to change this specific theme. But it’s no problem to translate the following to other themes.

Basically we’ll have to change three files: functions.php, sidebar.php and nav_menu.php; I think the latter is a specialty of the Copyblogger theme. First we’ll register a new sidebar called menu in the file functions.php like so:

if (function_exists('register_sidebar')) {
    register_sidebar(array('name'=>'sidebar'));
    register_sidebar(array('name'=>'menu'));
}

More likely than not you had a call to register_sidebar with no parameters: This registered your sidebar. As you can see we have to supply a name for each sidebar; make sure that each sidebar gets a unique name.

If your theme has got only one sidebar you have to change the file sidebar.php to pick up your original sidebar; if you already had more than one sidebar in your theme you can skip this step. Search for a call to dynamic_sidebar somewhere in the file sidebar.php and add the parameter 'sidebar' to dynamic_sidebar:

if (!function_exists('dynamic_sidebar') ||
    !dynamic_sidebar('sidebar')) :

This is a line from my file and it might look different in yours. Just make sure that the code uses the right sidebar here.

Finally the users of the Copyblogger theme will change the nav_menu.php. Everybody else may place the following in the header.php or wherever the menu of your theme might be.

<?php
  if (!function_exists('dynamic_sidebar') ||
      !dynamic_sidebar('menu')) :
?>
<li><a href="/">home</a></li>
<li><a href="/archives/">archives</a></li>
<li><a href="/about/">about</a></li>
<?php
  endif;
?>

This snippet will display the widgets associated with the sidebar called menu. If there’re no widgets in this specific sidebar the three hardcoded links will show up.

Customizing the menu

Now that you’ve got a new sidebar called menu go to Design – Widgets and under Current Widgets select the menu sidebar in the drop down list and click on Show. Add as many Text widgets as you like and use them to link to sensible pages on your website. It’s as easy as this.

Since we leverage the power of the cool widget screen you can easily rearrange the order of your menu items by dragging them around. You can add other widgets to your menu as well – maybe that makes sense too.

Conclusion

As we’ve seen the concept of the sidebar is powerful and can be used for different purposes: one of them is a neat navigation menu. The new menu is easy to setup in any theme and I bet you’ll really like the way to manage it via the widget screen.

If you’d like to read more about the functions from the Widgets API used in this post I recommend having a look at this and that page.

This was inspired by Justin Tadlock’s Widgetize This post.

2 comments ↓