Menu is an important component in a website. WordPress allows users to add a lot of menus to custom locations. The following article, BKNS will guide you how to create multilevel menu in WordPress. Let's follow along.
Create Multi-Level Menus in WordPress
To create a multi-level menu, you need to load the data once and put it in a variable then use a combination of iterators foreach and if to display the premium menu. But before creating a multi-level menu, you need to analyze the function's return data menu and take are the required fields.
Parse the returned data on the menu . function
Using the menu function, the returned data has the following form:
<?php
$menuLocations = get_nav_menu_locations();
$menuID = $menuLocations['main-nav'];
$primaryNav = wp_get_nav_menu_items($menuID);
foreach ( $primaryNav as $navItem ) {
echo '<li class="menu-item menu-item-type-post_type menu-item-object-page"> <a href="'.$navItem->url.'" title="'.$navItem->title.'">'.$navItem->title.'</a> </li>';
}
?>
The above code has a function so that the function will get the menu data of main-nav, this is also a location that you need to create in the file function.
Next you need to remove the function foreach Go and replace it with the following code:
<?php
$menuLocations = get_nav_menu_locations();
$menuID = $menuLocations['main-nav'];
$primaryNav = wp_get_nav_menu_items($menuID);
echo var_dump($primaryNav);
?>
The above code is to replace it with the function var_dump: is a function that displays the structure of a variable, an object, .. from here on the screen will show the user the data of the variable and that data field is currently being stored
The function above is the part of the array shown by the function var_dump. To make more multi-level menus, you just need to add 2 more items ID and menu_item_parent. Where, the ID field is to identify, and the menu_item_parent field is to see which ID it is a child of.
In general, in addition to the title and url items, you need to add an ID field and menu_item_parent to serve the creation of a multi-level menu.
Create multi-level menu in wordpress
Create multi-level menu in wordpress
Instead of writing a function that passes in the ID parameter to get the sublists, you need to use 3 iterative functions to get the 3 levels by adding the following structure:
<ul id="menu-1" class="nav">
<?php
$menuLocations = get_nav_menu_locations();
$menuID = $menuLocations['main-nav'];
$primaryNav = wp_get_nav_menu_items($menuID);
$id_parent =0;
foreach ( $primaryNav as $navItem ) {
if($navItem -> menu_item_parent == $id_parent){
echo '<li class="menu-item'.$navItem ->ID.'"> <a href="'.$navItem->url.'" title="'.$navItem->title.'">'.$navItem->title.'</a>';
$sub="";
foreach ( $primaryNav as $navItem2 ) {
if($navItem2 -> menu_item_parent == $navItem ->ID){
$sub .= '<li class="menu-item'.$navItem2 ->ID.'"> <a href="'.$navItem2->url.'" title="'.$navItem2->title.'">'.$navItem2->title.'</a>';
$sub2="";
foreach ( $primaryNav as $navItem3 ) {
if($navItem3 -> menu_item_parent == $navItem2 ->ID){
$sub2 .= '<li class="menu-item'.$navItem3 ->ID.'"> <a href="'.$navItem3->url.'" title="'.$navItem3->title.'">'.$navItem3->title.'</a></li>';
}
}
$sub .= '<ul>'.$sub2.'</ul>';
$sub .= '</li>';
}
}
echo '<ul>'.$sub.'</ul>';
echo '</li>';
}
}
?>
</ul>
By inserting the above code, you can insert the necessary classes to custom fit your theme. This is also the code used for the theme.
So the above article, BKNS guide you how create multilevel menu in WordPress for your reference. If you have any questions about the article, please leave a comment below so we can respond as quickly as possible. Don't forget to visit the website bkns.vn Stay tuned for more useful updates!
>> Learn more:
My name is Thinh Hanh, currently the CEO of BKNS. I will provide you with information technology services and network solutions in the fastest and most effective way.
Post a Comment
Post a Comment