Complete Guide to Using Thesis 2 for WordPress. Click Here.

≡ Menu

Step 14: WordPress Navigation Menu

Home Page without Menu

Take a look at the picture above.  What’s missing?  That’s right, there is no way to navigate your new site.  There is no menu or “nav bar” as some refer to it.  How are we going to navigate our new website?  This is where WordPress Menus come in.  Earlier versions of WordPress didn’t have a nice way to build menus.  Fortunately for us, things have changed.  WordPress now provides a very flexible and intuitive way to build menus.  After all, the menu is like a road map to your website.  Without out it, how will visitors find your important content.

WordPress can build menus using two different constructs, categories and pages.  Remember the About page and categories we just created?  Now we can use them to create our navigation menu so our visitors can easily find the content they are interested in.

From the WordPress Dashboard, click on “Appearance” in the left sidebar, then click “Menus”.  When you first enter the Menus page you will not be able to do much but create a new Menu.  In the picture below I’ve named my Menu “MainMenu”.  Click “Create Menu” and you will have the start of your menut.

WordPress Menu Setup

After creating a menu named “MainMenu” we’ll add some pages and categories to it.  See what is happening here?  You can use static pages and post categories as menu options to help visitors navigate your site.

Let’s start with Categories.  In the Categories box, select one or more categories to use in your navigation menu.  Check the box then click the “Add to Menu” button.

WordPress Categories for Menu

Next, we’ll choose our About page to appear in the navigation menu.  Again, check the box and click “Add to Menu”.

WordPress Pages for Menus

Now we have a menu built.  In the Menu box click “Save Menu”.

WordPress Menu Save

One more step is required to make your menu live on your site.  Locate the “Theme Locations” box and click the drop-down menu.  Select the menu name you just created then click “Save”.

WordPress Theme Menu

Go ahead, check out your site.  It should look something like the picture below now.  Note the About and WordPress menu options in the nav bar.

WordPress Menu Live

Looks great, right?  But in my example the About menu option is before WordPress.  Typically the About option is farther to the right.  Fortunately WordPress makes it easy to move menu options to any order you like.  Go back to Appearance -> Menus again.  Place your cursor over the About menu item and left-click and drag it to the bottom of the menu list.  Click “Save Menu” and you’re done.

WordPress Move Menu Items

Check your site out again and ta-da, the menu options are in the order of your choice.  In our example we moved About to the right of WordPress.

WordPress Menu Live 2

You can find additional information on WordPress Menus in the Codex.

About the author: I’m a techie, a gadget geek, a former programmer, and all-around technology nut. Currently I’m a business analyst for a technology company. I love what technology can do for us. I love smartphones and apps for everything. Building sites with Thesis 2.0 and WordPress help me to reconnect with the feeling of building something tangible.

I’m on: Google+ and Twitter

{ 6 comments… add one }
  • Frosty February 27, 2013, 2:26 PM

    Thanks for all your work!

    When I went to Theme Locations, I got this message: ‘Your theme supports 0 menus’. The menu did actually display though.

  • Doug Macklem February 27, 2013, 6:41 PM

    Frosty: interesting. When I go back to my WordPress > Appearance > Menus screen, I now see the same message you are seeing, “Your theme supports 0 menus”. Clearly I have menus so I’m not sure what is going on here.

  • Doug Macklem February 27, 2013, 7:43 PM

    Looking a little further, I believe 1 custom theme is supported regardless of this message. We cannot add additional menus. Some sites have top nav bars and sidebar menus. I personally don’t like sites with more than one nav menu. Adds confusion as to why there is more than one menu.

  • tom barney March 11, 2013, 11:56 AM

    Doug,
    Mine also said 0 menus BUT it did NOT display anything when I went to my site?

  • Wawan Purnama December 6, 2013, 3:01 AM

    Ho Doug,
    How to make two nav menu (before and after header) in Thesis 2.1. and that two menu still shown if i click the post..

    Thank You..

  • Doug Macklem January 1, 2014, 7:11 PM

    You have to add the same nav menu to each different page Template to get it to show up. Each template is a separate entity and what you do to one will not affect another so if you want something to carry through your site you’ll have to make the same change to each template.

Leave a Comment