June 15, 2014

WordPress Theme Development (Navigation Menus)

In this lesson we learn how to add navigation menu locations to our theme and register the menus so users can easily manage the menu links via the WordPress Admin UI.

Link to download .zip of theme files as shown in this video (note: this is not a “complete” WordPress theme yet and this download is only intended for educational purposes to dissect and review).

Do you want to share the WordPress website that you’ve been creating on your computer with the world? The next step is to use a web host to share your site with the world. Learn about web hosts, my favorite one, and how to get a plan for only $5.78 per month.

View the entire “Learn WordPress” series

About the Author

Brad Schiff

Brad Schiff is a front-end developer, designer, and educator who has been building user interfaces for over a decade. He’s done work for Fortune 500 companies, national political campaigns, and international technology leaders. His proudest achievement is helping people learn front-end web development.

Follow Brad on Twitter Subscribe on YouTube

11 thoughts on “WordPress Theme Development (Navigation Menus)

  1. Hi brad,
    thanks for the amazing tutorial, I was just wondering, you made the theme responsive in the beginning, however, this particular navigation is not responsive, are you able to explain how I would go about making the navigation responsive on WP please?

    1. Hi Andy, that’s a great question! I am eventually going to include a “Make the theme responsive” tutorial, but have not gotten around to it yet. For now you can search my YouTube channel for “Responsive Web Design Navigation Menu Tutorial” – have a great day!

  2. Awesome tutorials Brad,

    Regarding this code in the css:
    .site-nav ul li {
    list-style: none;
    float: left;
    }
    if I change the float left; to float right; my menu order is disrupted and I cannot seem to work out why and how to fix. Could you give me a short explanation as to what is happening?
    tia

    1. Hi Brad,

      I came across this issue. Could you please explain why is this happening?

      In the video, your menu gets stacked above the border neatly. but when I try, it occupies the same block as the post title which disrupts the order.

      Thank you very much. Any help will be highly appreciated.

  3. Can you explain to me this each line :

    .site-nav ul:before , .site-nav ul:after { content: “”; display:table;}
    .site-nav ul:after { clear:both; }
    .site-nav ul { *zoom: 1;}

    Why it’s needed ? thank you 🙂 in advance reply will greatly appreciated.

        1. Hi Cedric and Juliette,

          That code is commonly called a “clearfix” – we can then add that class to a “parent” or “container” element whose children are floated. So for example, if “li” elements are floated to the left, their parent element “ul” won’t be aware of the children’s size (you can test this by adding a background color to the UL while having the LI elements be floated.

          This is difficult to explain with just words, but I’ve created a YouTube video explaining floats and clearing floats: https://www.youtube.com/watch?v=AyrQR7SxAq8

          I hope that helps!
          Thanks,
          Brad

Leave a Reply

Your email address will not be published. Required fields are marked *