Add menu item programmatically in WordPress
In WordPress, the menu can add a new menu item programmatically without using the Menus widget in the WordPress dashboard.
This involves the addition of a function to functions.php
To add the menu item, create a menu function in the functions.php which sets a variable that holds the menu list item.
A list item contains the anchor tag. An anchor tag forms a link for a specific page.
It is useful to add menu items programmatically when a theme comes with an initial menu.
Code Snippet For a Menu Item
1.function menuProgrammatically($item){
2.$firstMenuItem = '<li><a href=".home_url('/')."'>'".Home.'</a>';
3.$secondItem = '<li><a href=".home_url('/')./second.html"'>'".Home.'</a>';
4.return $item.$secondItem.$firstMenuItem;
5.}
6.add_filter('wp_nav_menu_items','menuProgrammatically');
Code Snippet Explanation
In the WordPress framework, the add_filter function adds an extra feature to the existing widget.
A good example is when adding the new component to an existing menu.
The add_filter changes the menu items by adding a new item.
That is why line-6 calls the function first.
In line-6 context, add_filter takes wp_nav_menu_item action hook.
Defining the menu items.
Define menu items in specialized functions.
The function returns the string value that holds HTML list item tags to be added in the specific menu.
For example, Line-1 creates menuProgrammatically function that includes a parameter.
You know!
Before the menu is printed all its items go to the filter.
That is why the add_filter uses wp_nav_menu_items to observe the available menu items.
The menuProgrammatically function receives these list item tags.
Inside the function, specify the items by writing list items and anchor tags.
Line-2 for instance holds the first menu item to be added to the currently active menu.
Line-3 adds the second menu items.
In fact, the function includes many menu elements as much as you wish.
Merge new items to current Menu elements
Line-6 returns all menu elements including the newly added elements.
Line-6 append the $item variable to the string values of the first item and second item.
The appending of three variables merges all menu objects together.
This means when a function(menuProgrammatically), the function provides list item tags as a string.
These values will be used by add_filter.
Add item to a specific menu.
This solution adds the menu item to a specified menu.
It is useful for a WordPress website that has more than one menu.
To add the menu list element to a specific, call add_filter function.
The filter action hook takes the wp_nav_menu_items and the function that creates menu items
add_action(‘wp_nav_menu_items’,’menuItemToSpecific’);
Then, create a function (menuItemToSpecific) to add the newly created item to a specific existing menu.
1.function menuItemToSpecific($items, $args){
2.if($rgs -> theme_location = = 'primaryMenu'){
3.$item = $items.'<li><a href = "http://webapp.com/shops">All Shops</a> </li>'
4.}
5.return $item;
6.}
Code snippet explanation
The function passes two arguments.
- $items representing the targeted menu items
- $args representing an array containing the objects of wp_nav_menu
The wp_nav_menu brings an array in which one of its elements is a theme_location.
A theme_location can check the registered menus.
From the function, line-2 checks if the menu is primaryMenu.
This means the primaryMenu is supposed to include the extra item.
When this is true, the HTML list item and anchor text item will be appended to the $items variable.
And line-6 returns the new item that is going to be added to a primaryMenu.
You can add list items in menus using this method How to Use wp_nav_menu to Add Class to ul, a(anchor tag) and li
wp_nav_menu_items action hook.
The wp_nav_menu_items action hook plays a key in menu customization.
It simplifies the process involving the addition of extra items to the menu programmatically.
This action hook helps to modify the HTML list contents.
wp_nav_menu_items is passed in add_filter for menu modifications.
When add_action takes in string value that is created by a function as well array argument from wp_nav_menu.
The menu wp_nav_menu holds an element that can determine a specific menu.
But if the website has only one menu, there is no need to include the wp_nav_menu like in the first code snippet.
Things to note.
You may face some issues when you add a menu programmatically using the method available here.
First thing first,
Make sure a menu you want to add an item has been registered.
Without registering a menu nothing will happen.
And you may end up a bit confused.
To register a WordPress menu, open functions.php
Create a function and call the register_nav_menu function.
The register_nav_menu should receive the values from an array.
Then, specifies your preferred menu names. The array is an associative array.
Hence the values passed in the array have keys like ‘primaryMenu’=>’Primary Menu’
Here is a complete snippet to register a menu.
function registeringMenu(){
register_nav_menus(
array(
'primaryMenu'=>'Primary Menu',
'secondMenu'=>'Secondary Menu',)
);
}
add_action('add_theme_support','registeringMenu');
Second,
Provide the correct location of the menu you want to add the item.
In the snippet that adds an item to a specific menu, the theme_location has been used.
The theme_location uses a key to retrieve a certain menu location.
For example.
To the list item to Primary Menu the location object calls theme_location to check the menu setting like this $args=>theme_location == ‘primaryMenuu’
Wrap-up.
To sum up, the menu always modified by add_action.
The add_action passes wp_nav_menu_items and the string value that contains anchor tags and list tags.
Also, a website that got many menus can use the theme_location object .to add the items to a certain menu.
Now, you can include all the methods to build menu plugins or develop WordPress theme from scratch
