webappguides
Create Wordpress Theme From Scratch! Build Your Own

Add submenu item programmatically in WordPress

webapps log

webapps Lab
May 28, 2021
ThemeCreation

Adding an item to a submenu programmatically can be done by taking the advantage of wp_nav_menu_objects hook.

The submenu in WordPress can be created by retrieving the current menu.

The menu has to provide the ID of each item it has.

Then, the new submenu item uses the ID of a specific item to become a child of a particular item.

There are some requirements to include a submenu to a menu item.

These requirements are defined by array.

To cut off the story, here is a solution.

WordPress Submenu Code Snippet

The snippet is to be written in the functions.php

1.functions addSubMenuItem($items){

2.$vehicles = array(

3.'title' => 'Electric Vehicles',

4.'menu_item_parent' => 999,

5.ID' => '',

6.'db_id => '',

7.url = 'http://webappguides.com/electric-vehicles');

8.$items=(object)$vehicles;

9.return $items;

10.}

11.add_filter('wp_nav_menu_objects','addSubMenuItem');

Code Explanation

To create a child element a function created in the functions.php is to be provoked by the add_filter function.

That task takes place at line-11.

The wp_nav_menu_objects action hook helps to sort the menu items before printed in HTML.

The usage of wp_nav_menu_objects requires the passage of the array that defines the selected parent item.

Line-4 is a constant element that specifies a certain id of the existing menu item.

The item is a parent of a new child item to be added.

This forms a submenu of the item of the given parent id.

Provide the item title

Line-3 uses the key ‘title’.

This enables to name the submenu element.

The submenu element’s name as it is defined by the $vehicles array is Electric Vehicles.

If the menu features dropdown items the title Electric Vehicles will show up.

Specify the item URL

You know, every item in the menu must have a link.

The array of  $vehicles contains an element for setting the menu item link.

Line-7 set the $url to http://webappguides.com/electric-vehicles.

Change the link to your preferred one.

Set an array to objects

When wp_nav_menu_objects is used, the apply_filters function passes the objects relating to it.

The array itself isn’t an object.

Hence, the snippet should typecast the array and set it to the value passed by the function.

Line-8 sets $item object to $vehicles.

This makes $item be the array that holds objects necessary to set submenu.

By the end, a function gives the value that has an item name and the URL.

wp_nav_menu_objects usage.

This function sorts all the items of a specific.

The wp_nav_menu_objects is useful when you want to determine the menu that is being manipulated at moment.

In fact, the function can retrieve the parent item menu.

This helps to select the appropriate menu to add submenu items.

The other technique (simple ones) to list item as the menu can be found here add li to wp_nav_menu

The snippet works for me but I found it is very old.

It is not bad to come up with a new way to create a submenu.

The next snippet implements wp_create_nav_menu and wp_update_menu_item.

wp_create_nav_menu fetches the menu id.

And,

wp_update_menu_item fetches the parent item id.

The submenu can be created more dynamically.

Here, we go.

Code Snippet involving wp_create_nav_menu

Again, the code snippet is to be written in functions.php

Retrieve the menu id using the menu name like primary

1.$menuID = wp_create_nav_menu('primary');

Then, set the id of the item that you want to add a child element to it.

This can be accomplished by the wp_update_menu_item function.

2.$parentItemSelect = wp_update_menu_item($menuID,0,

3.array(

4.'menu-item-title' => 'The Parent Item',

5.'menu-item-url' => 'http://wepappsguide.com/vehicles'));

The next part is to add the item since the menu has provided the selected parent item.

wp_update_menu_item will add a child to a given menu item.

But this time the method includes parent item id.

You need to specify the parent before including another item in the submenu.

6.wp_update_menu_item($menuID,0,

7.array(

8.'menu-item-title' => 'SubMenuCreationWordPress',

9.'menu-item-url' => 'http://webappsguide.com/vehiclesl/submenu',

9.'menu-item-parent-id' => $parentItemSelect));

A little bit of explanation.

When a Parent item id is obtained, its name and the URL must be specified.

Line-4 describes the current menu item name.

And Line-5 sets its link.

The function wp_update_menu_item will add child once parent id is available.

The menu-item-parent-id represents the number (ID) of a menu item that takes a new child.

You can see clearly in line-9.

Line-8 designates the item URL.

Conclusion.

To include a new item in the submenu a number of WordPress functions and action hooks can take a part in the process.

The apply_filter always can pass wp_nav_menu_objects to rearrange all menu items before HTML display.

Hence, the wp_nav_menu_objects brings objects that can include a new sub-item for a specific parent item.

The array that contains title, item URL, and parent item must be created to add a submenu item.

When you develop a WordPress theme from scratch you can add an extra CSS style sheet to design properly a new item.