WordPress 101 - Part 14: Edit the menu with the Walker Class - Part 1

Подписаться 99 тыс.

Просмотров 71 тыс.

50% 1

fourteenth lesson of the series WordPress 101 for Beginner Developers, Edit the menu with the Walker Class - Part 1.
Learn how to build a Theme from scratch, create the folder and the necessary files to install and activate a custom theme.
This tutorials are meant to be a starter help for developers who never used WordPress before and want to learn how to code themes and plugins without using pre-coded assets.
GitHub Repository: github.com/Alecaddd/WordPress101
1st Part: • WordPress 101: Create ...
2nd Part: • WordPress 101 - Part 2...
3rd Part: • WordPress 101 - Part 3...
4th Part: • WordPress 101 - Part 4...
5th Part: • WordPress 101 - Part 5...
6th Part: • WordPress 101 - Part 6...
7th Part: • WordPress 101 - Part 7...
8th Part: • WordPress 101 - Part 8...
9th Part: • WordPress 101 - Part 9...
10th Part: • WordPress 101 - Part 1...
11th Part: • WordPress 101 - Part 1...
12th Part: • WordPress 101 - Part 1...
13th: • WordPress 101 - Part 1...
Tutorial Page: www.alecaddd.com/wordpress-101...
www.alecaddd.com/

Хобби

Опубликовано:

26 июл 2015

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 163

@yaroslavnovichkov6736 4 года назад

There're no such videos about Walker Classes in Russian. No one single good tutorial. You explain very good and speak clearly. Thanks a lot.

@danieldafoe1782 8 лет назад

Best resource on walker. Crystal clear. You surely have teaching skills! Thanks a lot !

@alecaddd 8 лет назад

+Daniel Dafoe Oh wow, thank you so much for this positive feedback :D

@dco_ 8 лет назад

Hey guys, make sure to add the ? in the shorthand of the if statement for the $submenu variable. I think Alec had cut this out right around 26:30. Thanks for these awesome tutorials!

@alecaddd 8 лет назад

+Drew Cook thanks for flagging that out, I totally forgot but should be fixed in the git repo

@KUBE.archvis Год назад

This is the only lesson on the walker class that i was able to understand. Thanks for the explanations!

@ndmytrakh 8 лет назад

This is the best walker class tutorial I've ever seen. Thanks a lot Alessandro.

@alecaddd 8 лет назад

+Nazar Dmutrah Happy to hear that! It's actually 1 year old, and small things have changed, I should do an update tutorial about it. Happy Coding!

@reginaldromanbigornia11 8 лет назад

The way you explain things is great! Thanks for the video!

@alecaddd 8 лет назад

+theNoob Thank you so much for watching!

@ammarhassan_ 6 лет назад

This tutorial is amazing! ur explanation and step by step is pure genius. Thank you!

@alecaddd 6 лет назад

Oh wow, thank you so much :D

@wireinet 3 года назад

Ease learn wordpress with your channel! Thanks!

@infodrop 2 года назад

Cool description man. THanks a lot.

@syyhkyrotta 8 лет назад

THANK YOU ONCE AGAIN FOR GREAT CONTENT! :D

@duncankostello8596 7 лет назад

thanks Alex great series of tutorials

@alecaddd 7 лет назад

Thank you so much

@zahirabs1 6 лет назад

You are the best of the best ... thumbs up!

@alecaddd 6 лет назад

Thank you so much

@davidkahdze3474 4 года назад

you are the most good teacher man!!!!!! thank you very much

@JarlHelin 7 лет назад

Bravo! Worked a charm!!

@alecaddd 7 лет назад

Happy to hear that :D

@DimitrisHD 6 лет назад

No words, you rock . Thats all!

@alecaddd 6 лет назад

Ahahah, thank you :D

@markwaters5964 9 лет назад

Great Stuff. You are explaining the Walker Class very well. This is very helpful!

@alecaddd 9 лет назад

