How to create a WordPress Custom Menu and call it with Shortcode

How to create a WordPress Custom Menu and call it with Shortcode

Menu is an important tool in a WordPress theme, its ability to provide an easy navigation feature comes to be very handy. With it, you can create as many navigation areas you want in your sidebars, footers, headers and more. In this tutorial I will explain how to create a custom menu which can be called using a shortcode.

Procedure to create a WordPress Custom Menu

  • 1. Registering your custom menu in the functions.php file.
  • 2. Call your custom menu in the WordPress template file,like in be header.php, footer.php, page.php or any file depending on your needs.
Related tutorial which teaches how to create a WordPress Shortcode in your theme.

Registering Custom Menu

Registering a custom menu is done with the WordPress function register_nav_menu. It’s syntax is:

<?php register_nav_menu( $location, $description ); ?>

The ‘$location’ parameter is the identifier, it has to be unique so that no two custom menus have this same.

The ‘$description’ parameter is for identifying the menu in the WordPress Dashboard. You will only see $description parameter in the ‘Appearance>Menus’ section of the dashboard.

Check this related tutorial which explains how to make free image sliders with Meta Slider plugin.

To add a new custom menu simply add the below lines in your functions.php file:

/*Navigation Menus*/
function register_my_menu() {
  register_nav_menu('about-menu',__( 'About Menu' ));
}
add_action( 'init', 'register_my_menu' );
/*End*/

Note that I have set the menu identifier’s value as ‘about-menu’ and description’s value as ‘About Menu’.

To make sure the menu is added, go to the ‘Appearance > Menus’ section in the dashboard. Enter ‘Custom’, or any string, in the search box. Then click ‘Create Menu’ button to create the menu, and you will see ‘Menu Structure’ and ‘Menu Settings’ areas below it.

Check the below image:

WordPress Menu option under Appearance

WordPress Menu option under Appearance

Adding Items to Custom Menu

Here you will find out how to add items like ‘pages’, ‘posts’, ‘products’, ‘product categories’, ‘links’ etc to the menu. To do so, select the item from the left area and click ‘Add to Menu’ button.

Some items like ‘posts’, ‘products’ , ‘product categories’, etc will not show here because they are hidden by default. To unhide them, click the ‘Screen Options’ link at the top, and then select the checkboxes. This is shown by the below image:
Screen Options

Screen Options

Before adding items select the ‘About Menu’ checkbox, given under menu settings, to signify that the items are for this menu. ‘About Menu’ is the description of the menu which I created using the register_my_menu function.

Here, I am adding 2 items to the menu:

  • 1. First one is ‘Sample Page’. Select it then click ‘Add to Menu’.
  • 2. Second one ‘Hello world!’ post. Select it then click ‘Add to Menu’ button.

Now both of our items are added to the menu and it will look like as shown in the 2 images below.

Adding Items To WordPress Custom Menu

Adding Items To WordPress Custom Menu

 

WordPress Custom Menu Created

WordPress Custom Menu Created

Don’t forget to click ‘Save Menu’ button to save your menu.

Note – I can create sub item too by holding and dragging an item to the right. To remove it from sub item, do the opposite by holding and dragging it to the left. See the below image to understand it:

Sub Item In A Custom Menu

Sub Item In A Custom Menu

Calling The Custom Menu

You can call your custom menu in any location of your website using any of the 2 ways that are listed:

1. wp_nav_menu function

Calling the menu is done with WordPress wp_nav_menu function which is given below.

<?php wp_nav_menu( array( 'theme_location' => 'about-menu', 'container' => '', 'menu_class' => 'first' ) );?>

I have to put ‘about-menu’ for theme_location parameter, which is the location value for the menu I created earlier on.

You can increase the traffic to your website by optimizing the various areas like meta description, content, title and more. You can understand all these by reading the tutorial on SEO Terms that covers all of these things in details.

To show this menu simply put the above code in header.php, footer.php, sidebar.php, or any other template file you want. Some styling will also be necessary from your end in order to give the menu a good look design wise.

2. Shortcode

Sometimes there is a need to call the custom menu with a shortcode. For example, you want the administrator of the website to call this menu at their will and at any page/post they want.

So, here you have to make a shortcode, which will call this menu and the administrator can put this shortcode at any page or post.

The code that will create shortcode for this menu is given below. Simply put it in your functions.php file.

/*Creating shortcode for menu*/
function list_menu($atts, $content = null) {
	extract(shortcode_atts(array(  
		'menu'            => '', 
		'container'       => '', 
		'container_class' => '', 
		'container_id'    => '', 
		'menu_class'      => '', 
		'menu_id'         => '',
		'echo'            => true,
		'fallback_cb'     => 'wp_page_menu',
		'before'          => '',
		'after'           => '',
		'link_before'     => '',
		'link_after'      => '',
		'depth'           => 0,
		'walker'          => '',
		'theme_location'  => ''), 
		$atts));
 
	return wp_nav_menu( array( 
		'menu'            => $menu, 
		'container'       => $container, 
		'container_class' => $container_class, 
		'container_id'    => $container_id, 
		'menu_class'      => $menu_class, 
		'menu_id'         => $menu_id,
		'echo'            => false,
		'fallback_cb'     => $fallback_cb,
		'before'          => $before,
		'after'           => $after,
		'link_before'     => $link_before,
		'link_after'      => $link_after,
		'depth'           => $depth,
		'walker'          => $walker,
		'theme_location'  => $theme_location));
}
add_shortcode("listmenu", "list_menu");
/*End*/

Now simply paste the shortcode given below, in any page or post, where you want the menu to show up.

[listmenu theme_location='about-menu']

Check the below image to understand it:

Shortcode For Custom Menu

Shortcode For Custom Menu

The shortcode calls the function list_menu with a parameter theme_location, giving it a value of about-menu.

The list_menu function in turn calls function wp_nav_menu and passes to it all the values (here ‘theme_location’).

Please check wp_nav_menu function details at http://codex.wordpress.org/Function_Reference/wp_nav_menu

If you check the below image of the about page, you will notice there is a menu in the left sidebar. It comes because I have written the shortcode in ‘about’ page and provided some styling to the menu.

Custom Menu in Page

Custom Menu in Page

You can create as many WordPress Custom Menu you like, and calls them with the same shortcode. Just change the theme_location value.

Share this article -

yogihosting

ABOUT THE AUTHOR

This article has been written by the Technical Staff of YogiHosting. Check out other articles on "WordPress, SEO, jQuery, HTML" and more.