Custom Wordpress Menu for beginners
Yes Man, Itz time to do some wordpress now. sounds exciting isn`t it? For me 200 percent exciting one. so lets start the sweet simple short journey of custom wordpress menu.
What you will learn from this Article :
1. Register Menu
2. Display into Page
3. Additional Display options
4. Remove Default Classes of wordpress
header.php : Basically I have this static hard coded html menu list, which I would like to print from wordpress menu option.
Hey wait, but I am not able to see any Menu option in my wp-admin.
- Register Menu : functions.php - Exactly My Point, we have to Register Menu first.
Once you Register Menu, you are now able to add Menu in Appearance option. I have added Home and About us, below is example of Services Menu.
Go to Custom Links > simply type url and Link Text than click on Add to Menu. once you will click Add to Menu It will appear Right side Below About us link and you can add multiple menu like this. last but not least, please never foget to click on Save Menu option, appear on top right side, Please :)
2. Display into Page :
header.php - Second step is now, we have to display it on our page. And you will fall in love with this Awesome short, simple, sweet code. This will print all your Menus.
Magic :)
Finally, we can add multiple menu in our wp-admin and all they are print with the help of above wp_nav_menu function. but itz not the end of the story. lots of work needs to be done, like wordpress menu has added some default classes and extra div container into DOM, which we will need to remove as well. and we want to add our custom class name as well. have a look.
3. Additional Display options :
header.php - Basically we have to get rid of these extra div container and ID and class of UL tag. lets add class nav-list and remove ID.
4. Remove Default Classes of wordpress : functions.php - Now we have to clear default ID/classes as well from DOM. have a look
Now if you would like to do any changes like add/remove your menu or change the order(just drag menu) you can do directly by wp-admin menu options.
Here is out Finish Product with all clear of default classes and customized UL :
Ingredients of this beautiful recipe :
register_nav_menus(), add_action(), add_filter(), wp_nav_menu(), array(), ‘menu’ => ‘primary’, ‘container’ => ‘’, ‘items_wrap’ => ‘<ul class=”nav-list”>%3$s</ul>’
Hope you enjoyed this cool stuff. Thanks for all your Patience. Bye and take care guys.
#keeplearning #happycoding
