All the wordpress themes I design are built on the Genesis Framework, which uses the WordPress custom menu feature. Here’s a handy tutorial on how to set it up. Once you have published some pages and posts on your site, you are ready to create a menu – that’s the navigation bar you see near the header (above or below).
1. Once you’re logged into your WordPress dashboard, go to Appearance>Menus.
2. Then, create a new menu, and give it a name.
3. Add Items to Your Menu
You are now ready to add items to your menu. You can add pages, categories, blog posts, or custom url’s. You can find these options along the left side of your screen. If you are using WooCommerce, you can also add product categories, tags and products to your menus.
If you don’t see these options available, just click on the tab at the top of your screen that says “Screen Options” and check the boxes.
4. Creating Submenus
Once you have items in your menu you can drag them slightly to the right to create a submenu (indent them a bit). It’s just a matter of ‘drag and drop’, no special coding needed.
5. Using Custom Links
If you want to add a link to another site (like your main website, for example, or your facebook page), just click on Links, and paste the url in the field and add the title for the tab. Click add to menu.
You may want to have a menu item that is not clickable (for example, a top-level menu that opens to reveal a submenu of related pages). Just add a custom link, and use “#” for the URL, and add your link label to name the tab.
If you don’t want visitors to leave your site when they click on the tab, make sure you check the box that says “open link in a new window.”
6. Arranging the Menu Items.
All of the links you added to your menu will appear in a list. You will be able to rearrange the items easily any time you want. Simply click and drag the boxes to change the order of the menu items.
7. Be sure to click the SAVE MENU button when you’re done.
8. Assign Your Menu.
Select where you want the menu to appear. Most themes will have a primary navigation and secondary navigation option.
9. Custom Menu Widgets
If you want your menu to appear elsewhere, like in a widget, go to widgets, drag the custom menu widget to a widget area, and select the name of the menu you want to place on it.
Very easy, right?
Let me know what other tips or tutorials you want to see here. So far I’ve been posting about topics that a lot of my clients ask me about. I’d love to know what else you need help with.
Hi Pat! Thank you for sharing this very detailed step-by-step instruction on how to add menus and widgets. Super helpful! I just want to ask if there’s a possibility that the theme we use can also affect the number of menu that we can add? Is that a possibility? Like for example you added a menu but even after saving it won’t show up on the blog? Thank you in advance! 🙂
Hi Peachy! I don’t know what theme you’re using, but it shouldn’t matter. Maybe there’s a setting you may have missed?
Kerri Maharaj says
This comment is not about the post per se. I came across your site and it’s visually great!.
I noticed you have some very simple styling for your comment area (looks like in-built WP comments), which I’ve been trying to do for my own site. Any quick tips you can give me to achieve a similar look?
My html/css knowledge is limited but I try to follow using research from the internet.
Thanks a lot!
Hi Kerri! I just use the default comment area on WordPress, and styled the typography to match the rest of the site. Do you have firebug for firefox? You can use that to find out which css selectors to edit.