Thank you for the feedback, I still think that I could improve more.

@aurelianspodarec2629 8 лет назад

+Alessandro Castellani Theres always some space to improve :)

@pushpendumondal2737 8 лет назад

Thanks.. It help me sort couple of my issues.

@alecaddd 8 лет назад

+pushpendu mondal Glad I was helpful. Thank you for following.

@sufiansuhail9243 3 года назад

Thank you very much

@Project308 3 года назад

The coolest thing I've learned is the $var = (condition) ? [ true clause ] : [ false clause ]; it looks so neat. Also: thank you so much for the tutorial!

@rizwanshaikh8209 4 года назад

Great tutorial thanks sir

@alecaddd 4 года назад

You are welcome

@parkashsaini868 9 лет назад

thank you for creating this helpful tutorial. Your way of explaining is very good.

@alecaddd 9 лет назад

prakash saini Thank you so much!

@aurelianspodarec2629 8 лет назад

+prakash saini Very poor ? :D

@parkashsaini868 8 лет назад

good tut.

@parkashsaini868 8 лет назад

Aurelian Spodarec :P

@georgioamista6043 3 года назад

Thank you

@yassinyoussoufali6324 8 лет назад

Love you bro :) i am confused about widgets.. can we use the walkers to customize its output? thx again

@BoykoDev 8 лет назад

Great tutorial, as always! You can also include template with "include(locate_template('path/to/template.php'));"

@alecaddd 8 лет назад

+Serge Boyko Sure, you can use also include, but I won't recommend it. First you're using 2 functions ( include and locate template ), instead of only 1 (get_template_part). And second, get_template_part is part of the default API of WordPress and it's highly recommended to use that one during theme development. Happy coding!

@BoykoDev 8 лет назад

+Alessandro Castellani Didn't think about it like that. Thanks for explanation!

@asleeinarhansen3596 7 лет назад

For anyone having a problem with the menu not showing up after doing this lesson just change the function start_lvl(&$output, $depth) to function start_lvl(&$output, $depth = 0, $args = array()) and comment out function start_el().

@sebastiaanram9919 6 лет назад

Awesome, thanks!

@faysalanonna Год назад

Thank you, it works. But why does the problem occurs !?

@ruipeng1624 4 года назад

If you start the tutorial from the display_element() method followed by the start_el() method of the Walker_Nav_Menu class , you can let the viewers code along and check how classes and attributes modify the final ouptut step by step.

@JayJay-ki4mi 4 года назад

The indentation part isn't really required because dev tools on all browsers will auto indent. It all gets uglified once in production anyway. Other than that great tutorial :)

@citylumberjack8381 2 года назад

This is a great tutorial on walker classes as there really isn't much info even now in 2021 regarding this HTML tree manipulation, at least not on youtube. I followed both of your tutorials on this topic - this video (part 14) and also part 15 and it works great after I inspect the elements -no critical errors. However, I was wondering how to add an "ID" instead of a "Class" to different submenus elements so that I might use javascript later on to create a better mobile nav UX. So for example, adding an ID of dropdown-menu so it renders like the following:

@sudani1969 Год назад

Great tutorial now I'm trying to convert bootstrap 5 menu into wp_na_menu, but I'm facing 2 issue so far as I have a div before the UL and struggling to add the bootstrap classes to wp_na_menu any direction on how to do the conversion, thanks in advance

@andreascarpa7143 4 года назад

Hi Alex, thanks a lot for you lessons; they're so valuable but, as many other, I'm facing the issue "Declaration of Walker_Nav_Primary::start_lvl(&$output, $depth) should be compatible..." According to your suggestion, I've checked the repo in github but unfortunately it didn't do the trick. Here the fragment I've found over there: "function start_lvl( &$output, $depth ){ //ul..." which doesn't work; following some suggestion in the chat I've replaced that line with this one : function start_lvl( &$output, $depth=0, $args=array()): in this case, I got no errors but the menu has disappeared. Can you kindly give any clue?

