As I watched along to this I pulled open all of my normal themes and starter themes, and tried to understand the walker class coding decisions they made and how I can edit or customize them in the future. Thank you so much for explaining this in just a digestible way.
Awesome to hear, I'm glad I was able to shed some light. You can further study the walker nav class and learn how to drastically customize it by following the WordPress Mega Menu tutorial. Cheers
+Blue Lotus Media (US) I'm glad it worked out smoothly for you. The Walker Nav Class is a pretty complex part of WordPress, but after cracking it, it's pretty straightforward. Thanks for watching
+Eric Kim Yes, it's definitely long and difficult, but I'm really happy I was able to help you and let you understand this powerful WordPress Class. Happy Coding!
Thanks a lot for this great tutorial. Watching this two video about walker class almost 5 times. I was confused almost 2 and half years about walker class. Many of tutorial I watch about walker class but those are not good enough. You just clear my mind about this topic.. :)
+Nafeul Rifat awesome, I'm glad I was able to bring clarity to this topic. If you want, you can check the Build a WordPress MegaMenu series to learn more cool stuff about the Walker class, and how to customize the menu in the admin dashboard. Cheers
Even though your videos (part 14 and 15) weren't enough for me, I have to say: thank you. After the videos I read and learned as much as I could in the WordPress Codex. Now I can use the code to my will, but still man... some parts are still a bit of a mystery. They've made this sh*t really cumbersome. Cheers!
...and again... THANK YOU !!! This was a good video. I hope you understand that when you do mistakes, typos and other errors it's very good that you leave it in the videos like you do? I like the parts when I can follow you trying to fix the "problems". Now I'm going to jump on the next video in the best series ever. This is better than "The Walking dead" ...LOL
+jellycoding I think it's better than the Walking Dead only because no one dies in here :D Thank you so much for this amazing comment, and I'm glad you like the fact that I don't edit out mistakes or typos but I fix them in the video. Happy Coding!
This is really a complicated one! but I love that you explained it and I will revisit this video again soon to really understand it again and again till I get it.. though I'm not sure I will haha.. :) Lets hope I do!
+Adnan Usman It took me 2 weeks to understand this topic by myself, and I still make huge mistakes while I edit the Walker Class. It's really complicated, but you can totally do it. Never stop, never surrender! Happy Coding :D
Hi and congratulation! I have some question: 1) how to remove completely from the menu (i am using for my layout just rather than and rather than 2) how to change the containing the sub-menu with a instead 3) how to add a container just before the containing the sub-menu and close it after the sub-menu entries thank you!
Oh, it is working, Thank you soooooo much for this tutorial, I was wondering at earlier tutorial, "Is he going to make the dropdown menu as the bootstrap?" but YOU DID IT !!!!, and it it works, just the animated part at bootstrap is missing here when I click on the dropdown menu, but that's ok, I will keep watching your tutorial series and maybe you cover that also, Again Thank you soooooo much :D
+Melvy Yes, the Walker Nav Class can be a total nightmare, but it'll make sense, sooner or later. Thank you so much for your passion and perseverance! Happy Coding.
Great tutorial, I know this is a old tutorial but I need your help with some parts of the code. $depth is returning null at the first dropdown menu level.
Hello, thanks for this great tutorial. But my links stopped working since I did this, how to fix it ? and how would I be able to customize the css of the "a" tag inside the dropdown, for exemple changing the background color on hover?
i think at some point you forget to mention that the nnav_menu hook need to have "'walker' => new Walker_Nav_Primary()" in its array...cuz it made me scratch my head for half an hour! XD beside that this is an amazing serie
hey Alessandro.This walker class only works with dropdown-menu(single dropdown),It is not working with dropdown-submenu.It would be really helpful if you fix this issue.Will be looking forward for your updated walker class tutorial.Thanks in advance.
Actually in my opinion Alessandro you should have gave us the output of the function since many of us are ble to write it in different ways. For this lesson we were trying hard to understand what you're doing without knowing the actual outcome which is so confusing . Thanks a lot !
Hi there, Thnanks for the video! I have one issue. The parent elements with dropdowns are not clickable. Meaning that the dropdown opens, but I need to original element to be clickable as well as it has an href. Is there an easy solution to this that someone stumbled across?
Thanks for your efforts Alessandro. To me your videos are really helpful. Why did we not cascade $classes just like $attributes variable (using ".=" symbol) instead of defining it as an array?
Thanks for this great playlist! Alessandro, I have got a question for you: how to correctly add a css style to a bootstrap based wordpress menu? As far I can see, there are a lot of classes, but sometime it's frustrating to inspect each single element... How about a video tutorial? :D
+Francesco Lombardi Thank you for your comment. I'm not sure I understand your question. Bootstrap splits the classes and hierarchy of a menu structure in a really elegant and systematic way. You should follow that structure to update your css. That amount of styles and classes is not without a really specific purpose and reason. Happy Coding!
Thanks for the great tutorials. I'm working with the newest wordpress and bootstrap 5, but have been able to make the needed tweaks to get the same results as you. Unfortunately I seem to be having an issues in the walker class (line 64 in the Git file). The part of string that has 'class="dropdown-toggle"' is not completely working. The attributes in the rest of the string are set, but there is only class="nav-link" in the .
Thank you for this tutorial. It works well if you have only 1 sub-menu. Can you make a video or upload a code snippet in your github on how to have a dropdown menu within a dropdown-menu. I mean a multi level dropdown menu. Thank would be great Alessandro. Thanks. :)
Hi Alessandro. Unfortunatelly even if i downladed the latest version from GitHub, few errors exists in front and back end of the site. I guess that this happens due to the gap of WordPress versions (2015-2018). I have to searh on my own. Nevertheless, thank you for your effort.
Al & Friends, the $indent creation string in the walker class functions; must use "\t", DOUBLE PARENTHESIS, not Singles. I had a rogue \t in my dropdown menu and even though it worked, it really bugged me... figured it out and it seems to me, that was it.. FYI and as always muchO Thanks to AL.
Hi, thanks for watching. I've been coding with WordPress for the past 10 years, slowly learning these things, reading the documentation, and reading books about it (yes, I'm that old).
Thanks for your comment. This is a series for beginners and everything is really basic. Next morning nth I will start a more advanced series to build premium themes. Keep following
Hi, Alex. That's an amazing course you threw in here. Thank you for that. And I have a question. What kind of syntax is this "(array) $item->classes" ? What does it mean, could you explaine? (Line 42 in walker.php source code)
Hi. Thanks for the tut. I tried to follow all steps and achieved the walker but one thing is bothering me: Bootstrap classes like "nav-item and nav-link are not in". I tried my way but I don't know if that is OK. Please check the line below [$attributes .= ( $args->walker->has_children ) ? ' class="dropdown-toggle nav-link" data-toggle="dropdown"' : ' class="nav-link"';] Following the tut, I checked if has_children then apply dropdown-toggle and nav-link, else apply only nav-link just to give the menu the bootstrap styling. I just tried ...
Thanks so much for these tutorials, they're brilliant. One question - and sorry if it's been covered elsewhere - what changes are required to the menu markup in header.php to make it work with Bootstrap 4? Thanks again.
hey thanks Alex for the tutorial. But I couldn't catch the point - how can we drill down to one more level in the case of drop-down menus? Suppose i have 4 menu drill-downs like Menu 2 under Menu 1, then Menu 3 under Menu 2 and Menu 4 under Menu 3; that is Menu1 => Menu2 => Menu3 => Menu4.
Thanks Alessandro for the wonderful video. I copied the walker.php from your github repository and used in my bootstrap based theme. But i am finding a problem. When an item in top level menu is a page and it has children, in that case upon clicking the top level item it takes to the page and not show up the submenu. Where did i make mistake?
Hi Alessandro! Thank you very much for your amazing videos! Sei troppo bravo! :D It is amazing that you have time for everything! I don't know how you do it! I have a question, I followed all the tutorial but at the end, the down arrow appears but when I clicked the subitem does not appear. I changed my walker.php with your 22 tutorial file but nothing. My menu is appearing with arrow but it still doesn't have the subitem. My menu has one subitem, exactly as yours, but it is not appearing. in the inspector says =$0 :( Do you have any idea of what could be?
Hi, thanks for watching my videos. So, in the inspector it prints =$0? That shouldn't happen. Are you sure all your files are like mine? What about the header.php where you're calling the menu?
Thank you for the answer. Yes, I also replaced that. the only different thing that I have to include in the header was the bootstrap link because it wasn't working only including it in the functions.php, so I leave in the header. But it is the only difference:
I had the same issue because of display: none. I solved it by adding this code to my style.css file: ul li:hover > ul, ul li ul:hover { visibility: visible; opacity: 1; display: block; }
Hey man,Thanks for the vid, as alwaysOne question,if my submenu.. has a submenu -> it disappears from the menu, instead of making a sub of the sub maybe it will come later in your tut? Thanks:)
+Archievald Quiambao Yes, it's possible. You have to extend a bit the walker class to manage second level submenus, and use or Javascript or CSS, based on what you feel more comfortable to use
Dear Alex, Thanks for the lesson. I have a question. When I want to click on the triangle dropdown menu I will recieve this error instead: Object not found! The requested URL was not found on this server. The link on the reffering page seems to be wrong or outdated...
+Ro sha Hi, that error most likely means that your dropdown link is pointing to a page, and not opening the actual dropdown. Are you sure the code matches with mine and you properly integrated the js of bootstrap? Keep coding, you will succeed!!!
hi, i don't know why but this walker class only providing me only 1 sub-menu per MENU ! when i set the 2nd sub-menu, nothing happens ! example: Package > Sub Package > Package Number 1 the "Package Number 1" isn't appearing for me ! I only can see up to "Sub Package". how can i solve this ??
After this lesson had no other choice, but to downgrade my level to pre beginner :)) But thanks anyway. Will have a reason to come back to this lesson later with good enough php skills.
Hello Alessandro I did all thing correct but I got a mistake like this: alker_Nav_Primary::start_lvl(&$output, $depth) should be compatible with Walker_Nav_Menu::start_lvl(&$output, $depth = 0, $args = Array) in /Applications/MAMP/htdocs/wordpress/wp-content/themes/myblog/inc/walker.php on line 85 Do you have any idea why I'm getting this kind of mistake? I viewed many times but I didnt find :(
+Pir Mera Hi, sorry about that, I did this video more than 1 year ago the Walker class was updated. Now wordpress requires default declarations for every attribute. This is the updated and functional code -> github.com/Alecaddd/WordPress101/blob/master/lesson_22/inc/walker.php
well, add those 2 parameters to the function. You don't have to use them but because you're creating a EXTEND/copy of that other class it expects to find them. so just add the $arg and the $depth parms. Presto !!!
Can I get the css for this? I am not using bootstrap so want to figure it out using another menu system? Can you suggest one to replace bootstrap with?
Hi again! I have a problem with the submenu. if i click over dropdown this not show me the submenu it redirect to the page of , does not display the submenu. Help please. greetings from Venezuela!
Hey Alex It is a good experience to follow your code line by line. I need a favor. could you develop a mega menu in walker class? and BTW your doing a great work... keep it up.
Hi, thank you so much for following. Yes, I will definitely do that tutorial, a lot of users requested it and it's a resource currently missing out there. Cheers
Hello Alessandro! I'm just wondering, since in the Admin area of WOrdPress I'm trying to add a custom class to my menu. However the code that I wrote is this: ``` // Walker Class Nav Menu class Primary_Walker_Nav_Menu extends Walker_Nav_Menu { function start_el( &$output, $item, $depth = 0, $args = array(), $id = 0 ) { if ( array_search( 'menu-item-has-children', $item->classes ) ) { $output .= sprintf( " %s ", ( array_search( 'current-menu-item', $item->classes ) || array_search( 'current-page-parent', $item->classes ) ) ? 'site-nav__item--active' : '', $item->url, $item->title ); } else { $output .= sprintf( " %s ", ( array_search( 'current-menu-item', $item->classes) ) ? ' class="site-nav__item--active"' : '', $item->url, $item->title ); } } function start_lvl( &$output, $depth ) { $indent = str_repeat( "\t", $depth ); $output .= " $indent "; } } ``` And the class doesn't add, which makes me to think that I need something in there that will look for if the class is added in the admin area I suppose? Or? Not sure how to solve this : p the code works, I just can't put in a custom class via admin, as the code won't show in the HTML.
I suggest taking a look at my series on How to Build a WordPress Mega Menu. The walker nav class can be a bit annoying sometimes but in that series, I show everything in order to customize the menu, and also the admin menu.
I've made all of my site with your AWESOME videos! I have a minor problem about that sub menu so it won't open as a sub menu. What should i do about it?
Sorry for my question but doesn't the start_lvl edit the which is a submenu? For context: I tried putting a string in $output and it only showed up when I had a submenu (depth>1). So essentialy the if you did is useless? Maybe I am wrong tho, great tutorials btw :)
Great video, thanks a bunch! PHP still throws me a parsing error though: Parse error: syntax error, unexpected ''sub-menu'' (T_CONSTANT_ENCAPSED_STRING) ... any idea?
Hmm...I think there's an "?" missing in the if statement before'sub-menu' right? But when I put that in, I get :" Parse error: syntax error, unexpected '?> ', expecting function (T_FUNCTION) or const (T_CONST)"
Hi alecadd , how to manage for 3rd level menu , on hovering the parent my submenu and next level submenu opens both at same time , but when I scroll through submenu then it works fine, I think due to drop down class coming in third level it is behaving so , plz tell me what can be done
Hi, great like always - however, there's another typo in there: "current_item_anchestor" instead of "current_item_ancestor", so the top item will not be marked active when a sub item is active!
first there is a string of classes which is constructed by joining the array into the $class_names, after that there is a class "dropdown-toggle" added in the $attributes. Could it be because the first ones are related to wordpress css and the latter one is related to bootstrap? Anyway being not an experienced wordpress programmer I don't understand why the joining of the classes has to go through apply_filter nav_menu_css_class? What is happening during that process?
Not sure I get your question, sorry. The wp_nav_menu of WordPress generates the HTML automatically and we can't handle that without using the walker nav class or tapping a specific filter that let us access a predefined configuration of WP. Does this answer your question?
Hi Alessandro. Thank you for your reply. I can understand what wp_nav_menu does, but looking through your clip and looking on other sites to understand how walker class works I saw that there is a string joining of the classes array ($class_names = join(" ", apply_filter('nav_menu_class_css', array_filter($classes),$item, $args)). I was wondering why you cannot do just $class_names = join(" ", $classes). I don't understand what is the necessity of apply_filter('nav_menu_class_css', array_filter($classes),$item, $args). Maybe it's a stupid question but I don't get it. Thanks
I have a php problem: Warning: Declaration of Walker_Nav_Primary::start_lvl(&$output, $depth) should be compatible with Walker_Nav_Menu::start_lvl(&$output, $depth = 0, $args = Array) in C:\wamp64\www\wordtest\wp-content\themes\awesometheme\inc\walker.php on line 0 What can I do for this?
I've assigned a zero value to the depth variable passed by start_lvl function, and added this variable too :$args = array(). Now it seems to works fine. So rewrite this line as this: function start_lvl( &$output, $depth = 0, $args = array() ){ //ul ... } Hope it works for you as well.
Hi, I've been using your walker.php file exactly for the last while now, and it's been working great. All of a sudden, I'm getting this error in an updated Wordpress site: "Walker_Main_Nav::start_lvl(&$output, $depth) should be compatible with Walker_Nav_Menu::start_lvl(&$output, $depth = 0, $args = Array) in /home2/patricz6/public_html/wp-content/themes/my-theme/inc/walker.php on line 71" Can you help?
I figured out that it was because it was not compatible with php 7. Not sure why exactly yet. If you have any patches let me know. Otherwise, I'm fine with using php 5 for now.
I updated my Git repo with a compatible version of the walker class. basically the only difference is that the new version requires the declaration of a default value for all the variables initialized in the method. Check my GitHub repo and you'll find the updated code.
Alex, please help. My code is working but I don't have multi-level submenus, if you know what I mean. I can't create submenu of a submenu. Did I've done something wrong or just this code is for 1 level submenu. Then, how to create multilevel submenus, in this tut like I would have submenu of contact? Thnx... BTW, GREEEAAAATT tutorial...
Hi, thanks for watching. This code is just for 1 level of menu, but you can extend the Walker Nav Class to accept multiple levels of indentation. Check this source code if you need help: github.com/giorgiosaud/bootstrapNavWalker
Ales, thank you so much for your fantastic, awesome tutorial. I've learned alot so far. I know I am late to the party but I have a question/problem. I completed this tutorial (and actually copied your walker.php code and pasted it into my inc directory so I eliminated any typ-os I might make). The question is: Should I be able to have more than one level of sub-menu ? If so, then the problem I have is that I am only getting one level of sub-menu. For instance I have the following in my Appearances;Menus page for the menu hierarchy: Main Thing Sub Thing Sub Thing One The Nav bar shows me "Main Thing" with a caret and when I click it the drop down "Sub Thing" with a caret is displayed (as expected) BUT when I click "Sub Thing" the only thing that happens is that the drop down disappears. What I expected to happen is that when I click on "Sub Thing" the menu item "Sub Thing One" would appear. Am I expecting the wrong thing ?
Thanks for making this video. I have copied your walker.php code but the submenu are not showing. The arrow that indicate the submeny shows, but not the submenu itself.
Hi Awesome Alessandro, thank you for your videos, just want to ask if the walker updated again? because this is not working. Everything disappeared including the admin bar on top. The only thing left is the container of menu and the logo class Walker_Nav_Primary extends Walker_Nav_menu { function start_lvl( &$output, $depth = 0, $args = array() ){ //ul $indent = str_repeat("\t",$depth); $submenu = ($depth > 0) ? ' sub-menu' : ''; $output .= " $indent "; }
I'd suggest checking my WordPress Mega Menu Playlist. I basically code everything using the Walker Nav Class and I go really deep in explaining it. I hope it'll help. Cheers
Check my source code on GitHub and check if you're using the latest version of Bootstrap, as some class names and syntax is different from what I used.
Thank You So Much Alessandro Castellani if anyone see this warning : Warning: Declaration of Walker_Nav_Primary::start_lvl(&$output, $depth) should be compatible with Walker_Nav_Menu::start_lvl this is because nav menu walker codes is old so you would use this code: function start_lvl(&$output, $depth = 0, $args = NULL){...
This is what you need to do in function start_lvl " function start_lvl( &$output, $depth =0, $args= array()) "so problem is that a lot change since he did this and you need to put in your start_lvl what warning is telling you
Your series is the most complete guide on wordpress theme developement on youtube.
When I watched the videos (Walker class) second time, it's all started taking shape in my mind. Beautifully explained...Thanks...
You're very welcome!
As I watched along to this I pulled open all of my normal themes and starter themes, and tried to understand the walker class coding decisions they made and how I can edit or customize them in the future. Thank you so much for explaining this in just a digestible way.
Awesome to hear, I'm glad I was able to shed some light. You can further study the walker nav class and learn how to drastically customize it by following the WordPress Mega Menu tutorial. Cheers
And so, a legend is born, and a new name is added to the roster of those who make the world of fantasy the most exciting realm of all!
Thank You for the lessons Alessandro.
These Walker lessons made me feel like a Walker indeed.
+Felipe Paes Let's walk all together in the happy coding place :D
I followed along through the whole tutorial, and it's complex, but it works. You're a genius.
+Blue Lotus Media (US) I'm glad it worked out smoothly for you. The Walker Nav Class is a pretty complex part of WordPress, but after cracking it, it's pretty straightforward. Thanks for watching
it's long and difficult.. I was almost lost in the middle. but at the end, magic just happened! Thank you for your nice and kind lession
+Eric Kim Yes, it's definitely long and difficult, but I'm really happy I was able to help you and let you understand this powerful WordPress Class.
Happy Coding!
Thanks a lot for this great tutorial. Watching this two video about walker class almost 5 times. I was confused almost 2 and half years about walker class. Many of tutorial I watch about walker class but those are not good enough. You just clear my mind about this topic.. :)
+Nafeul Rifat awesome, I'm glad I was able to bring clarity to this topic. If you want, you can check the Build a WordPress MegaMenu series to learn more cool stuff about the Walker class, and how to customize the menu in the admin dashboard.
Cheers
these two lessons about walker class made my brain hurt
+Mario Purisic Mine is permanently damaged >_>
+Alessandro Castellani hahah if it helps learn php and wordpress I'm on board! :D
Same here. I understand the purpose of it and I feel it's super important, but yeah. Mainy the predefined functionalities of WP is making it difficult
It is ALIVE! I absolutely love you, Alex! Your tutorials are the best out there!
Thank you so much for watching, I'm glad it was helpful for you :D
Even though your videos (part 14 and 15) weren't enough for me, I have to say: thank you. After the videos I read and learned as much as I could in the WordPress Codex. Now I can use the code to my will, but still man... some parts are still a bit of a mystery. They've made this sh*t really cumbersome.
Cheers!
Thanks for watching, I'm glad I was able to bring a bit of clarity.
Happy Coding :D
Thank you for the good explanation of the walker
...and again... THANK YOU !!!
This was a good video.
I hope you understand that when you do mistakes, typos and other errors it's very good that you leave it in the videos like you do? I like the parts when I can follow you trying to fix the "problems".
Now I'm going to jump on the next video in the best series ever. This is better than "The Walking dead" ...LOL
+jellycoding I think it's better than the Walking Dead only because no one dies in here :D
Thank you so much for this amazing comment, and I'm glad you like the fact that I don't edit out mistakes or typos but I fix them in the video.
Happy Coding!
Thank You So Much For Those Great Tutorials, I'm Doing Very Well with Wordpress Because of You .
Awesome to hear that, Happy Coding :D
A thumbs up for you even though i can't understand fully
Great content, this is becoming my favorite channel
Oh wow, thank you so much. I hope to improve the quality of my content. Thank you for following
I am From Egypt , and I love Your lessons ^_^
Thank you so much!
Thanks Alessandro for your valuable time for making this great tutorial ....you have unique teaching skill. 😀
This is really a complicated one! but I love that you explained it and I will revisit this video again soon to really understand it again and again till I get it.. though I'm not sure I will haha.. :) Lets hope I do!
+Adnan Usman It took me 2 weeks to understand this topic by myself, and I still make huge mistakes while I edit the Walker Class. It's really complicated, but you can totally do it. Never stop, never surrender! Happy Coding :D
Thanks for publishing part 2 menu editing tutorial.
It's a pleasure!
Thanks a lot. This lesson very help me to understand the process. Again thanks. :)
Awesome video that saved my day - and night!! Thank you so much for making this :)
Happy to be helpful.
It's Ama-a-a-a-azing!!! And so Cool!!!!
You are the God of Happy Coding!!! THANK YOU :)
Thank you so much :D
You are Best man Seriously one-word for you and that is "GENIUS" :) :)
Awww, thank you so much :D
Hi Alessandro,
Really great video that was extremely thorough and explained everything really well - thank you for your help! :-)
It's amazing! So thankful! you're the best!
Hi and congratulation! I have some question:
1) how to remove completely from the menu (i am using for my layout just rather than and rather than
2) how to change the containing the sub-menu with a instead
3) how to add a container just before the containing the sub-menu and close it after the sub-menu entries
thank you!
Oh, it is working, Thank you soooooo much for this tutorial, I was wondering at earlier tutorial, "Is he going to make the dropdown menu as the bootstrap?" but YOU DID IT !!!!, and it it works, just the animated part at bootstrap is missing here when I click on the dropdown menu, but that's ok, I will keep watching your tutorial series and maybe you cover that also, Again Thank you soooooo much :D
You're very welcome :D
as of BootStrap 5 you need to write
data-bs-toggle="dropdown"
instead of
data-toggle="dropdown"
damn it. this is the hardest so far but I will persevere through these through this lesson
+Melvy Yes, the Walker Nav Class can be a total nightmare, but it'll make sense, sooner or later.
Thank you so much for your passion and perseverance!
Happy Coding.
Awesome brother you are to good love you and salute for these tutorials.. :)
Thank you so much
I just copy your smile sign >_> XD..
Great tutorial, I know this is a old tutorial but I need your help with some parts of the code. $depth is returning null at the first dropdown menu level.
Great explanation. Now if i can just manage without any typos. Wish me luck. 😂
Thanks you are gone my favorite word press channel
Thank you so much
Hello, thanks for this great tutorial. But my links stopped working since I did this, how to fix it ? and how would I be able to customize the css of the "a" tag inside the dropdown, for exemple changing the background color on hover?
i think at some point you forget to mention that the nnav_menu hook need to have "'walker' => new Walker_Nav_Primary()" in its array...cuz it made me scratch my head for half an hour! XD beside that this is an amazing serie
hey Alessandro.This walker class only works with dropdown-menu(single dropdown),It is not working with dropdown-submenu.It would be really helpful if you fix this issue.Will be looking forward for your updated walker class tutorial.Thanks in advance.
Actually in my opinion Alessandro you should have gave us the output of the function since many of us are ble to write it in different ways. For this lesson we were trying hard to understand what you're doing without knowing the actual outcome which is so confusing . Thanks a lot !
Mh, sorry if it's not clear. Unfortunately, the Walker Class is one of the complicated aspects of WordPress.
Cheers
Loving these tutorials so far! Is there a way to make the sub menu load on a hover instead of requiring a click?
codepen.io/bsngr/pen/frDqh
Thanks a bunch! :)
Hi there,
Thnanks for the video! I have one issue. The parent elements with dropdowns are not clickable. Meaning that the dropdown opens, but I need to original element to be clickable as well as it has an href. Is there an easy solution to this that someone stumbled across?
Thanks for your efforts Alessandro. To me your videos are really helpful. Why did we not cascade $classes just like $attributes variable (using ".=" symbol) instead of defining it as an array?
Thanks for this great playlist! Alessandro, I have got a question for you: how to correctly add a css style to a bootstrap based wordpress menu? As far I can see, there are a lot of classes, but sometime it's frustrating to inspect each single element... How about a video tutorial? :D
+Francesco Lombardi Thank you for your comment.
I'm not sure I understand your question.
Bootstrap splits the classes and hierarchy of a menu structure in a really elegant and systematic way. You should follow that structure to update your css. That amount of styles and classes is not without a really specific purpose and reason.
Happy Coding!
thank you for the great videos bro
Thanks for watching!
Thanks for the great tutorials. I'm working with the newest wordpress and bootstrap 5, but have been able to make the needed tweaks to get the same results as you. Unfortunately I seem to be having an issues in the walker class (line 64 in the Git file). The part of string that has 'class="dropdown-toggle"' is not completely working. The attributes in the rest of the string are set, but there is only class="nav-link" in the .
Figured it out. A function aswome_modify_menuclass was setting the class and overriding the one that was set in walker.php.
Is the array_filter($classes) step only to ensure that only true (or maybe the ones that we have defined) go into the apply_filters function?
Thank you for this tutorial. It works well if you have only 1 sub-menu. Can you make a video or upload a code snippet in your github on how to have a dropdown menu within a dropdown-menu. I mean a multi level dropdown menu. Thank would be great Alessandro. Thanks. :)
Sure, in an upcoming lesson I will code a fully functional nav class to build multilevel submenus and mega menus.
Cheers
Thank you Alessandro. I will be waiting for it then. :)
Hi Alessandro. Unfortunatelly even if i downladed the latest version from GitHub, few errors exists in front and back end of the site. I guess that this happens due to the gap of WordPress versions (2015-2018). I have to searh on my own. Nevertheless, thank you for your effort.
Al & Friends, the $indent creation string in the walker class functions; must use "\t", DOUBLE PARENTHESIS, not Singles. I had a rogue \t in my dropdown menu and even though it worked, it really bugged me... figured it out and it seems to me, that was it.. FYI and as always muchO Thanks to AL.
Thank you for flagging that out, I'm sure it'll be helpful for everyone!
Wow thank you for this information.
thanks for this super important information
You mean double quotation marks? "\t" instead '\t' ?
Thanks for your great tutorials!Could you please make a tutorial on how to add widget post image and video in the menu using walker class?
I'm starting a WP Mega Menu tutorial soon :D
This video is like women hard to understand , really complicated. Hey man, you are doing a great job.
Thanks a lot for ur tutorials brother,
Can i know what was your approach of learning all these ? just curious
Hi, thanks for watching.
I've been coding with WordPress for the past 10 years, slowly learning these things, reading the documentation, and reading books about it (yes, I'm that old).
wow, i wish i had started learning core wordpress earlier, wasted 7years so far :(
i'm always follow the tutorials but i want you make it complete responsive and premium till we be learned as well great job allesso
Thanks for your comment. This is a series for beginners and everything is really basic. Next morning nth I will start a more advanced series to build premium themes. Keep following
Hi, Alex. That's an amazing course you threw in here. Thank you for that. And I have a question. What kind of syntax is this "(array) $item->classes" ? What does it mean, could you explaine? (Line 42 in walker.php source code)
Hi, did you figure it out?
Hi. Thanks for the tut. I tried to follow all steps and achieved the walker but one thing is bothering me: Bootstrap classes like "nav-item and nav-link are not in". I tried my way but I don't know if that is OK. Please check the line below
[$attributes .= ( $args->walker->has_children ) ? ' class="dropdown-toggle nav-link" data-toggle="dropdown"' : ' class="nav-link"';]
Following the tut, I checked if has_children then apply dropdown-toggle and nav-link, else apply only nav-link just to give the menu the bootstrap styling.
I just tried ...
Thanks so much for these tutorials, they're brilliant. One question - and sorry if it's been covered elsewhere - what changes are required to the menu markup in header.php to make it work with Bootstrap 4? Thanks again.
hey thanks Alex for the tutorial. But I couldn't catch the point - how can we drill down to one more level in the case of drop-down menus? Suppose i have 4 menu drill-downs like Menu 2 under Menu 1, then Menu 3 under Menu 2 and Menu 4 under Menu 3; that is Menu1 => Menu2 => Menu3 => Menu4.
Check Alessandro Castellani Mega menu tutorials
th-cam.com/play/PLriKzYyLb28kOy7z2CoJgcZp7dL1OKbPN.html
Thanks Alessandro for the wonderful video. I copied the walker.php from your github repository and used in my bootstrap based theme. But i am finding a problem. When an item in top level menu is a page and it has children, in that case upon clicking the top level item it takes to the page and not show up the submenu. Where did i make mistake?
Hi Alessandro! Thank you very much for your amazing videos! Sei troppo bravo! :D It is amazing that you have time for everything! I don't know how you do it! I have a question, I followed all the tutorial but at the end, the down arrow appears but when I clicked the subitem does not appear. I changed my walker.php with your 22 tutorial file but nothing. My menu is appearing with arrow but it still doesn't have the subitem. My menu has one subitem, exactly as yours, but it is not appearing. in the inspector says =$0 :( Do you have any idea of what could be?
Hi, thanks for watching my videos.
So, in the inspector it prints =$0? That shouldn't happen. Are you sure all your files are like mine? What about the header.php where you're calling the menu?
Thank you for the answer. Yes, I also replaced that. the only different thing that I have to include in the header was the bootstrap link because it wasn't working only including it in the functions.php, so I leave in the header. But it is the only difference:
@@alecaddd I have the same issue
I had the same issue because of display: none. I solved it by adding this code to my style.css file:
ul li:hover > ul,
ul li ul:hover {
visibility: visible;
opacity: 1;
display: block;
}
Hey man,Thanks for the vid, as alwaysOne question,if my submenu.. has a submenu -> it disappears from the menu, instead of making a sub of the sub
maybe it will come later in your tut? Thanks:)
add this on your css
.dropdown-submenu{position:relative;}
.dropdown-submenu>.dropdown-menu{top:0;left:100%;margin-top:-6px;margin-left:-1px;-webkit-border-radius:0 6px 6px 6px;-moz-border-radius:0 6px 6px 6px;border-radius:0 6px 6px 6px;}
.dropdown-submenu:hover>.dropdown-menu{display:block;}
.dropdown-submenu>a:after{display:block;content:" ";float:right;width:0;height:0;border-color:transparent;border-style:solid;border-width:5px 0 5px 5px;border-left-color:#cccccc;margin-top:5px;margin-right:-10px;}
.dropdown-submenu:hover>a:after{border-left-color:#ffffff;}
.dropdown-submenu.pull-left{float:none;}.dropdown-submenu.pull-left>.dropdown-menu{left:-100%;margin-left:10px;-webkit-border-radius:6px 0 6px 6px;-moz-border-radius:6px 0 6px 6px;border-radius:6px 0 6px 6px;}
hello alecadd, it is possible to have hover effect in submenu? for example I hover the contact us then it will automatically show the submenu
+Archievald Quiambao Yes, it's possible. You have to extend a bit the walker class to manage second level submenus, and use or Javascript or CSS, based on what you feel more comfortable to use
Dear Alex, Thanks for the lesson. I have a question. When I want to click on the triangle dropdown menu I will recieve this error instead:
Object not found!
The requested URL was not found on this server. The link on the reffering page seems to be wrong or outdated...
+Ro sha Hi, that error most likely means that your dropdown link is pointing to a page, and not opening the actual dropdown. Are you sure the code matches with mine and you properly integrated the js of bootstrap?
Keep coding, you will succeed!!!
hi, i don't know why but this walker class only providing me only 1 sub-menu per MENU ! when i set the 2nd sub-menu, nothing happens !
example: Package > Sub Package > Package Number 1
the "Package Number 1" isn't appearing for me ! I only can see up to "Sub Package".
how can i solve this ??
After this lesson had no other choice, but to downgrade my level to pre beginner :)) But thanks anyway. Will have a reason to come back to this lesson later with good enough php skills.
Nah, you don't need to downgrade your level, thanks to this lesson it should increase :D
Thanks for watching
I'm so confused on this topic. Can you make it simple using the latest codes from the codex?
Hello Alessandro
I did all thing correct but I got a mistake like this:
alker_Nav_Primary::start_lvl(&$output, $depth) should be compatible with Walker_Nav_Menu::start_lvl(&$output, $depth = 0, $args = Array) in /Applications/MAMP/htdocs/wordpress/wp-content/themes/myblog/inc/walker.php on line 85
Do you have any idea why I'm getting this kind of mistake? I viewed many times but I didnt find :(
+Pir Mera Hi, sorry about that, I did this video more than 1 year ago the Walker class was updated.
Now wordpress requires default declarations for every attribute.
This is the updated and functional code -> github.com/Alecaddd/WordPress101/blob/master/lesson_22/inc/walker.php
+Alessandro Castellani thank you very muchh :)) now it is done!! u are right
Is this new Walker Class you've made (and placed on Github) specifically for Bootstrap?
well, add those 2 parameters to the function. You don't have to use them but because you're creating a EXTEND/copy of that other class it expects to find them. so just add the $arg and the $depth parms. Presto !!!
Why did you use esc_attr() function when printing the $id variable?
Can I get the css for this? I am not using bootstrap so want to figure it out using another menu system? Can you suggest one to replace bootstrap with?
You can get all the source code from the GitHub repo
Can i extend Walker_Page instead of Walker_Nav_Menu?
Hi again!
I have a problem with the submenu. if i click over dropdown this not show me the submenu it redirect to the page of , does not display the submenu.
Help please.
greetings from Venezuela!
Hey Alex
It is a good experience to follow your code line by line. I need a favor.
could you develop a mega menu in walker class?
and BTW your doing a great work... keep it up.
Hi, thank you so much for following.
Yes, I will definitely do that tutorial, a lot of users requested it and it's a resource currently missing out there.
Cheers
We'll wait for it. Thanks for being such a polite person.
As Information, The XFN in Rel Attribute Means " XHTML Friends Network " .
Thanks :D
Hello Alessandro!
I'm just wondering, since in the Admin area of WOrdPress I'm trying to add a custom class to my menu.
However the code that I wrote is this:
```
// Walker Class Nav Menu
class Primary_Walker_Nav_Menu extends Walker_Nav_Menu {
function start_el( &$output, $item, $depth = 0, $args = array(), $id = 0 ) {
if ( array_search( 'menu-item-has-children', $item->classes ) ) {
$output .= sprintf( "
%s
", ( array_search( 'current-menu-item', $item->classes ) || array_search( 'current-page-parent', $item->classes ) ) ? 'site-nav__item--active' : '', $item->url, $item->title );
} else {
$output .= sprintf( "
%s
", ( array_search( 'current-menu-item', $item->classes) ) ? ' class="site-nav__item--active"' : '', $item->url, $item->title );
}
}
function start_lvl( &$output, $depth ) {
$indent = str_repeat( "\t", $depth );
$output .= "
$indent
";
}
}
```
And the class doesn't add, which makes me to think that I need something in there that will look for if the class is added in the admin area I suppose? Or?
Not sure how to solve this : p the code works, I just can't put in a custom class via admin, as the code won't show in the HTML.
I suggest taking a look at my series on How to Build a WordPress Mega Menu. The walker nav class can be a bit annoying sometimes but in that series, I show everything in order to customize the menu, and also the admin menu.
I've made all of my site with your AWESOME videos! I have a minor problem about that sub menu so it won't open as a sub menu. What should i do about it?
Thanks for following my series.
Please, take a look at my source code on Github and compare it with yours, you probably have a small typo.
Cheers
Alessandro Castellani finally i've solved my problem. Thank you again for fast reply :)
Sorry for my question but doesn't the start_lvl edit the which is a submenu? For context: I tried putting a string in $output and it only showed up when I had a submenu (depth>1). So essentialy the if you did is useless? Maybe I am wrong tho, great tutorials btw :)
Great video, thanks a bunch! PHP still throws me a parsing error though: Parse error: syntax error, unexpected ''sub-menu'' (T_CONSTANT_ENCAPSED_STRING) ... any idea?
Hmm...I think there's an "?" missing in the if statement before'sub-menu' right? But when I put that in, I get :" Parse error: syntax error, unexpected '?> ', expecting function (T_FUNCTION) or const (T_CONST)"
Hi Alessandro and thanks for those awesome tutorials, however if someone has having some issues using bootstrap 4.6 check and update those lines:
1 - $id = apply_filters('nav_menu_item_id', 'nav-item ' . $item->ID, $item, $args);
2 - $attributes .= !empty( $item->url ) ? ' href="' . esc_attr($item->url) . '"' : '';
3 - $item_output .= ( $depth == 0 && $args->walker->has_children ) ? '' : '';
Hi alecadd , how to manage for 3rd level menu , on hovering the parent my submenu and next level submenu opens both at same time , but when I scroll through submenu then it works fine, I think due to drop down class coming in third level it is behaving so , plz tell me what can be done
Check my series on how to create a WordPress MegaMenu, I explained everything there.
Hi, great like always - however, there's another typo in there: "current_item_anchestor" instead of "current_item_ancestor", so the top item will not be marked active when a sub item is active!
Ooopsie, sorry about that.
I fixed the issue in the source code on Github.
Thanks for watching
well done. still good in 2018
Thank you :D
Great videos, but where is span element :)?
off topic: can I ask what microphone are you using in making this tutorials?
+TLO Gaming Audio Tecnica AT2020
first there is a string of classes which is constructed by joining the array into the $class_names, after that there is a class "dropdown-toggle" added in the $attributes. Could it be because the first ones are related to wordpress css and the latter one is related to bootstrap? Anyway being not an experienced wordpress programmer I don't understand why the joining of the classes has to go through apply_filter nav_menu_css_class? What is happening during that process?
Not sure I get your question, sorry.
The wp_nav_menu of WordPress generates the HTML automatically and we can't handle that without using the walker nav class or tapping a specific filter that let us access a predefined configuration of WP.
Does this answer your question?
Hi Alessandro. Thank you for your reply. I can understand what wp_nav_menu does, but looking through your clip and looking on other sites to understand how walker class works I saw that there is a string joining of the classes array ($class_names = join(" ", apply_filter('nav_menu_class_css', array_filter($classes),$item, $args)). I was wondering why you cannot do just $class_names = join(" ", $classes). I don't understand what is the necessity of apply_filter('nav_menu_class_css', array_filter($classes),$item, $args). Maybe it's a stupid question but I don't get it. Thanks
I have a php problem:
Warning: Declaration of Walker_Nav_Primary::start_lvl(&$output, $depth) should be compatible with Walker_Nav_Menu::start_lvl(&$output, $depth = 0, $args = Array) in C:\wamp64\www\wordtest\wp-content\themes\awesometheme\inc\walker.php on line 0
What can I do for this?
Hi, i've encountered the same exact issue and i'm stuck right now. Did you fix it?
I've assigned a zero value to the depth variable passed by start_lvl function, and added this variable too :$args = array(). Now it seems to works fine.
So rewrite this line as this:
function start_lvl( &$output, $depth = 0, $args = array() ){ //ul
...
}
Hope it works for you as well.
Thanks so much, just fixed the same issue with your hint :)
@@felan1973 thank you very much it worked for me. 72hrs of troubleshooting that problem. thanks again
In 2020, if you get PHP Syntax errors with " :: ", you have to switch to php v 5.6 from (mine was) 7.2.
Hi, I've been using your walker.php file exactly for the last while now, and it's been working great. All of a sudden, I'm getting this error in an updated Wordpress site: "Walker_Main_Nav::start_lvl(&$output, $depth) should be compatible with Walker_Nav_Menu::start_lvl(&$output, $depth = 0, $args = Array) in /home2/patricz6/public_html/wp-content/themes/my-theme/inc/walker.php on line 71" Can you help?
I figured out that it was because it was not compatible with php 7. Not sure why exactly yet. If you have any patches let me know. Otherwise, I'm fine with using php 5 for now.
I updated my Git repo with a compatible version of the walker class.
basically the only difference is that the new version requires the declaration of a default value for all the variables initialized in the method.
Check my GitHub repo and you'll find the updated code.
Alex, please help. My code is working but I don't have multi-level submenus, if you know what I mean. I can't create submenu of a submenu. Did I've done something wrong or just this code is for 1 level submenu. Then, how to create multilevel submenus, in this tut like I would have submenu of contact?
Thnx...
BTW, GREEEAAAATT tutorial...
Hi, thanks for watching.
This code is just for 1 level of menu, but you can extend the Walker Nav Class to accept multiple levels of indentation.
Check this source code if you need help: github.com/giorgiosaud/bootstrapNavWalker
i tried to make blog page submenu to submenu that i made and it didn't work ..
Ales, thank you so much for your fantastic, awesome tutorial. I've learned alot so far.
I know I am late to the party but I have a question/problem. I completed this tutorial (and actually copied your walker.php code and pasted it into my inc directory so I eliminated any typ-os I might make). The question is: Should I be able to have more than one level of sub-menu ? If so, then the problem I have is that I am only getting one level of sub-menu. For instance I have the following in my Appearances;Menus page for the menu hierarchy:
Main Thing
Sub Thing
Sub Thing One
The Nav bar shows me "Main Thing" with a caret and when I click it the drop down "Sub Thing" with a caret is displayed (as expected) BUT when I click "Sub Thing" the only thing that happens is that the drop down disappears.
What I expected to happen is that when I click on "Sub Thing" the menu item "Sub Thing One" would appear.
Am I expecting the wrong thing ?
Same problem I am facing
Thanks for making this video.
I have copied your walker.php code but the submenu are not showing. The arrow that indicate the submeny shows, but not the submenu itself.
+Isak Glans Ah, I just found out that I had not added bootstrap.min.js to my project. After I added it I can click on the arrow and see the submenues.
+Isak Glans Awesome!
Yes I decided to use Bootstrap to manage all the JS interactions and user clicks.
Less headache for everyone :D
did everything exactly as you said and Everything works find but, links of all levels became unclickable :( :( any idea why
Alex, help! My navigation menu disappeared and I have no errors. I've checked code several times, everything seems to be correct. Any idea?
Hi, thanks for watching.
Did you check my source code on Github to compare it with yours and see if you have any typo?
Found it. Thanks.
Hi Awesome Alessandro, thank you for your videos, just want to ask if the walker updated again? because this is not working. Everything disappeared including the admin bar on top. The only thing left is the container of menu and the logo
class Walker_Nav_Primary extends Walker_Nav_menu {
function start_lvl( &$output, $depth = 0, $args = array() ){ //ul
$indent = str_repeat("\t",$depth);
$submenu = ($depth > 0) ? ' sub-menu' : '';
$output .= "
$indent
";
}
The Walker should still work as supposed to. Did you check my source code on Github to see if you have any typos?
i need another lvl of dropdown. its not showing the 3rd lvl of dropdrown. can u help me? any one can help me?
I explained how to build a Mega Menu in this series: th-cam.com/play/PLriKzYyLb28kOy7z2CoJgcZp7dL1OKbPN.html
Can you possibly update this file in the github repo with lots of comments explaining how it all works? Thanks.
The files related to the Walker Nav Class should be updated. Is there something specific you need to be clarified that it's confusing for you?
I just can't get my head around this.
I'd suggest checking my WordPress Mega Menu Playlist. I basically code everything using the Walker Nav Class and I go really deep in explaining it. I hope it'll help. Cheers
@@alecaddd Thanks. I will do that.
Great lesson, i cant get the dropdown to walk, its frustrating me.
Check my source code on GitHub and check if you're using the latest version of Bootstrap, as some class names and syntax is different from what I used.
Thank You So Much Alessandro Castellani
if anyone see this warning :
Warning: Declaration of Walker_Nav_Primary::start_lvl(&$output, $depth) should be compatible with Walker_Nav_Menu::start_lvl
this is because nav menu walker codes is old so you would use this code:
function start_lvl(&$output, $depth = 0, $args = NULL){...
This is what you need to do in function start_lvl " function start_lvl( &$output, $depth =0, $args= array()) "so problem is that a lot change since he did this and you need to put in your start_lvl what warning is telling you
how this dropdown menu work on Hover on click ?
On click, like the default behaviour of bootstrap
Why is it that I can't navigate through my pages anymore?, it just goes to Home? any ideas?
NVM got it working now. Awesome tutorials!
I'm glad you solved your issues.
Happy Coding!
how do i figure out which is the active link?????
WordPress applies a class automatically to the current link. Keep watching my videos and you'll learn everything you need. Happy Coding!
That laugh at 1:51 :D
My girlfriend likes to have fun while I record my boring tutorials
They are not boring though. Probably the best series of tutorials I watched so far ! :)