Applet Orchard

WordPress Navigation Menus (Theme Development)

[ad_1]
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:

Posted

in

by

appletorchard

Tags:

Comments

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

  1. Brooke McDonald Avatar
    Brooke McDonald

    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?

    Reply
  2. atif khan Avatar
    atif khan

    Thanks for the series, it really helpful.

    Reply
  3. mutavakkil Avatar
    mutavakkil

    i dont understand how to edit nav in css

    Reply
  4. Rodel Caesar Luneta Avatar
    Rodel Caesar Luneta

    Thank you for the tutorials!

    Reply
  5. James Summers Avatar
    James Summers

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

    Reply
  6. Charles Yaafi Avatar
    Charles Yaafi

    You are very, very good. Excellent!!

    Reply
  7. Stefano D'Alessandro Avatar
    Stefano D’Alessandro

    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?

    Reply
  8. And Kor Avatar
    And Kor

    page.php not working for me

    Reply
  9. Ryan Griffiths Avatar
    Ryan Griffiths

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

    Reply
  10. Christopher Moose Avatar
    Christopher Moose

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

    Reply
  11. eden Avatar
    eden

    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!

    Reply
  12. Khalil Pierre Avatar
    Khalil Pierre

    what program are you using

    Reply
  13. Elitia Candy Avatar
    Elitia Candy

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

    Reply
  14. Giorgio Vitanza Avatar
    Giorgio Vitanza

    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:……. ???

    Reply
  15. Romy Kim Avatar
    Romy Kim

    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 ?

    Reply
  16. Adnan Najeeb Avatar
    Adnan Najeeb

    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.

    Reply
  17. Mohammad Kasim Avatar
    Mohammad Kasim

    Best Course… !

    Reply
  18. den wayde Avatar
    den wayde

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

    Reply
  19. Jay Wu Avatar
    Jay Wu

    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?

    Reply
  20. Tom Evans Avatar
    Tom Evans

    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.

    Reply
  21. Prithvi Raj Avatar
    Prithvi Raj

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

    Reply
  22. Serkan YAZI Avatar
    Serkan YAZI

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

    Reply
  23. JC Bousman Avatar
    JC Bousman

    Thanks for the info!

    Reply
  24. Tania Kurbessoian Avatar
    Tania Kurbessoian

    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

    Reply
  25. Malick Cisse Avatar
    Malick Cisse

    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.

    Reply
  26. William Murphy Avatar
    William Murphy

    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.

    Reply
  27. Yousuf Hussain Avatar
    Yousuf Hussain

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

    Reply
  28. shahrukh631 Avatar
    shahrukh631

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

    Reply
  29. Mohamed Hassn Avatar
    Mohamed Hassn

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

    Reply
  30. chandra shrestha Avatar
    chandra shrestha

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

    Reply
  31. Yudhistira Dharmanta Avatar
    Yudhistira Dharmanta

    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

    Reply
  32. christosptr Avatar
    christosptr

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

    Reply
  33. rot rose Avatar
    rot rose

    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.

    Reply
  34. Chintana Chanthaboury Avatar
    Chintana Chanthaboury

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

    Reply
  35. suresh chaudhari Avatar
    suresh chaudhari

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

    Reply
  36. Miodrag Stojadinovic Avatar
    Miodrag Stojadinovic

    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?

    Reply
  37. stig rasmussen Avatar
    stig rasmussen

    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.

    Reply
  38. Ikbale Abdellaoui Avatar
    Ikbale Abdellaoui

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

    Reply
  39. Kevin Martin Avatar
    Kevin Martin

    Thank You!

    Reply
  40. Sandra Phillips Avatar
    Sandra Phillips

    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.

    Reply
  41. TrulyEccentric Avatar
    TrulyEccentric

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

    Reply
  42. Precedence Home Healthcare Avatar
    Precedence Home Healthcare

    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

    Reply
  43. Sonic260 Avatar
    Sonic260

    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.

    Reply
  44. Salma Khayame Avatar
    Salma Khayame

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

    Reply
  45. Mark Nasri Avatar
    Mark Nasri

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

    Reply
  46. emrah arslan Avatar
    emrah arslan

    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.

    Reply

Leave a Reply

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