@Daaboo 9 месяцев назад

same for me in 2023. any clue?

@KaylaTeets 8 лет назад

Since the Walker code isn't working, I'm just going to keep all of this code as "comments" and if you make an updated version of this video then I can refer back to the code. For now I'll move onto the next lesson. Thanks for your hard work. ^_^ For anyone else stuck on this make sure you adjust the header, functions, and walker files.

@alecaddd 8 лет назад

+Kyrae Jenkins Why is not working? What problem are you encountering? Did you check my source code on GitHub? Let me know, I'm sorry if you're having issues

@KaylaTeets 8 лет назад

+Alessandro Castellani my code tells me that on line 31 there is a sub-menu syntax error. and I noticed other people had the same issue. and you said that since this tutorial there was an update and that you would do a new video in the future so I figured I would skip this lesson until then. does the source code on github have the updated code?

@alecaddd 8 лет назад

Let me grab that for you

@alecaddd 8 лет назад

+Kyrae Jenkins Here: github.com/Alecaddd/WordPress101/blob/master/lesson_22/inc/walker.php

@jeggersaren7638 8 лет назад

Hi +kyrae Jenkins! When you said that you were stuck in this project do you this kind of error? Strict Standards: Declaration of Walker_Nav_Primary::start_lvl() should be compatible with Walker_Nav_Menu::start_lvl(&$output, $depth = 0, $args = Array) ?? If yes, then you should edit your wp_config.php file and set your 'WP_DEBUG' into false such as this define('WP_DEBUG', false); That is how I fixed my error. in this tutorial :)

@architchandra 5 лет назад

Just a small piece of feedback - please keep your cursor in the middle of the recording screen (vertically) otherwise those of us watching with subtitles on are not able to see what you are writing (eg around 7:57, when you are including the Walker.php file). Thanks. Keep up the good work. :)

@alecaddd 5 лет назад

Thanks for the feedback, didn't think about that. Cheers

@eMebyMonicaMateu Год назад

Hi; probably it's because after years things have changed, but for me it does not work.. If I inspect the code, the submenu is there, and I can see the caret, but if I click I just open the first level.. and I can no see the second ones opened. I am using Bootstrap 5; is it enought changing data-toggle="dropdown" to data-bs-toggle="dropdown" ?

@tedamaradidis3265 3 года назад

I did a menu and it works perfectly fine in all devices except Android! Any advice is greatly appreciated!

@tedamaradidis3265 3 года назад

Puzzling

@mohammadumar443 5 лет назад

if you want data- attributes to and and each data- attribute would be different to each different and what would be the solution?

@alecaddd 5 лет назад

Check my playlist on how to create a Mega Menu in WordPress. I explain how to tweak everything in details

@violabee918 8 лет назад

