A question came up about getting a css multi level dropdown type menu on a Wordpress site using the Semiologic Pro theme. If you use Semiologic Pro, you know that it has a nav bar you can use in the header, but it’s a single level menu, no drop downs, just simple links. Nice, but what if you want something a little fancier, a bit more like a cms or don’t want to use a sidebar for your navigation?

What if you have pages on your site that have child pages and you want to create a sub-menu for those? You’d need to use a plugin to handle it and in many cases do a bit of editing to your theme’s files to get it all to work. Seems like the hard way since those edits would have to be made by hand each time you upgraded…

I got to thinking about the problem and thought that a plugin that could be widgetized could easily be added to a site using Semiologic Pro’s Widget Contexts.

I reviewed a number of plugins that create drop down type css styled menus and the one that I settled on, because it was most flexible and allowed you a lot of control was dTabs.

Here’s how to make the necessary changes to use it with Semiologic Pro. (Sure you could just edit your theme files, but the way I outline below makes it a widget and you don’t have to modify your theme, just add a bit of information to the plugin file)

# added to make a widget for use in
# semiologic pro theme ~ wordpressangel.com
function init_dtabNav(){
  register_sidebar_widget("DTabNavigation", "dtab_list_tabs");
}
add_action("plugins_loaded", "init_dtabNav");
#

It should look something like this:

This change will allow you to add this to Header under Design > Widgets, it will show up as a widget called DTabNavigation.

Install the Plugin

Now you’re ready to install the plugin, upload the entire dtabs folder to your wp-conten/plugins folder then go activate the plugin.

Set Up Your Tabs

• Posts Page: This is your static blog page.
• Front Page: Your home page.
• Post: link to any post
• Page: Add any page on your menu with it’s children listed in the sub menu: be sure to check the box “Show menu on hover?”
• You can also add any Category, Archive, Bookmarks to your menu too.
• If you need to link off to a shopping cart or other non wp url – use other and insert the complete url.

Style Your Menu

Expand the CSS section and set your styling – you can use the default to begin with, then tweak it accordingly.

Save your changes.

Add Your new dTab Widget to your Header

Now you’re ready to add the dTab widget to your Header. To do this, go to Design > Widgets and choose Header as the context you want to work with. Once that’s displayed on the right, click Add next to DTabNavigation to add it. Save your changes and view your site.

Now all that’s left is for you to style it to suit your site’s design. Need help? We love styling menus. (I’m planning to play with this menu and it’s styling, be on the lookout for another post with examples.)

This was tested using Wordpress 2.6.2 with Semiologic Pro 5.6.2 and dTabs 1.3

With the latest Wordpress and Semiologic Pro updates, a lot of things have moved around, they’re still there, just not in the same place. Here’s a quick rundown on some of the frequently used items, where they are found.

Design > Widgets

This is where the most changes have occurred. Lots of the settings that were previously scattered about and many of the things that used to be handled by custom.php are found here.

When the page loads, you’ll see a section on the right called Current Widgets. This area will show you what widgets are activated by area. When it loads, it will usually show Left Sidebar.

On the left hand side it will show you the available widgets.

To edit a widget’s settings, click edit to expand the options. This is also where the Remove button is, if you want to remove a widget. Update your settings and click Change, then be sure to click Save Changes.

• For the Top Nav Bar: Show Header Widgets, then edit the Nav Menu.
• For the Bottom Nav Bar: Show Footer Widgets, then edit the Nav Menu.

Other settings you’ll be looking for:

• Settings > Reading: Front Page Displays – this is where you set a static page for your home page and your blog page.
• Manage > Pages > Page Order – used to reorder the pages, can be used by section.
• Settings > Google Analytics
• Settings > SEO – I like to use the Append the name of the site to the title of each web page. (you set this under Settings > General)
• Settings > Permalinks – where you set what your links will look like and the get rewrite code you’ll need for your .htaccess

Page Editing:

When you’re editing a page, to change the page’s name you used to look for slug on the right hand sidebar – now it’s at the top under the title, look for Permalink. It will also display what it currently is set to use along with an edit link to change it. Note: this doesn’t show up if you aren’t using .htaccess and redirects. Scroll down and you’ll see all your other page related options.

Page Parent controls how your pages will display in the Silo Page menu system. Only parent pages show, unless you within a particular section.

This Page in Widgets: is very useful. Say you don’t want your home page, blog page, about page to appear in the silo page widget in your sidebar. Edit each of those pages, look for the This Page in Widgets section and click Exclude. This also lets you configure each pages Title and Description that get used in other Widgets.

Page Specific Header: Want a different header image on a page? This is where you upload it.

SEO - Here’s where you can over-ride the entry-specific meta fields. You can specify the Title, Meta Keywords and Meta Description on each page by using this section.

There’s a lot more to this theme, these are just the items that seem to be frequently used when setting up or managing a site. Enjoy!