WordPress Navigation Menus (Theme Development)

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. Check out my “Get a Developer Job” course:

To view a complete list of the WordPress lessons in sequential order visit:

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):

Want to share the WordPress website that you’ve been creating on your computer with the world? Learn about the web host I use and how you can get a domain + hosting for $4.95 a month ($60 savings):

Sign up for my newsletter to receive periodic webDev tips, tricks, resources and coupons. Join the list at

Follow LearnWebCode on Twitter for resources and updates:






46 responses to “WordPress Navigation Menus (Theme Development)”

  1. Brooke McDonald Avatar

    Not sure if this has already been covered, but my home page heading only worked when I used article.page (I also changed article class to "page" to match up on my page.php file. Maybe it didn't like the space?

  2. atif khan Avatar

    Thanks for the series, it really helpful.

  3. mutavakkil Avatar

    i dont understand how to edit nav in css

  4. Rodel Caesar Luneta Avatar

    Thank you for the tutorials!

  5. James Summers Avatar

    Man, thanks for this! I'm learning a TON!

  6. Charles Yaafi Avatar

    You are very, very good. Excellent!!

  7. Stefano D'Alessandro Avatar

    i wrote exactly the same code displaied in this tutorial, but i get instead of two different menù only one for the header and the footer. I get the same text for both menus. Anyone can tell me where is the problem?

  8. And Kor Avatar

    page.php not working for me

  9. Ryan Griffiths Avatar

    Please can someone tell me where I have gone wrong?
    // Navigation Menus
    'primary' => __('Primary Menu'),
    'footer' => __('Footer Menu'),
    This is just showing up in my dashboard at the top

  10. Christopher Moose Avatar

    Do you know of any good tutorials that show how to make drop down submenus and mobile drop down menus without resorting to plugins?

  11. eden Avatar

    Just a tip for mac users to do a hard refresh its “Cmd (Apple) + Shift + R” on the site to load the newly added CSS if it isnt showing up!

  12. Khalil Pierre Avatar

    what program are you using

  13. Elitia Candy Avatar

    For those having problem after 08:12, try to hard refresh : ctrl + F5
    Good luck

  14. Giorgio Vitanza Avatar

    Sorry but you missed to explain one passage, can you write a couple words to explain to me? It's the middle part of the css where you wrote .site-nav ul:before, .site-nav ul after:……. ???

  15. Romy Kim Avatar

    Anybody / Somebody please let me know. What does that "=>" mean ???? It comes at 3:20 as in 'theme_location' => 'primary' and it kept coming up along the series.
    Is it like :: or -> in OOP ?

  16. Adnan Najeeb Avatar

    8:13. I've done exactly what you did, but the bullets are still there. And I've also followed through the rest of the video, and nothing is changing at all.
    (I don't know if this will be helpful, but I am using the Arabic wordpress, and also, I've left the programming for 2 days because of Eid, with XAMPP, such that the connection was not terminated, and notepad++ open all the while.)
    Edit: I am very sorry. The case was resolved by clearing cache data.

  17. den wayde Avatar

    Hello! Thank you for this tutorial, but how we can put homepage in our menu, or blogpage? Really thank!!!

  18. Jay Wu Avatar

    Hi, everything worked but when I followed the video and used wp_nav_menu but nothing turned out as the video said will. Does WordPress 4.8 no longer provide automatic menu any more?

  19. Tom Evans Avatar

    FYI – Menu items were not automatically loaded with WordPress version 4.8. I had only one item show up which said "sample page" so I went to the customize menu in the dashboard and made my own menu items. Maybe I did something wrong to come across this situation but this is what worked for me.

  20. Prithvi Raj Avatar

    Thank you for this, it is very helpful. Your voice is also nice and soothing, makes it easy to hear for long periods.

  21. Serkan YAZI Avatar

    Hello, im begining to that. But I tried it (5:15) than menu does not appear. Why 🙁

  22. JC Bousman Avatar

    Thanks for the info!

  23. Tania Kurbessoian Avatar

    Hey there! Just wanted to thank you for making all of this so easy to understand. I've been following your directions, but after a point my style.css file wasn't being read/recognized anymore. I noticed up at the point of removing the bullet points.. I was following exactly what you mentioned and it wasn't being registered. Tried changing the font from there as well, to which that failed. Is there a trick to get this to fix itself?

    Thank you

  24. Malick Cisse Avatar

    Hi, I don't know what am doing wrong. My style sheet is not been picked up by the page anymore. I tried editing my style sheet but the changes do not reflect on the page. The style was working just fine in the previous tutorials. I don't know what I did wrong.

  25. William Murphy Avatar

    Hey, just wanted to throw out a quick thank you for putting this tutorial series out. I had no idea WordPress was such a powerful Web Development tool.

  26. Yousuf Hussain Avatar

    Great tutorials mate thanks a lot subscribed 🙂 keep up the good work

  27. shahrukh631 Avatar

    __('') what's this called in PHP?

  28. Mohamed Hassn Avatar

    Thank you very much for your tutorials,
    Please could you add English subtitle unless I can understand more

  29. chandra shrestha Avatar

    One of the Best Tutorial on Youtube. Iam So Let to See your Tutorial Thankyou Very Much Sir .

  30. Yudhistira Dharmanta Avatar

    I love this tutorial, i watch all the wordpress tutorial from him. Is there any chance by switch this page into parallax but not change theme? thanks a lot

  31. christosptr Avatar

    Hi mate! Create tutorials thanks.
    Is it possible to get a tutorial about adding widgets in a theme?

  32. rot rose Avatar

    I like your explanation, concise and to he point. I tried several other worpress tutorials on yutube but failed half way. Yours is the only on I can follow along until now without breaking anything.Thanks you.

  33. Chintana Chanthaboury Avatar

    Hi I'm watching your VDO in 2017, it's still great VDO.

  34. suresh chaudhari Avatar

    @LearnWebCode you look like charlieday from horrible bosses or is it Charlie day's image used as profile pic. ;P

  35. Miodrag Stojadinovic Avatar

    Hi, Great Tutorials. Can you maybe tell me the right way to connect bootstrap with wordpress? Do I need to connect them in functions.php, just like you did with CSS?

  36. stig rasmussen Avatar

    The solution to the CSS problem is that in HTML file he writes "class="site_nav" and the CSS file he wirtes ".site-nav". So the mistake is simply the spacer between site and nav 🙂

    Hope you understand.

  37. Ikbale Abdellaoui Avatar

    Any solution for getting the same menu in both the header and footer?

  38. Sandra Phillips Avatar

    Do you have tutorials for how to add a profile picture to your home page alongside your hello to the public? Also I have a template picture on my site that they had on there already and I am trying to get that off to personalize it.

  39. TrulyEccentric Avatar

    Chrome apparently doesn't like it when you added the css part about *zoom. It works in IE, though.

  40. Precedence Home Healthcare Avatar

    Thanks so much for your lessons, it has been really helpful. Please, what is the code for generating drop down sub menus dynamically from appearance->menus… Thanks

  41. Sonic260 Avatar

    If you're using Chrome to follow this tutorial and nothing is changing, try using "CTRL+F5" first, and this will force Chrome to load a fresh version of the page.

  42. Salma Khayame Avatar

    all the code from 7:40 in css file doesn't affect the website , i can't see the changes. please help

  43. Mark Nasri Avatar

    wow, your videos are the best, it was what i was looking for, they are ranked #1. thank you

  44. emrah arslan Avatar

    I know html, css basically. and I worked with the WordPress more than one year at the one of creative agency. now I can say its very useful tutorial and as you guess that I am not a native English speaker. Maybe some details will be more helpful but the Internet is the big ocean that you can find answers to anything about web developing. greetings and thanks.

Leave a Reply

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