Thanks so much for this very helpful series! I seem to have a slight problem and was hoping you could help. As soon as I started integrating the walker class, my carousel broke! :( I did read through the comments and see that you had updated the git repo ... any thoughts?

@alecaddd 8 лет назад

WordPress updated a bit the Walker Class since I did this tutorial, so there are some small changes that affect the theme a bit, but nothing major. I suggest you to check the walker class in my Git repo in the last lesson folder, that is the most updated and working one. Let me know if you fixed it.

@violabee918 8 лет назад

I have already checked that but still no luck. I'm not giving up yet!

@helmikrisnadi 8 лет назад

Hi Alessandro, thank you for your tutorial, it's really helpful. I want to ask you, since i'm a newbie on wordpress, why the pagination not working when I set the page template as a static front page? It just leave the page blank. I'd be very glad if you can tell me how to fix this. Thank you :)

@alecaddd 8 лет назад

If you set a static front page you lose the default blog loop that prints your posts. Your theme is now returning only the info of 1 single page, the one that you set. The pagination works in the blog page, search result or archive page.

@helmikrisnadi 8 лет назад

Thank you for your explanation, i think i've got it. I should learn more about hierarchical of wordpress.

@bkvishalkunwar 5 лет назад

Hi sir i need one help, using walker i want to add div html tag on third ul under tag only one time, no repeatation. Please sir i need help

@alecaddd 5 лет назад

Check my playlist about WordPress mega menu to learn everything you need

@AkidsukiGangstaCat 7 лет назад

Hi. Alex. Thank you very much for the video. I see a search icon next to the menu. In which video did you insert it? :D

@alecaddd 7 лет назад

Hi, I implemented a couple of extra things during the live development sessions. You can check those videos in the playlist. Cheers

@AkidsukiGangstaCat 7 лет назад

Ok. I will. Thanks. :D

@andoy_abarquez 7 лет назад

is it on Part 3?

@raulterraferrao696 7 лет назад

Yes, it is on part 3 of live development session

@codeAlongwith 6 лет назад

so I got this error: Warning: Declaration of Walker_Nav_Primary::start_lvl() should be compatible with Walker_Nav_Menu::start_lvl(&$output, $depth) I changed it to: Walker_Nav_Menu::start_lvl(&$output, $depth = 0, $args = Array) and seemed to fix it.....is this right?

@alecaddd 6 лет назад

Yes, correct. WordPress now requires default values for all the attributes of the Walker Nav Class. I pushed an updated code on my GitHub repo.

@guticide 5 лет назад

Hello, I am from HK, a newbie developer... I used Walker_Nav_Menu::start_lvl(&$output, $depth = 0, $args = Array) , and it shown error, and I use Walker_Nav_Menu::start_lvl(&$output, $depth = 0, $args = Array() ) it seems works, or is it a wrong declaration? Thanks

@mannydev9203 5 лет назад

I've looked into the repo and I can't see that update...

@benoitmatterne509 5 лет назад

Same issue :( I find this on github github.com/wp-bootstrap/wp-bootstrap-navwalker/tree/v3-branch, and it works very well . You can find similar class for Boostrap 4 ;) You can also use the walker.php that Alessandro used in "Create a Premium Theme" tutorial chapter 18. You can find this class in the git repo github.com/Alecaddd/Sunset-theme

@KhalilCh 8 лет назад

Hi Alessandro, I noticed that the search is been changed to icon on the right from part 13 to part 14, is there is a missing part? Thank you

@paolo-1283 8 лет назад

watch the live sessions playlist, it's in part 3 i think.

@KhalilCh 8 лет назад

Thanks, I got it

@zaidiftikhar9938 8 лет назад

thank you so much its very helpfull ,but i have problem my code how can i fix it Warning: call_user_func_array() expects parameter 1 to be a valid callback, class 'new description_walker()' not found in F:\php\htdocs\wordpress\wp-includes av-menu-template.php on line 706...

@alecaddd 8 лет назад

Hi, this looks not related to the custom theme, but it's an error of your WordPress installation. Be sure you installed WP correctly.

@zaidiftikhar9938 8 лет назад

I again installed it solve this,but i have generated one depth and one submenus ,it will not give another submenus ..how can i solve this..

@policeuac 7 лет назад

I have wp-bootstrap-navwalker.php in my root folder but i think we can't style navwalker with that way right? Do i need wp-bootstrap-navwalker.php?

@alecaddd 7 лет назад

Mhhh, sorry, I don't think I get your issue. You have a walker nav class, did you require that file in the functions.php? Are you calling that class when invoking the wp_nav_menu?

@policeuac 7 лет назад

My walkernav menu working without any issue so i dont style it yet. I mean i dont see wp-bootstrap-navwalker.php in your root directory. Do i need it when styling with your technique?

@lunaticochats Год назад

And this how I use it with Tailwind CSS

@vandanaraogck3122 6 лет назад

Hi,i have a doubt,i have 4 menus,in that about.php,courses.php,gallery.php.please tell me how to use conditional statements inside the page.php,thanks in advance

@alecaddd 6 лет назад

I'm not sure I got your question. So, you have 4 menus, I guess you want to show them dynamically based on the page, right? If that's the case, just assign each of those menus to a different menu location, and then call that menu location in the relative PHP file.

@vandanaraogck3122 6 лет назад

Alessandro Castellani yaa exactly like that only, can u please give me some hints to do that

@alecaddd 6 лет назад

I explained that in this series if I'm not wrong. Showing how to create a menu with a unique location, and then call that location on a specific page.

@sororbudwiser 4 года назад

Is this still valid for use in 2020?

@suyashdasani 6 лет назад

hii Alessandro Castellani in my code i am using this code its not showing any error but it's hiding my menu function start_lvl(&$output, $depth = 0 ,$args =array() ) { $indent = str_repeat("\t",$depth); $submenu = ($depth > 0)? 'sub-menu' : ''; $output .= " $indent ";

@alecaddd 6 лет назад

No need to write the same issue in multiple social media. Just writ a comment in a place and wait for the answer. I answered to you on my facebook page already.

@joanamayamores7221 4 года назад

Hi, the $submenu = ($depth > 0) ' sub-menu' : ' '; didn't work on mine. :(

@tomdevisser8150 3 года назад

You need ? before ' sub-menu', it's a ternary operator.

@glgeorgiou 5 лет назад

Great tutorial but. In current WordPress version, 4.9.8, seems that functionality is broken by few core WordPress files.

@alecaddd 5 лет назад

Check my source code on GitHub, I updated those few spots in the Walker Nav Class to work with the recent version of WordPress. You just need to add defaults to methods' attributes

@poorvijain7281 6 лет назад

dear when i am adding this walker class in header.php , my menu items disappered. Please suggest.

@poorvijain7281 6 лет назад

Dear query is resolved i checked code on github. Thanks

@alecaddd 6 лет назад

Cheers

@dwaynetaustin 6 лет назад

anyone having issues with the "require" part in the functions php file, i keep getting errors on this part

@alecaddd 6 лет назад

What errors are you getting? did you check my source code on GitHub?

@dwaynetaustin 6 лет назад

i got it working, apparently i accidently created the file into another file.....but now im having another issue Declaration of Walker_Nav_Primary::start_lvl(&$output, $depth) should be compatible with Walker_Nav_Menu::start_lvl(&$output, $depth = 0, $args = Array) im also checking your source code for mistakes i might did

@alecaddd 6 лет назад

That's a recent depreciation of the new version of WordPress for the walker nav class. Simply update the attributes of the start_lvl method how suggested in the error. start_lvl(&$output, $depth = 0, $args = Array)

@mohammadhuzaifa298 8 лет назад

Hey Alessandro, to be honest your tutorials is very good im loving it! But my wp_reset_postdata(); is not working, kindly help me out and one more thing you are my wordpress teacher and my this teacher is awesome Love from Pakistan :)

