How to fetch menus and their links in WordPress

In the dynamic landscape of web development, WordPress continues to be a powerhouse for content management. Understanding how to fetch menus and their links can empower you to create more interactive and customized websites. In this comprehensive guide, we’ll explore how to achieve this using HTML, CSS, and JavaScript.

Introduction

WordPress customization is always been fascinating for web developers. In this article, we will learn how to create and fetch menus and their links on a WordPress website.

The PHP code for fetching custom menus and links is written in such a way that you can fetch both parents and their children’s menu items.

Unraveling the WordPress Menu Structure

Before we dive into the next, let’s understand the structure of WordPress menus. WordPress menus consist of items, and each item can have a link. Our goal is to fetch these menu items and their corresponding links dynamically.

Create a custom menu

Let’s create a custom menu. Go to “Appearance” and click “Menus”:

Now, click on the “Create a new menu” link:

Here you need to set the menu name. We are using “Custom Menu” in this example.

Once you set the name, click on the “Create Menu” button to save it:

Now, configure the menu links and click on “Save Menu” to save your changes.

Congratulations! Your custom menu is created.

Now, we will move into the next step which is the coding part.

The PHP code: fetch menus and their links

We will use wp_get_nav_menu_object() and wp_get_nav_menu_items() functions to deal with the menus and their elements.

The wp_get_nav_menu_object() returns a navigation menu object.

While the wp_get_nav_menu_items() retrieves all menu items of a navigation menu.

We will first fetch the custom menu name using its name. And then we will fetch the menu and its items.

Please see the following script for reference and add it to the functions.php of your child theme:

<?php
	// name of menu which you have created
	$menu_name = 'Custom Menu';
	
	// check if menu exists
	if ( $menu_name != '' ) {
		// get menu info by menu name
	    $menu = wp_get_nav_menu_object($menu_name);
	  	// get menu items by menu id
	    $menu_items = wp_get_nav_menu_items($menu->term_id);
	    $menu_list = '';
	    $count = 0;
	    $submenu = false;$cpi = get_the_id();
	    foreach( $menu_items as $current ) {
	        if($cpi == $current->object_id ){
	        	if ( !$current->menu_item_parent ) {
	        		$cpi = $current->ID;
	        	}
	        	else{
	        		$cpi = $current->menu_item_parent;
	        	}
	        	$cai = $current->ID;
	        	break;
	        }
	    }
	    foreach( $menu_items as $menu_item ) {
	        $link = $menu_item->url;
	        $title = $menu_item->title;
	        $menu_item->ID == $cai ? $ac2 = ' current_menu' : $ac2 = '';
	        if ( !$menu_item->menu_item_parent ) {
	            $parent_id = $menu_item->ID;$parent_id == $cpi ? $ac = ' current_item' : $ac = '';
	            if(!empty($menu_items[$count + 1]) && $menu_items[ $count + 1 ]->menu_item_parent == $parent_id ){
	            	//Checking if an element has child
	                $menu_list .= '<li class="dropdown has_child'.$ac.'"><a href="'.$link.'" class="dropdown-toggle'.$ac2.'" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"><span class="nav-span"></span>'.$title.'<span class="caret"></span></a>';
	            }else{
	                $menu_list .= '<li class="'.$ac.'">' ."\n";$menu_list .= '<a href="'.$link.'" class="'.$ac2.'">'.$title.'</a>' ."\n";
	            }
	             
	        }
	        // check if a menu item is a parent element
	        if ( $parent_id == $menu_item->menu_item_parent ) {
	            if ( !$submenu ) {
	                $submenu = true;
	                $menu_list .= '<ul class="dropdown-menu">' ."\n";
	            }
	            $menu_list .= '<li class="item">' ."\n";
	            $menu_list .= '<a href="'.$link.'" class="'.$ac2.'">'.$title.'</a>' ."\n";
	            $menu_list .= '</li>' ."\n";
	            if(empty($menu_items[$count + 1]) || $menu_items[ $count + 1 ]->menu_item_parent != $parent_id && $submenu){
	                $menu_list .= '</ul>' ."\n";
	                $submenu = false;
	            }
	        }
	        if (empty($menu_items[$count + 1]) || $menu_items[ $count + 1 ]->menu_item_parent != $parent_id ) { 
	            $menu_list .= '</li>' ."\n";      
	            $submenu = false;
	        }
	        $count++;
	    }
	} else {
	    $menu_list = '<li>Menu "' . $menu_name . '" not defined.</li>';
	}

	echo $menu_list;
?>

The code is written as per the Bootstrap dropdown menu structure. The code is fully customizable. You can change the classes to make them fully customizable as per your theme’s CSS.

Testing and Optimization: Ensuring Smooth Performance

Before deploying your WordPress Menu Fetching project, thoroughly test its functionality. Ensure it works seamlessly across different browsers and devices. Optimize the code for performance, addressing any potential issues.

Trick

You can write this code wherever needed on your theme, you can put that code in a function e.g. fetch_custom_menu($menu_name) and put the function code in the functions.php file and just call the function with the menu name e.g. fetch_custom_menu('Custom Menu').

Please note that we have used “Custom Menu” as an example in this article. You can use the menu name according to your requirements.

Conclusion

Congratulations! You’ve successfully crafted a WordPress fetch menus and their links tool using PHP. This project not only enhances your understanding of WordPress menus but also strengthens your web programming skills. Feel free to customize and expand this tool based on your project requirements. Happy coding!