How To Create Custom Menus In WordPress

The WordPress menu system gives you the ability to easily create custom menus right from within the admin area — no custom coding or template modifications required. This video demonstrates the process of setting up a menu system and assigning it to one of your theme’s menu locations. Additionally, I show you how easy it is to create a drop-down menu (provided your theme supports WordPress menus, of course).

Share on facebook
Facebook
Share on twitter
Twitter
Share on linkedin
LinkedIn

20 thoughts on “How To Create Custom Menus In WordPress”

  1. Thank you for making this very informative video. I was pulling my hair out reading the WP forums and was about to throw the towel in. Thanks for explaining in a simple, straightforward manner. And it WORKS!!!

    Again, awesome, and thanks a lot!!!

  2. This is a clear and concise video series. It takes the non-techy clearly from beginning to end. WIth a lot of training it seems to leave out major steps. This series is a must for anyone needing to work with blogs or full websites.

  3. Good explanation of custom menus but I have a question regarding creating the dropdown.

    What is the difference between creating the dropdown in the way demonstrated in this screencast and making the Contact Us page a child page of Contact?

    Are there situations when 1 method is preferable to the other?

    Thanks

  4. Good question. The two aren’t actually related at all. The organization of your custom menus are independent of your page relationships. That gives you a lot of flexibility when it comes to building a menu and modifying it over time.

    As a general rule, use child pages to group pages that are related. Use your menu structure to simplify navigation of your website and give users quick access to the most important areas of your website.

  5. einlowhood@path.org

    I’m curious about what would happen if the user clicked on “news.” A listing of posts in reverse chronological order? I’m not sure that’s the behavior users usually expect from a menu.

  6. That would depend on what the “news” menu item was linked to. Menu items can be linked to anything (page, post, category, tag, or even external links).

    It’s entirely up to you as the menu creator to decide what the user experience is like.

  7. Okay, a little bit frustrating. You did not explain how to create non-clickable menu items that simply denote a category. For example, I am creating a website for a Veterinarian’s office and I want a “Staff” navigation item which drops down to “Doctors” (with a list of doctors as a 3rd level) etc with the rest of the staff. That seems like it would be an obvious need for someone creating a custom menu.

  8. Figured out my problem. Having a lot of experience with regular html and css I figured it had to be some sort of use of the hash tag. For anyone that was dealing with the same issue as myself, here is the fix:

    Simply go to the “Custom Links” section. In the label field, simply enter what you want the item to say in the navigation menu. Then, in the URL section, simply place the hash tag “#” after the http:// and you’re good to go. I would assume this would work on nearly any theme.

  9. Hi Marc,

    That’s it exactly. The hash after HTTP is actually a link to the current page. So, it will act like no link at all.

    And yes, it works with any theme.

  10. Ernesto Contenti

    Kirk,
    So far, a great course. However, I am “just” starting to work with WP by maintaining a new web site our company recently had done by an outside source.

    I’ve seen the very clear explanation on how to build a menu in WP, but in your demo you only addresses “buttons” that already exists (e.g. About Us, The Company, Contact us, etc.), but HOW can I create and add “a new button” to the Main Menu? We want to bring a link to a video which is actually buried in the site, out to the surface, and I just want to make it accessible via a button that I need to add to the main Menu (?). So, could you please give me some advise on how to do that? I watched your menu chapter 2-3 times, and I do not realize “how to add” a brand new button within the main menu (?).

    Any hints, would be greatly appreciated.

    Thank you.
    Ernesto Contenti

  11. Ernesto,
    Try using the Custom Links box on the menu page. Just paste the URL to the page on your site into the Custom Link box, then enter the text you’d like to see on the menu option below that. When you’re done, click the Add to Menu botton and it will be moved to the active menu.
    Be sure to save your menu and the new link should appear when you call up your site.
    kb

  12. Ernesto Contenti

    Kirk,

    It worked — EXCEPT that I had to do it using Explorer, NOT FIREFOX! So — that may be a detail you may want to mention in your tutorials, so some other soul out there does not have to endure the same pain. : )

    NOW — what I would like to know is “how can I either make my page wider” OR “control the space between the labels in my main menu?” Because it actually was throwing the last label on the right, onto a second row, when there is actually plenty of space in between all the labels, so that I could make them all fit in one raw. Any hints as to how to make more labels in a menu fit all in one line? Where is that controlled from? (www.dtinterpreting.com)

    Thank you so much for your valuable help.

    Ernesto

  13. Ernesto,
    Hmm. It shouldn’t make a difference which browser you’re using. WordPress works with Firefox as well as any other browser. But It’s always possible you have a plugin installed that’s interfering with Firefox.

    As far as the spacing on the menu of your site. I’d advise against making your site wider. It’s a fixed-width site and a nice design. You don’t want to change that.

    Instead, I think you want to make the spacing between menu items a little narrower. To do that you’ll have to edit the stylesheet. Make sure you make a copy of your working stylesheet first. If something goes wrong and you don’t have a copy your site will not look right at all.

    In fact, I’d suggest you ask your original theme designer to make the change if that’s at all possible. If not, this is the selector that you’ll need to change:

    .sf-menu > li {
    background: none repeat scroll 0 0 transparent;
    margin-right: 18px;
    width: 120px;
    }

    Make the width setting smaller. Try 110px first. If that’s not enough try 100px and so on.

    kb

  14. This is a curious question – Do all themes have a ‘stylesheet’? Where is the ‘stylesheet’ located? Thanks
    @Ernesto, Love the site and the service the company provides. In this world of Global communications, I can think of many times when this service is needed.

  15. Janet,
    Yes, every theme has a stylesheet. In fact, it’s one of the few required theme files.
    To find your theme’s stylesheet sheet, first you’ll need to find your theme folder. Each theme lives in it’s own folder, under /wp-content/themes/
    Once you’ve found your theme folder, look for the style.css file. That’s the standard name for WordPress theme stylesheets.

  16. Hi Kirk,
    Can I combine “pages” and “posts” in my sidebar. I have content that just need to be “pages”.
    Thanks.
    Erlinda

    P.S. I’m not “website savvy” but I’m learning from your tutorials.

  17. Kirk Biglione

    Hi Erlinda,

    Yes, you can can combine page and posts in your sidebar. In fact, you can put whatever you want in your sidebar as long as there’s a widget for it.

    Even though posts don’t show up in the menu builder you can add links to individual posts by using the Custom Links option. Just copy and paste the link to your post into the Custom Links box, add text for the label, and then pull that over onto your menu. Once the menu is created you can then add it to your sidebar by using the custom menu widget.

    Or you can create a custom menu of just pages, and add that to your sidebar, then add the “recent posts” widget above or below. That will give you two groups of links – one group of links to the pages on your custom menu and another group of links to your recent posts. The recent posts links will be automatically updated as you add new posts.

    Glad to hear the lessons are helping!

  18. Hi Kirk,
    The video “How to Create Custom Menu” is helped me to re-organize my right sidebar. Does this apply to creating a customize left sidebar?
    Another topic: Could you please guide me on how to update backup and plugins so I can do them myself?
    Thanks.
    Erlinda

  19. Hi Erlinda,
    Yes, you can also use these menus in your sidebars. Create the menu first, then drag the Custom Menu widget to the sidebar where you’d like the menu to appear. The widget options allow you to select which menu to use, so you can create a special menu just for your sidebar.

    > Another topic: Could you please guide me on how to update backup and plugins so I can do them myself?

    You can view everything that needs to be updated from the Dashboard -> Updates menu. Check the box next to everything you’d like to update, then click the update plugins button.

    As far as backups go, I use and recommend the BackupBuddy plugin. There’s more information in this lesson: https://wpapprentice.com/blog/wordpress-backup-solutions-backupbuddy/

Comments are closed.

Free WordPress
Quick Start Course

Jumpstart your WordPress skills
with this one-hour course