@alecaddd 8 лет назад

+Mohammad Huzaifa Hi man, thank you so much for your positive comment, I'm really happy to hear that. What is not working with the wp_reset_postdata()? Is your WP_Query not reverting to its original status? Thanks for watching.

@joselop4071 7 лет назад

I wish you could tell me how the value of $depth is detected. That is what you say in the video. The value is detected. But how?

@alecaddd 7 лет назад

It's a built-in method of WordPress. The $depth variable represents the location of a link inside your menu. If the link is at the first position, so it's not indented to anything and doesn't have any parent, his depth is 0. If an element is a child, the depth is 1 If an element is a child of a child, the depth is 2. And so on. WordPress automatically detects your menu structure and applies an incremental number ($depth) to your elements based on their location.

@joselop4071 7 лет назад

Many thanks Ale. You know, despite Wordpress being so so old, many fundamental parts of the documentation are a piece of sh**

@manishdhiman2005 6 лет назад

how can i fix this- ( ! ) Parse error: syntax error, unexpected ''walker'' (T_CONSTANT_ENCAPSED_STRING), expecting ')' in C:\wamp64\www\wordpress\wp-content\themes\awesometheme\header.php on line 53

@alecaddd 6 лет назад

Check my source code on GitHub, you most likely have a syntax error.

