WordPress Navigation Menus (Theme Development)

534,500
68
Published 2014-05-07
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. Join my full courses: learnwebcode.com/courses/

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

learnwebcode.com/wordpress-theme-development-navig…

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

Follow me for updates on new videos or projects:
Instagram: www.instagram.com/javaschiff/
Twitter: twitter.com/learnwebcode
Facebook: www.facebook.com/Brad-Schiff-1542576316048470/
Twitch: www.twitch.tv/learnwebcode

All Comments (21)
  • I have searched for custom theme development or information on using any existing htmls for more than 2 months. This tutorial helped me to understand the coding part. Thank you for sparing your valuable time on making this tutorial. You saved me a lot of quality time.
  • @gaelmiles5204
    I'm currently adjusting and editing the website for the company i work for, and i have very little experience with websites, which is more than my colleagues know so its why i'm having to do it. i came to learn how to utilize WordPress and i'm now completely engulfed with a new interest in coding. You have an absolutely astounding way with words and you have an incredible knack for teaching. Very well done.
  • @shawnritch660
    Thank you for this GREAT tutorial! Seems like I'm learning at an exponential rate.
  • 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.
  • This is the easiest tutorial I have stumbled on so far. It is so clear and explicit. Thank you very much, it really helped me.
  • @skoolistanedu
    I wasted many days to find the best WordPress tutorials however so far you are the best tutor I have came across the internet. The way you teach is very easy to understand. I learned a lot of things from your tutorial. Good job man, I really loved it.
  • @3-dog-solution
    Oh' the simplicity of this course is refreshing .. Yes! - I appreciate that it will get more complex as time goes on, but from the other tutorials I've sat through: then I can say hand on heart that this is the most easiest that I've seen to date. All other tuts at this stage have had the (function.php) absolutely full of (if:) (then:) and (erstwhile:) conditions, and me rewinding constantly to try and work out what's happening. Not so with these detailed lessons, the (function.php) file is clear and succinct, as is the (style.css) file. It's very refreshing to see a tutorial being created that doesn't pull in js scripts and css formatting from all over. AND YES! - I also know that it will happen eventually, but a Nube (me!) doesn't need to be exposed to all that at this stage of developing a WordPress Theme. Said it before, and I'll say it again: this course is absolutely brilliant if you want to make your own Theme in WordPress. I really cannot recommend it enough. So much so, that I'm even putting my hand in my pocket to support the channel.
  • @alexyap3659
    i just want to take this time to express to you my gratitude for these tutorials, it has changed my perspective of wordpress completely and i am forever grateful to you for that
  • @Kodeispoetry
    I must say wordpress is such a strong community, but rarely there are videos that-can even come 50% closer to your 17 Tutorials.
  • @SillyKoala
    This is by far the best coding tutorial I've ever seen. Thank you so much!
  • @steeleye2000
    Just wanted to drop a note to say thanks for these you are very thorough and I'm super impressed.
  • @MarjoForcado
    for those who are having problem with the nav bar, here is the complete CSS up to these point. =================== * {   margin: 0;   padding: 0; } body {   font-family: Arial, sans-serif;   font-size: 100%;   color: #333;   background-color: rgb(221, 221, 221); } a:link, a:visited {   color: black;   text-decoration: none; } p {   line-height: 1.5em; } /General Layout/ div.container {   background-color: rgb(255, 255, 255);   max-width: 90%;   margin: 0 auto;   padding: 2em; } /Header/ .site-header {   border-bottom: 1px solid #999; } /Footer/ .site-footer {   border-top: 2px dotted #999;   margin-top: 30px; } /Article/ article.post:last-of-type {   border-bottom: none; } article.post {   border-bottom: 1px solid rgb(111, 111, 111); } /Navigation/ .site-nav ul {   margin-top: 10px;   padding: 0; } .site-nav ul:before, .site-nav ul:after {   content: "";   display: table; } .site-nav ul:after {   clear: both; } .site-nav ul {   *zoom: 1; } .site-nav ul li {   list-style: none;   float: left; } /Header Menu/ .site-header nav ul li {   margin-right: 5px; } .site-header nav ul li a:link, .site-header nav ul li a:visited {   display: block;   padding: 10px 18px;   border: 1px solid #bbb;   border-bottom: none;   text-decoration: none; } .site-header nav ul li a:hover {   background-color: rgb(245, 245, 245); } .site-header nav ul li.current-menu-item a:link, .site-header nav ul li.current-menu-item a:visited {   background-color: rgb(126, 196, 142);   color: rgb(255, 255, 255); } /Footer Menu/ .site-footer nav ul li {   margin-right: 10px;   padding-right: 10px;   border-right: 1px dotted #bbb; } /Page Layout/ article.page h2 {   font-size: 300%; } ===== frequent mistakes: 1. there is a spacing between an html tag and a selector(ex: .site-nav ul: after / .site-nav ul :after / .site-nav ul : after) - css3 isnt smart enough to know which html tag(e.g ul, li, a, ol) you are targeting with the selector(e.g :after, :before, :hover). so check if you have accidentally placed a space between them 2. class(.) vs id(#) - there is a huge difference between class and ID, but to summarize class names can be used in multiple html tags while ID's cannot.  3. naming - check to see whether the name tag you used in the HTML/PHP file is the same in your CSS. CSS is case sensitive so if you use class="sample" on your php file you should use .sample { not .saMple { or .Sample { etc. hope this helps
  • @itsadamthom
    I have been wanting to learn how to code Wordpress sites for quite some time now, and i must say, these tutorials are by far the best explained, and most clear way of how to do it on the internet! 
  • Superb lessons. So many 'aha' and 'wow' moments when I started watching your tutorials. More tutorials please! :D I'll finish these tutorials and be a freelance WP dev. Thanks
  • @robber6447
    This is a fantastic tutorial. Efficient and smooth. Thanks very much.
  • @vegidio
    Hey, great course! I appreciate your hard work to create these lessons. Cheers from Brazil :)
  • @IgorAherne
    These lessons are superior. Thanks a lot!
  • @wawawawar4559
    C'est avec tes leçons que j'ai réellement compris, le mode de fonctionnement du codex wordpress et de la mise en place d'un theme. Tes cours sont géniaux, bien expliqués à la détails et très compréhensibles. Big up you are the best  between  the bests