How To Create A Simple WordPress Theme From Scratch – Part 3

Wordpress

Hi everyone, This article is the continuation of How to create a simple wordpress theme from scratch part II.

We are going to create a navigation menu for your custom theme.

Please follow below steps, if you want to register navigation menu for your custom theme. then you want to replace the html menu items by wordpress functions. To achieve this please continue reading this article and do the following steps.

Creating Menus

Register menu in functions.php

Open your functions.php in your theme root directory in any text editor, then you want to write a php in built function to register the menu for your custom theme. In the given code shows how to register the menu in your wordpress site/blog with the help of functions.php page using register_nav_menus() function.

1
2
3
4
5
6
<?php
register_nav_menus(
array(register_nav_menus(array('primary' => 'Header Menu', 'secondary' => 'Secondary Menu' ));
?>

Register your navigation menu using register_nav_menu() – used for creating a single menu, or register_nav_menus()– used for creating multiple menu.

register_nav_menu()

creating a single menu

usage: <?php register_nav_menus( array('primary' =>'Main Menu') ); ?>

register_nav_menus() 

creating multiple menu.

usage: <?php $arr= array('primary' => 'Header Menu','secondary' => 'Secondary menu','footer' => 'Footer Menu'); 
register_nav_menus( $arr ); ?>

$arr is an associative array of menu locations(key) and descriptions(value).

Now you can find these registered locations on your admin dashboard and choose the locations by creating separate menus or same menu for all locations by selecting the checkbox.

At the bottom of the above image you can find the locations that we register on wordpress functions.php page.

Add menu location to your theme

Find the location of your menu items in your custom theme. and put below  php code to view the menu created on wordpress admin dashboard. The value of theme_location is depends on the location you are registered on register_nav_menus() or register_nav_menu() in functions.php page.

1
2
<?php wp_nav_menu(array('theme_location' => 'primary')) ?>

wp_nav_menu( array $args = array() )

Displays a navigation menu on your theme. Given a theme_location parameter, the function displays the menu assigned to that location. If no such location exists or no menu is assigned to it

Note:In the given examples the ids are either primary or secondary.

Leave a Reply

Your email address will not be published. Required fields are marked *