HOW TO MAKE A CUSTOM NAVBAR IN WORDPRESS WITHOUT USING WALKER CLASS

HOW TO MAKE A CUSTOM NAVBAR IN WORDPRESS WITHOUT USING WALKER CLASS

Many WordPress developers search about how can I customize the links and make custom navbar in WordPress theme without using Walker class which may be complicated to some developers so today we will learn a new way to get all links and child links of a specific menu location.

The first thing to enable menus in your WordPress theme you need to add action hook to functions.php file of your theme to make it shown in WordPress dashboard.

function theme_custom_menus() {

register_nav_menus(array(

'nav_menu' => 'main navigation menu',

// 'footer_menu' => 'footer menu'

));

}

add_action('init', 'theme_custom_menus');

and we wrote register_nav_menus  to enable adding multiple menus from your WordPress dashboard.

now we should create a function in functions.php to get the menu links of a specific location so it will looks like that:

function get_custome_nav_items($menu_location) {

}

then you need to get the location fo the menu and after getting its location you getting is id and then the menu array which contains all links like following:

function get_custome_nav_items($menu_location, $option) {

// get all locations

$locations = get_nav_menu_locations();

// get the specified id of a given location

$menu_id = $locations[$menu_location];

// get the menu by its id

$original_menu = wp_get_nav_menu_items($menu_id);

// define the menu in other two variables

$static_menu = wp_get_nav_menu_items($menu_id);

$navbar_items = wp_get_nav_menu_items($menu_id);

// define array to push the child items inside it

$child_items = [];

}

then you need to sparate between navbar items and child items and push all child items into "child_items" array which we defined

function get_custome_nav_items($menu_location, $option) {

// get all locations

$locations = get_nav_menu_locations();

// get the specified id of a given location

$menu_id = $locations[$menu_location];

// get the menu by its id

$original_menu = wp_get_nav_menu_items($menu_id);

// define the menu in other two variables

$static_menu = wp_get_nav_menu_items($menu_id);

$navbar_items = wp_get_nav_menu_items($menu_id);

// define array to push the child items inside it

$child_items = [];

// pull all child menu items into separate object

foreach($navbar_items as $key=> $item) {

if ($item->menu_item_parent) {

array_push($child_items, $item);

unset($navbar_items[$key]);

}

}

// push child items into their parent item in the original object

foreach($original_menu as $item) {

// second loop to compare between two arrays

foreach($original_menu as $child) {

// check if the child menu parent equals the item postname which is the

// same number or not

if ($child->menu_item_parent == $item->post_name) {

if (!$item->child_items) $item->child_items = [];

array_push($item->child_items, $child);

unset($child_items[$key]);

}

}

if ($item->menu_item_parent == 0) {

array_push($all_items, $item);

}

}

// return the static menu

return $static_menu;

}

now this function returns an array contains all links after arranging them and inserting children to parents.


now you can use it whenever you want just call it and specify the location name of the menu and make foreach loop for it like following:

<?php

$navbar_menu = get_custome_nav_items("navbar_menu");

foreach($navbar_menu as $link) {

?>

<ul>

<li><a href="<?php echo $link->url ?>"><?php echo $link->title ?></a></li>

</ul>

<?php

}

hopefully guys it makes sense and got it and really this function is so powerful and allow you to customize the links as you wanna without writing walker class.