HomeОбразованиеRelated VideosMore From: LearnWebCode

WordPress Navigation Menus (Theme Development)

3046 ratings | 451213 views
My new advanced WordPress course: https://www.udemy.com/become-a-wordpress-developer-php-javascript/?couponCode=YOUTUBEDEAL My new beginner WordPress course: https://www.udemy.com/wordpress-for-beginners-create-a-website-blog-step-by-step/?couponCode=YOUTUBEDEAL 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. To view a complete list of the WordPress lessons in sequential order visit: http://learnwebcode.com/learn-wordpress/ 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): http://learnwebcode.com/wordpress-theme-development-navigation-menus/ Sign up for my newsletter to receive periodic webDev tips, tricks, resources and coupons. Join the list at http://learnwebcode.com/ Follow me on Twitter for updates and cat pics: https://twitter.com/learnwebcode
Html code for embedding videos on your blog
Text Comments (619)
Kermit Frog (1 month ago)
Simplicity. Clarity. You're a gifted teacher.
Sam A. (1 month ago)
Exceptionally helpful tutorial, which vid should I watch if I want to: 1. section a blog page (single.php) 2. add social media icons on the left side of the blog page Thank you
IfRedPing Play (1 month ago)
Worth To watched...but I have a query how can we edit a sub-menu style? like dropdowns etc
Gael Miles (1 month ago)
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.
Felipe Perestrelo (2 months ago)
Really really nice! Very well conducted, very didatic. Thanks!
mofidul islam (2 months ago)
Thanks!!! It's an amazing tutorial.
Grace Unlimited (2 months ago)
very helpful.
Hoang Van (2 months ago)
Thanks Admin for sharing. Get made beautiful flatome theme
Ahmad Ali (2 months ago)
this is the best toturial
fack id (3 months ago)
thank you so much, sir, for this support
Jose Alas (3 months ago)
Greetings from Falls Church ,VA.
Cyndi Kirkpatrick (4 months ago)
You are a very good teacher. Thank you for providing these lessons.
HTK ASD (4 months ago)
For those whose page is not getting updated at 8:12 , try "hard-refreshing" . First press Ctrl + f5 and then reload the page.
TrailData Analytics (5 months ago)
making an entry in functions.php cause "HTTP 500 ERROR"
Efrain Lemus (5 months ago)
Do you know how to change the order in which the pages show up? Similar to the WP_Query where you can choose 'orderby' => 'ASC'
WDCreativ (5 months ago)
Awesome Tutorial, Thanks !
Bruce (5 months ago)
hum May Iknow how you zoom in during recording ? or you edit after?
Reg Mainville (6 months ago)
Hi, i have a little problem, my menu are ok and work fine but at the start of my footer just under the separation i got a random line of code appearing which is $arg = array( ‘theme_location’ => ‘footer’ ); ?> did someone know how to get rid of it (displayed on my front end)
dragon story (5 months ago)
@Reg Mainville i saw it today....was going to tell you to check your code if you are missing <?php :D
Reg Mainville (6 months ago)
Don’t mind that question i just found my error after reading back the code a couple time, i was missing my <?php Thanks anyways
Jose Alas (6 months ago)
When I added <?php wp_nav_menu(); ?> I got sample page not the nav links. how can I fix this ?
dragon story (5 months ago)
you have create new pages by going to pages link on right of your wordpress tool and create new pages and delete the or change the name of sample page. as the <?php wp_nav_menu(); ?> will show the pages in your site....like home..about...links..contact...and all
CT-1138 (6 months ago)
You are doing a fantastic jobs with these tutorials. Thank you so much.
B. F. (6 months ago)
Man, this video was awesome! I learned a lot <3 New sub!
juerhe1 (7 months ago)
Hi and thanks a lot for your Videos! I am student in Bavaria and the cost of living increased in the Cities, so i have to open some kind of business to earn money beside my studies. Therefore i would need a very good SEO Website or SEO Wordpress Site , so that people can find me on googles ranking instead of paying a lot of money to get there. Could you or anybody here - please - help me finding the best SEO & MOBILE OPTIMIZED WEBSITE I COULD GET! It should be a clear and straight forward page , with minimal coding. Best Regards, Helen
jdit_nbg (7 months ago)
MidnightEkaki (8 months ago)
I think people should learn basics of HTML CSS & PHP coding before working on a Wordpress theme, my knowledge of the three languages makes this so much easier to learn, including all the painful self-troubleshooting Ive been through in the past lol. Anyway thanks so much for this tutorial, everyone wants Wordpress sites but I've always found it to be a pain using existing themes because they're hard to edit. Making my own is much better!
sonali varshney (8 months ago)
thanks a lot for this guidance it is very helpful for beginners
Erwin Dangan (8 months ago)
I really want to learn php and i will start here thank you so much
Yag _NikJ (8 months ago)
Pradeep Menaria (8 months ago)
Anyone knows which php version used and WP version ??
Denijal Kartal (8 months ago)
Very good lectures , helped me a lot. Hope you are working on more tutorials!
Benjaman Woolner (8 months ago)
Late to the party but following through your tutorials, find them easy to follow, well explained and narrated. I have however run into an issue when it comes to menu's. I've got a link in my main navigation which is a category containing many child sun categories. I was hoping that these would display as a drop down menu, taken care of by Wordpress, but this seems not to be the case. I instead have the parent link on a new line, as opposed to inline with all other site links, running the full width of the bodies content area, displaying all the child links underneath. Have you got any tutorial that can help me turn this into a working dropdown. I've tried to look for tutorials on the walker class but there doesn't seem to be any video that is clear to follow or easy to understand due to heavy accents/recording quality, Ideally I would love to create a set up where on a pc you could hover over the parent and a child list drops down, yet on a mobile the child list either remains hidden, accessible by clicking on the parent directly and being taken to a separate page, or that expands a mobile friendly menu in someway.
Michael Hackney (9 months ago)
It's funny that the content of the video is about Wordpress, but all the in-video ads and banners are Wix :D Who is winning?
Jemma Petrosyan (9 months ago)
you're genius! now I have clue what is a menu in wordpress
cottonmouth (9 months ago)
Hi! Enjoyed the tutorial but I really need help on the dropdown submenus. If you can help me. Thank you.
cottonmouth (9 months ago)
How about for sub menus?
Muhammad Monir Hosen (9 months ago)
This is a great and the best concept clearing tutorial for a beginner who wants to learn WordPress theme development like me.
Shubham Dobriyal (10 months ago)
page.php not working, anybody could help?
Mark Hallam (10 months ago)
I have seen so many tutorials on building one-level navigations but how can I build a multi-level responsive wp menu?
welkflingers (11 months ago)
You are a great teacher
White Avem (11 months ago)
IsaacA192 (11 months ago)
Why have they made it so when you have a navigation menu it's not just .your-class-name > ul > li instead they have the structure of .your-class-name > div > ul > li couldn't it just as easily be wrapped up in the <ul> tags instead of a div as well?
Go Ahead (1 year ago)
lovewordpressorg.xyz likes your nice explanations
Diana A (1 year ago)
Just wanted to drop a note to say thanks for these you are very thorough and I'm super impressed.
bighi seb (1 year ago)
The last part makes no sens to me. You are using a new file called "page.php" which also have the "while" loop that prints the posts, but no posts are printed, only the content of the page. BlueScreen in my head
Yure S (1 year ago)
que aula incrível! Parabéns e muito obrigado!
ganesh das (1 year ago)
Codingmaster (1 year ago)
while(alive){ eat(); sleep(); *CODE();* }
Hassan Tariq (1 year ago)
Can a person with html, css , bootstrap , JavaScript and jquery knowledge do word press development or php is compulsory? Need help ?
Pradeep Menaria (8 months ago)
Php is necessary friend
Karla Peña (1 year ago)
I am totally hooked.... if I go to your Udemy course, where should I begin after having watched some of these videos? I can't immediately do it because my card got stolen and I cannot buy anything on the net, but as soon as I get it, that is what I am going to get :)
ron reyes (1 year ago)
I can't seem to make this work. the one on 8:15 timestamp. Here's what I've written on my code: .site-nav ul { margin: 0; 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; }
ron reyes (1 year ago)
It seems like CSS is unstable in Wordpress. It worked after I tried doing a hard refresh.
prateek parate (1 year ago)
create a menu function in function.php after that menu appears in the appearance section. In appearance, section menu is not display.
King yao (1 year ago)
why dont u put out your code somewhere..
Harry Singh (1 year ago)
Hello , Kindly explain all code when you are copying the code. I have not understood the use of this code in style.css file. site-nav ul:before, .site-nav ul:after { content: ""; display: table; } .site-nav ul:after { clear: both; } .site-nav ul { *zoom: 1; } Kindly explain the use of this code?
Kemal Gençay (1 year ago)
@15:50 you mention .zip file that contains all the example code, but from where can I download it? TİA
Shahjahan Ali (1 year ago)
Nice...Sir..I am from Bangladesh
Ahmee98 (1 year ago)
i am not be able to downloading those zip files
mahmoud sabry (1 year ago)
i m not getting the menus option under the appearance menu in the dashboard..someone guyz help me plz..
coding ZhoSchool (1 year ago)
thank you so much. I learn something :) dude
peace GbG (1 year ago)
Best tuts ever. God bless you!!
Mike's Gaming (1 year ago)
I am getting a 500 server error when trying to view sample page.
Wai Chan (1 year ago)
Hi, Is your tutorial still relevant in 2018 ? I saw some recent WordPress tutorial are more easy. It just need to download Beaver Builder to build navigation. The whole website can complete within 1 hour. https://www.youtube.com/watch?v=1ETN9H9DnSg&t=321s
zaria lumsden (1 year ago)
Having trouble with my footer navigation, It disappeared.
brandon day (1 year ago)
if you are follwowing along, play this at 25% speed. the normal speed doesnt even seem natural. almost like he compressed this
Malick Cisse (1 year ago)
Can someone please explain this to me; .site-nav ul:before, .site-nav ul:after { content: ""; display: table; }
Tea (1 year ago)
I am completely confused, please help me someone. I can delete my whole style.css file and I cannot change the way the webpage looks. I have followed this far into the tutorial making changes to the css successfully, I had an error so I decided to delete some of the css to try to find which part was causing an error and it made no changes to the appearance of the website. So I tried deleting the css file and it made literally no difference to the appearance of the website. Can someone please tell me what is happening?
Tea (1 year ago)
ctrl+F5 reloads completely whereas the reload button on your browser may be reloading from a cache of some sort and not showing changes. I solved my problem this way.
Tea (1 year ago)
I have cleared the browser cache and the problem remains.
Maxi M. (1 year ago)
For those who are having problems with duplicating menus in primary and footer. Try adding an If statement so if there is no menu created in wordpress the region won't show up. Like this: <?php if ( has_nav_menu( 'primary' ) ) : ?> <nav class="nav-header"> <?php $args = array( 'theme_location' => 'primary' ); ?> <?php wp_nav_menu( $args ); ?> </nav> <?php endif; ?>
Carolin Olbrich (1 year ago)
I have a little issue with my nav menu. I entered the code like in the tutorial, but my menu bar came out like this: https://www.dropbox.com/s/sx9xtzsp7bi4m2w/nav%20menu.png?dl=0 I don't know where this little box come from. I can click on it and I come back to my mainpage Here is my stylesheet code: body { font-family: Arial, sans-serif; font-size: 14px; color: #333; } a:link, a:visited { color: #006ec3; } p { line-height: 1.65em; } /* General Layout */ div.container { max-width: 920px; margin: 0 auto; padding-left: 20px; padding-right: 20px; } /* Header */ .site-header { border-bottom: 2px solid #999; } /* Footer */ .site-footer { margin-top: 30px; border-top: 2px solid #999; } /* Navigation Menus */ .site-nav ul { margin: 0; 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; } /* Site Header Menu */ .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; } Please help me -_-'''
Marios Kexagias (1 year ago)
dude i have one problem .when i create this db and all news . why i cant see this in my official website? i use all the same... and we are in localhost. but how i can upload this db files from localhost to my official website?
Faizah al-Katheri (1 year ago)
This is by far the best coding tutorial I've ever seen. Thank you so much!
Adeel Saleem (1 year ago)
hi dear . option of menu is not appear in apperance .please tel me about this
Ábel Bodogán (1 year ago)
Great tutorial, thanks! ;)
Thanks a lot for the didactic tutorial. Greatings from Bogotá-Colombia Keep teaching!
Fahim Bakhtiar (1 year ago)
Excellent Explanation!!
Elitia Candy (1 year ago)
Done and it works very well. Thank you so much :*
Trending Course TV (1 year ago)
Menu is not showing in appearance Section Its too bad :/ I have tried many times can anyone fix it? // Navigation in Theme $nav=array( 'header'=> __( 'Header Menu','Learningskills' ), 'footer' => __( 'Footer Menu' 'Learningskills'), ) register_nav_menus($nav); ?>
makrand patne (1 year ago)
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.
flowerdemon (1 year ago)
Try Crtl+Shift+R for the refreshes. Took me an hour to figure that one out.
John Rhee (3 months ago)
This really helps. Thank you.
DINESH KUMAR (1 year ago)
Thanks for making a WordPress theme tutorial, it helped me a lot. Thanks......
This is crazy awesome!
Chris Bridle (1 year ago)
You saved my sanity, ill see you on udemy!
Azeem Afridi (1 year ago)
Hey, I'm not getting .current.menu.item to work - is there anything I'm missing?
Maryjon Zezulon (1 year ago)
Lol, wix again, bombarding me :) You are really very helpfull. I am programmer, who wants to see things fast, and from the start appearing from blank html page, into css styled wordpress theme. Thanks :)
Mamoo IT (1 year ago)
I love your tutorials. Thanks for this!
Scott Hedges (1 year ago)
when I add: // Navigation Menus register_nav_menus(array( 'primary' => --( 'Primary Menu'), 'footer' => --( 'Footer Menu'), )); I am getting Parse error: syntax error, unexpected within my localhost - can someone help?
Black Chim (1 year ago)
you used --() instead of __()
Patrick Cole (1 year ago)
Hi Scott. The error is with the double dashes you have provided before each of the parenthesis sections. The proper syntax is to use two underscores before the parenthesis. This is used for localization and the documentation can be found here: https://developer.wordpress.org/reference/functions/__/
Mi Les (1 year ago)
How to drop down?
H K (1 year ago)
how one can have page_id in the url?
Brooke McDonald (1 year ago)
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?
atif khan (1 year ago)
Thanks for the series, it really helpful.
mutavakkil (1 year ago)
i dont understand how to edit nav in css
NeoN Atenul (1 year ago)
Thank you for the tutorials!
James Summers (1 year ago)
Man, thanks for this! I'm learning a TON!
Charles Yaafi (1 year ago)
You are very, very good. Excellent!!
Stefano D'Alessandro (1 year ago)
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?
And Kor (1 year ago)
page.php not working for me
Ryan Griffiths (1 year ago)
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
Christopher Moose (1 year ago)
Do you know of any good tutorials that show how to make drop down submenus and mobile drop down menus without resorting to plugins?
eden (1 year ago)
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!
Elitia Candy (1 year ago)
For those having problem after 08:12, try to hard refresh : ctrl + F5 Good luck
Thank you so much for this, it was giving me a HEADACHE
Faeza Suhaimi (4 months ago)
Giorgio Vitanza (1 year ago)
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:....... ???
Giorgio Vitanza (1 year ago)
I've noticed that if i float the li items without giving this command - ".site-nav ul:before, .site-nav ul:after { content: ""; display:table; } .site-nav ul:after { clear: both; } .site-nav ul { *zoom: 1; }" - will put the ul after the border-bottom, but I can't explain myself why since the nav is in the header, and the border-bottom should be on the bottom of the header, by default, no? If you could explain me this it would be appreciated...
Romy Kim (1 year ago)
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 ?
Romy Kim (1 year ago)
Thanks for the reply. I'll just remember the applications. In fact, this is the first time and only time I saw this => thingie. You're a great teacher !!! Ah, if I may request, can you please do a series on "modifying" a given theme ? I guess it'll be more useful to much more people in Wordpress arena since I guess quite a bit of people migrated to WP due to easier "entry" then gets frustrated they can not make it look the way they want.
LearnWebCode (1 year ago)
Hmmm, good question. In JavaScript we call that symbol the "arrow function" but that name doesn't make sense with PHP & arrays. I'm not sure what its official name is; I'd say "PHP array arrow" if I had to make up a name. Even on the official php.net website on the array page I don't see a name. I just know it's used to create key/value pairs. If anyone knows the name let us know!
Romy Kim (1 year ago)
Thanks. Does it have a name ? It was something I can't use google to search on as it might be too short/simple.....
LearnWebCode (1 year ago)
Hi, the "=>" is how you assign name/value pairs in associative arrays in PHP.
Adnan Najeeb (1 year ago)
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.

Would you like to comment?

Join YouTube for a free account, or sign in if you are already a member.