@manishdhiman2005 6 лет назад

not working, same code, it shows ( ! ) Parse error: syntax error, unexpected ''walker'' (T_CONSTANT_ENCAPSED_STRING), expecting ')' and dreamweaver show error in line- 'walker' => new Walker_Nav_Primary()

@manishdhiman2005 6 лет назад

not be able to solve

@mihajloilic5836 3 года назад

I hope this isn't requiring to have in building your custom theme? :)

@user-xd3ez1gd5u Год назад

26:34

@ukamakaanagboso6021 6 лет назад

Hi Alex, thanks for a great video. I'm totally a newbie with no training or experience whatsoever, I'm learning WordPress for my own use only. Your series has been of a great assistance to me. However, I'm stuck. I'm receiving the error below, which I can't figure out how to solve it, I would appreciate if you could figure out for me what to do. Pls, note that I have removed the comments for more clarity. Thank you in advance. UA Error 1: 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:\xampp\htdocs\wordpress\wp-content\themes\learningtheme\inc\walker.php on line 16 Error2: Warning: Declaration of Walker_Nav_Primary::start_el() should be compatible with Walker_Nav_Menu::start_el(&$output, $item, $depth = 0, $args = Array, $id = 0) in C:\xampp\htdocs\wordpress\wp-content\themes\learningtheme\inc\walker.php on line 16 Code:

@alecaddd 6 лет назад

@darrenforster99 5 лет назад

Thanks for this - although I have to admit this seems like a lot of work just to remove stupid little classes that are attached to the wordpress menus - it annoys me with all these CMS's when they put their own classes into things and you're like why don't you just produce raw html and allow the end developer to add their own classes on each block without having to go into PHP just to remove classes!

@alecaddd 5 лет назад

Welcome to the convoluted world of the Walker Nav Class :P

@nerchit4475 5 лет назад

hey brother i think you need to update the video.

@paulmiller8128 6 лет назад

Hi Alessandro, Sorry, but back again. I've followed your lesson (and understood most of it!) but have ended up with a couple of error messages: "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:\xampp\apps\wordpress\htdocs\wp-content\themes\Paulsfirst\inc\walker.php on line 49" "Warning: Declaration of Walker_Nav_Primary::start_el() should be compatible with Walker_Nav_Menu::start_el(&$output, $item, $depth = 0, $args = Array, $id = 0) in C:\xampp\apps\wordpress\htdocs\wp-content\themes\Paulsfirst\inc\walker.php on line 49" Line 49 is just the closing } (and I copied the code for walker.php from github to make sure it wasn't my typing) - Help please. Many thanks PS Your tutorials are great btw.

@paulmiller8128 6 лет назад

Cracked it - I found your link to the corrected code in one of the replies below: github.com/Alecaddd/WordPress101/blob/master/lesson_22/inc/walker.php Onwards & upwards

@alecaddd 6 лет назад

Ah, yes, the Walker Nav Class was slightly updated since the release of this video. Thanks for watching, and Happy Coding!

@joselop4071 7 лет назад

What is the real value of $depth in this menu? Where is the value assigned? Its a pity there is a gap in the explanation. Good job overall, though.

@alecaddd 7 лет назад

The default value is 0. If you want to check the current value based on the menu item location, simply add it to the output of the start_el method: $output .= $depth;

@joselop4071 7 лет назад

thanks, Alessandro. If the value is 0, I don't understand why. I have been looking through many tutorials and no many details are given. Your tutorial is the best I have found. But I still dont understand it all. Sometimes I think if it is really worth the effort to build a dynamic menu with PHP or just stick with a static one.