How to Switch from the Thesis Nav Menu System to the WordPress Nav Menu System

by Martin Malden

Moving from the Thesis nav menu system to the WordPress nav menu system. Many versions ago Thesis introduced navigation menu controls that enabled us to easily customise the design of the nav menu, and include categories and external links.

And then WordPress introduced menu controls that did the same, but did it better.

None-the-less, I never bothered to switch to using the WordPress nav menu system because the Thesis system was doing just fine.

However, when Thesis 2.0 arrives we will no longer have the option: the Thesis nav menu system is being retired.

So here’s how to switch from the Thesis nav menu system to the WordPress system.

Step 1: Create a WordPress menu

Before you start make sure you have a copy of your site loaded in a separate tab so you can refer to the existing menu tabs (titles and order) to ensure you recreate them accurately.

OK, once you’ve done that, go to the Appearance > Menus page. Type a name for your new menu in the area at the top of the right-hand pane (you can just use the site name) and click ‘Create menu’.

Create a WordPress Nav Menu

Type a name for your menu and click ‘Create Menu’

Step 2: Create your custom links

Moving to the left panel of the page, if you have custom links in your current menu (e.g. links to pages on other sites), add the destination URLs and the menu tab label in the custom links section and then click ‘Add to Menu’:

Add your custom links.

Add links to other sites in the Custom Links area

Step 3: Select the site pages you want to appear in your menu

In the next section down, ‘Pages’, WordPress will list the pages you have on your site.

Click the checkboxes beside each page you want in your new menu. The default view is ‘Most Recent’ but if some pages appear to be missing click the ‘View All’ tab.

When you’ve selected the pages you want to appear in the menu, click the ‘Add to Menu’ button:

Select the pages you want in your new menu.

WordPress will list your pages. Select the ones you want to appear in your menu and click ‘Add to Menu’

After clicking ‘Add to Menu’ the selected pages will be listed on the right-hand side of the page.

Step 4: Select any Categories you want to appear in your menu

Finally select any categories you want to appear in your menu.

In this image below there appear to be no categories: that’s because there aren’t any! The blog functionality is not being used on the site I took these shots from.

If you’re using categories they will be listed in the same way your pages are, so select the ones you want in the same way you did for your pages, and click ‘Add to Menu’:

Select the categories you want in your menu.

If you’re using categories they will be displayed here. Select those you want in your menu

Step 5: Set the order of your menu items

Having added all the custom links, pages and categories you want to your menu they will be listed on the right side of the page:

Set the order of your menu items.

Drag and drop items to change their order

To change the order of a menu tab click, hold and drag it to its new position with your mouse, exactly as you do for changing the order of widgets.

Drag items that you want to appear as sub-menus slightly to the right until the place-holder appears and then drop it in place.

Step 6: Edit your menu tabs

To edit the names of your menu tabs click on the down-arrow at the right end of the item title-bar and edit the Navigation Label field so it says what you want it to:

Edit your menu tab labels.

Click the down arrow at the right end of the title bar and type your menu label into the ‘Navigation Label’ field

When you’ve finished editing your labels click ‘Save Menu’:

Click 'Save Menu' when you're finished.

When you’ve finished editing your labels click ‘Save Menu’

Step 7: Select your menu to use

Finally you need to select the menu to use, so go back to the top of the left column under Theme Locations, select the menu you just created from the drop-down list, and click ‘Save’:

Select the menu you just created.

Select the menu you just created and click ‘Save’. If you miss this step your menu will not appear

After selecting your menu and clicking ‘Save’ click ‘Save Menu’ again.

Important: if you miss this step (selecting your menu from Theme Locations) your menu will not be used.

Step 8: Switch from the Thesis menu to the WordPress Menu

Lastly, go to the Thesis site options page, expand the section under Navigation Menu > Select Menu Type and click the radio button next to ‘WordPress nav menu’

Select the WordPress nav menu system from your Thesis control panel.

Select the WordPress nav menu system from your Thesis Site Options screen

And that’s it – you’re all done for creating your menu in the WordPress nav system and switching over from the Thesis nav system.

A couple of points:

  1. The nav menu styling that you do through your Thesis Design Options screen does not change – style your WordPress menu in exactly the same way you’ve always done
  2. Nav menu styling that you do in your custom stylesheet is the same for .menu, .menu a and .menu a:hover but the styling for current is different because the WordPress menu uses a different class identifier for current

This only affects styling for current that you do in your custom stylesheet.

Styling done in the Design Options screen is not affected.

As soon as I discover the identifier that the WordPress nav menu system uses for current, and that works when specified in the custom stylesheet, I’ll add an update here.

Cheers,

Martin Malden

Please share this article - I'm counting on you!
       
Found this article useful? Get free updates!

Get regular updates, plus a free eBook on how to set up a business online - join us!

Your details are safe with me.
My Privacy Policy.

Previous post:

Next post: