Menus are of great important and if not customized properly, it will just increase the bounce rate of your website.Visitors should be offered a proper navigation menu, I have already discussed a way of making a navigation menu using the HTML and CSS but that was very basic and has nothing to take with wordpress. Today, in this tutorial you will learn how to add a wordpress custom menu using the PHP. This will be very helpful for the newbies as you will be able to add any menu item, can create submenus and can also edit the title and links of the WordPress custom menu.
You will need to edit the theme files, so grab the FTP and also a good code editor. I’ll soon be writing a good post on how efficiently can you edit files and upload them to your hosting.
Registering WordPress Custom Menu For Navigation:
You need to edit the “functions.php” of your activated wordpress theme to register a wordpress custom menu. There add the following piece of code:
register_nav_menus( array( 'primary' => __( 'Primary Menu', 'talkofweb_wordpress_custom_menu' ), ) );
This will register a primary menu place for your activated wordpress theme. Here I am supposing that you theme has no menu place to add menu under “Appearance>Menus” in the dashboard. The above code in the functions.php will simply add a place where you can add your custom menu under the dashboard menus.
Adding Menu and Some Menu Items (Links) in WordPress Menus Section:
You need to create a new menu bar in the menus section. For that look at that plus sign if you have already created any menu under the appearance menus section. If you haven’t created any menu then you will be prompted to create a menu first under “Dashboard>Appearance>Menus” . There just create a menu with your desired name.
After you have created a menu, now you need to add some links into it using the left pane link generator tab. Add the links which you want in the menu and then at the end press save menu. From the left pane menus to add the links or menu items you can also add categories or pages.
After that look at the top left pane, there you will see a drop down under the primary menu. This primary menu is the same which has been registered using the functions.php code above. Now, drop it down and there you will see the name of the menu which you have just created. Select that name in the Primary menu and then hit save. You are done.
Making the WordPress Custom Menu Appear at the required Place in your Blog:
Uptill now you have registered a primary menu in the wordpress theme, you have created a menu in the menus section of wordpress under appearance and now it’s time to show that specific menu anywhere in the theme, whether it’s under the head section or else it’s above the footer.
Supposing that you want to add menu under the head section of wordpress blog:
In order to add the menu just at the top of the blog page, you must edit the “header.php” of the theme and then add the following code which will make custom menu appear which you have made above using this tutorial. After placing the code press update and save the file. The output will be a raw navigation menu, don’t worry CSS (styling) part will come soon in the next posts.
<?php wp_nav_menu( array( 'theme_location' => 'primary', 'container' => 'div', 'container_class' => 'menu', ) ); ?>
The above code placed anywhere will just echo the content of the created navigation menu. There are certain parameters which can be controlled with the above code, like the class or id given to the container div of the navigation menu. Controlling the output of the li and ul elements in wordpress custom menu. (I have given the container to be a div in the above code with a class name menu, so that if you are advanced enough to apply CSS.)
I have not discussed the css part of the navigation menu, up till now it was just the core language which was used to create a wordpress custom navigation menu. I shall explain you in another article that how can we style this custom wordpress navigation bar in a simple minimal way, or else you can also refer to this guide if you think that you can handle this yourself.
Hi Wamiq,
Great tutorial. How can I add CSS to this custom menu?
Thanks for sharing your professional experience.
You might need to edit style.css of your template. With your comment I hope you know CSS, just go to appearance and edit style.css and there you might put your css.