Create Custom Navigation Menu in WordPress Themes
If you are running a WordPress website and want to create a WordPress custom menu, then you are in the right place.
Table of Content
For many people, this default styling and design does not cut it. This is why there is a huge demand for custom navigation menus for WordPress themes. In this article, I will cover how to create custom menu in WordPress through the WordPress custom menu code.
How to Create Custom Menu in WordPress
The first step in creating a custom WordPress navigation menu is to register the menu. To start with, add the following code to functions.php (located in the theme folder of your WordPress website):
1 2 3 4 |
function wp_custom_new_menu() { register_nav_menu('wpblog-custom-menu',__( 'WP Blog Menu' )); } add_action( 'init', 'wp_custom_new_menu' ); |
This function comes with a long range of parameters that could be found at WordPress.org Codex. Here is a default list of available parameters:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<?php $defaults = array( 'theme_location' => , 'menu' => , 'container' => 'div', 'container_class' => 'menu-{menu slug}-container', 'container_id' => , 'menu_class' => 'menu', 'menu_id' => , 'echo' => true, 'fallback_cb' => 'wp_page_menu', 'before' => , 'after' => , 'link_before' => , 'link_after' => , 'items_wrap' => '<ul id=\"%1$s\" class=\"%2$s\">%3$s</ul>', 'depth' => 0, 'walker' => ); ?> <?php wp_nav_menu( $defaults ); ?> |
At this point, go to the WordPress Admin > Appearance > Menus. Once there, either create or edit a new menu.
It often happens that a user needs to add additional navigation menu location. For this use the following code snippet:
1 2 3 4 5 6 7 8 9 |
function wp_custom_new_menu() { register_nav_menus( array( 'wpblog-custom-menu' => __( 'WP Blog Menu' ), 'extra-menu' => __( 'Extra Menu' ) ) ); } add_action( 'init', 'wp_custom_new_menu' ); |
Now that you have a new menu location, it is easy to add menu items. For this follow this great tutorial on adding and organizing custom menus.
Display Custom Navigation Menu
The custom navigation menu is ready for display. For this, add the code to the template file of the theme, at the location where you wish to display it.
1 2 3 4 5 |
<?php wp_nav_menu( array( 'theme_location' => 'wpblog-custom-menu', 'container_class' => 'wpblog-menu-class' ) ); ?> |
Style the Menus
Styling the menu is a simple task. Add the following CSS class, .wpblog-menu-class (located inside the theme folder) for adding style to the menus:
1 2 3 4 5 6 7 8 9 |
div.wpblog-menu-class ul { list-style-type: none; list-style: none; list-style-image: none; } div.wpblog-menu-class li { padding: 20px; display: inline; } |
Note: Best practice is to add above code in separate file.
Conclusion
In this tutorial, I have not only discussed how to create a custom menu in WordPress but also how to style and display it through the WordPress custom menu code.
Remember that you could add multiple menu locations for improving website navigation. If you need help with the code, do leave a comment and I will get back to you.
Create Faster WordPress Websites!
Free eBook on WordPress Performance right in your inbox.