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

13 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?

    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!

  4. Hi Brad

    Thanks a lot for your tutorials, I am a total rookie but your explanations give me all the confidence i need to tackle the task of web development.

    One Problem though..

    I’m stuck on styling the navigation menus so that they sit on one line. I’ve tried everything, even went as far as copying your downloaded code files into my WordPress themes folder but my menus are still stacked one above the other with the bullets. I followed your tutorial to the letter but still no change in the styling. All is well up until the point i refresh after adding the code for

    /* Navigation Menus */

    after i hit refresh none of the changes in the style.css file take effect.

    Could it be something with my WordPress Dashboard settings?

    Any help will be really appreciated. Thank you for a great tutorial series.

Leave a Reply

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