Implementing Custom Menus in WordPress Themes

Posted on 17th June 2023

One of the most powerful features of WordPress is the ability to create custom menus for your website. Custom menus give you the ability to easily add, remove, and rearrange menu items, as well as create multiple menus for different purposes.

In this article, we will show you how to create custom menus in WordPress themes.

Creating a Custom Menu

First, you need to create a new file in your theme called functions.php.

In this file, you need to add the following code:

This code will create a new custom menu location called “Custom Menu”.

Next, you need to edit your theme’s header.php file and add the following code:

‘custom-menu’ ) ); ?>

This code will display the custom menu you created in the header of your theme.

Adding Menu Items

Now that you have created a custom menu, it’s time to add some menu items to it.

To do this, go to the Appearance > Menus page and select the custom menu you created from the Select a menu to edit dropdown.

Next, you need to add the menu items you want to include in your custom menu. You can add pages, posts, categories, and even custom links.

Once you’re done adding menu items, click on the Save Menu button to save your changes.

Customizing Your Menu

The WordPress custom menu system gives you a lot of flexibility to customize your menus.

For example, you can change the order of your menu items by dragging and dropping them into the order you want. You can also create sub-menus by drag and droping menu items under other menu items.

You can also change the Menu Structure by clicking on the Screen Options tab in the top right corner of the screen and selecting the Show advanced menu properties checkbox.

This will give you additional options to change the CSS Classes and Link Relationship (XFN) for each menu item.

Conclusion

That’s all for now. In this article, we showed you how to create custom menus in WordPress themes. You can use this technique to create multiple menus for different purposes.

If you have any questions, please let us know in the comments.

As you can see, there are many ways to create custom menus in WordPress themes. In this article, we have covered two methods: using the WordPress menu system and using a custom nav walker class.

Both methods have their advantages and disadvantages, so it is up to you to decide which one is best for your project. If you need more control over the output of your menus, or if you need to create a custom menu walker, then the nav walker class is the way to go. However, if you just need a simple way to create and output menus, then the WordPress menu system is probably the better option.

Implementing Custom Menus in WordPress Themes

As we saw in the previous article, the default WordPress menu system is quite limited. In this article, we’ll see how to create custom menus that are much more flexible and powerful.

To create a custom menu, the first thing you need to do is register a new menu location. This is done by adding the following code to your theme’s functions.php file:

register_nav_menu(‘my-custom-menu’, ‘My Custom Menu’);

This code registers a new menu location with the slug ‘my-custom-menu’. The second argument is the description of the menu location, which is displayed in the admin interface.

Once you’ve registered a new menu location, you can then add a custom menu to that location by going to the Appearance -> Menus page in the WordPress admin.

At the top of the page, you’ll see a dropdown menu labelled “Select a menu to edit”. This is where you can select the custom menu that you want to edit. If you don’t have any custom menus yet, you’ll need to create one by clicking on the “Create a new menu” link.

Once you’ve selected a menu, you can then add items to it by using the various controls on the left hand side of the page. You can add pages, posts, categories, custom links, and more.

Once you’ve added all the items you want to your menu, you can then save it by clicking on the “Save Menu” button.

Now that you’ve saved your menu, it’s time to add it to your theme. This is done by calling the wp_nav_menu() function. This function accepts a number of arguments, but the most important one is the ‘theme_location’ argument. This argument tells WordPress which menu location to use. In our case, we want to use the menu location we registered earlier, so we’ll set this argument to ‘my-custom-menu’.

Here’s an example of how to call the wp_nav_menu() function:

wp_nav_menu(array( ‘theme_location’ => ‘my-custom-menu’ ));

This code should be added to the location in your theme where you want the menu to appear.

If you want to learn more about the wp_nav_menu() function and all the arguments it accepts, you can read the official documentation.

And that’s all there is to creating and adding custom menus to your WordPress theme!

Sub-Menu Items

To add sub-menu items, you need to use the wp_nav_menu() function with the ‘depth’ parameter set to 1. This will only display the top-level menu items.

Here’s an example:

‘primary’,
‘depth’ => 1
) );
?>

You can also use this function to display multiple menus in your theme. Simply create a new menu for each one you want to display.

Adding Menus to Sidebars

If you want to add a menu to a sidebar, you can use the WP Menu Widget. This widget will allow you to display any menu in any sidebar.

To use the widget, go to Appearance > Widgets and drag the WP Menu Widget into the sidebar you want to display it in. Then, select the menu you want to display from the dropdown.

You can also use the wp_nav_menu() function to display a menu in a sidebar. However, this method is not as flexible as using the widget.

Here’s an example:

‘primary’,
‘container_class’ => ‘menu-primary’
) );
?>

This will display the primary menu in a sidebar. The container_class parameter is optional. It allows you to add a CSS class to the sidebar container.

Adding Menus to Posts and Pages

If you want to add a menu to a specific post or page, you can use the WP Menu Widget. Simply drag the widget into the post or page editor and select the menu you want to display.

You can also use the wp_nav_menu() function to display a menu in a post or page. However, this method is not as flexible as using the widget.

Here’s an example:

‘primary’,
‘container_class’ => ‘menu-primary’
) );
?>

This will display the primary menu in a post or page. The container_class parameter is optional. It allows you to add a CSS class to the container.

Adding Menus to Template Files

If you want to add a menu to a template file, you can use the wp_nav_menu() function.

Here’s an example:

‘primary’,
‘container_class’ => ‘menu-primary’
) );
?>

This will display the primary menu in the template file. The container_class parameter is optional. It allows you to add a CSS class to the container.