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’.
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’:
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:
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’:
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:
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:
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’:
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’
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:
- 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
- Nav menu styling that you do in your custom stylesheet is the same for
.menu, .menu a and .menu a:hoverbut the styling for
currentis different because the WordPress menu uses a different class identifier for
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.