Adding Custom Menu Locations in WordPress Themes

Doug Support 33 Comments

Basic Setup

Step 1: First, we need to register your new menus. In this example, we’ll create the menus Header Navigation and Expanded Footer. Add this PHP code to your functions.php, or link to it in a separate file:


// Add Your Menu Locations
function register_my_menus() {
  register_nav_menus(
    array(  
    	'header_navigation' => __( 'Header Navigation' ), 
    	'expanded_footer' => __( 'Expanded Footer' )
    )
  );
} 
add_action( 'init', 'register_my_menus' );

Step 2: Let your users know that your menu location exists by adding a message to the front end when no menu is yet assigned. Insert this code directly below the previous:


function default_header_nav() { // HTML markup for a default message in menu location
	echo "<ul class='nav'>					
		<li>Create the Header Navigation</li>
	</ul>"
}

function default_expanded_footer() { 
	echo "<ul class='nav'>					
		<li>Create the Expanded Footer</li>
	</ul>"
}

Step 3: Insert this code into your templates wherever you want your Header Navigation menu to appear:

&lt;?php 
	wp_nav_menu(array(
		'theme_location' => 'header_navigation', // menu slug from step 1
		'container' => false, // 'div' container will not be added
		'menu_class' => 'nav', // <ul class="nav"> 
		'fallback_cb' => 'default_header_nav', // name of default function from step 2
	));
?&gt;

Advanced Setup

Step 1: Get Organized
I like to keep my functions.php file nice & clean by separating various functions into more manageable files. So I always create an “admin” directory within my theme folder. I then nestle a “func” directory inside that. This way, all of my separated functions files live in “/mytheme/admin/func/.”
Now let your functions.php file know about this directory and give it an easy way to locate it. Insert this code to the top of functions.php:


define('THEMEADMIN', TEMPLATEPATH . '/admin');
define('THEMEFUNC', TEMPLATEPATH . '/admin/func');

Step 2: For this example, I will also need a “menus” directory nestled inside of “func”. The “menus” directory will contain 3 files, 2 of which will be your default navigation HTML markup. We will call them default_header_nav.php and default_expanded_footer.php. This approach allows for more elaborate markup, such as a dynamic link to the menu editor. These files will be very similar, so I’ll just give the code for one – default_header_nav.php:

<div class="your-container-class">
	<ul class="your-ul-class" >					
		<li><a href="<?php bloginfo('url'); ?>/wp-admin/nav-menus.php">Create the Header Navigation</a></li>
	</ul>
</div>

Note that this file is intended to give you the freedom to add whatever markup you wish. Most likely, you’ll want to match the markup that will be given to an assigned menu.

Step 3: Create the 3rd & final file to live within “/mytheme/admin/func/menus”, which we will name menus.php and will contain the main menu registration code:


&lt;?php
// Add Your Menu Locations
function register_my_menus() {
  register_nav_menus(
    array(  
    	'header_navigation' => __( 'Header Navigation' ), 
    	'expanded_footer' => __( 'Expanded Footer' )
    )
  );
} 
add_action( 'init', 'register_my_menus' );

function default_header_nav() { // link to the default menu markup
	require_once (THEMEFUNC . '/menus/default_header_nav.php');
}

function default_expanded_footer() { 
	require_once (THEMEFUNC . '/menus/default_expanded_footer.php');
}
?&gt;

Note that we’re using the newly defined path “THEMEFUNC.”

Step 4: Go back to functions.php and link up this file structure. Insert this below the previously added path definitions:


// Load custom menu locations
require_once(THEMEFUNC . '/menus/menus.php');

Step 5: Same as with the basic setup, insert this code into your template where you want your Header Navigation menu to appear:


&lt;?php 
	wp_nav_menu(array(
		'theme_location' => 'header_navigation', // menu slug from step 1
		'container' => false, // 'div' container will not be added
		'menu_class' => 'nav', // <ul class="nav"> 
		'fallback_cb' => 'default_header_nav', // name of default function from step 2
	));
?&gt;

Comments 33

    1. Post
      Author
  1. Hi, great staff.
    Little problem with “TEMPLATEPATH”…I am using a child theme, so it telling me that cannot find menus.php because it searching it inside of parent admin, not the child one.

    any idea?

    1. Post
      Author
  2. Pingback: WordPress links | My Blog

  3. Pingback: How to Add Custom Menu in Page Template in WordPress | Freelance UI/UX Designer Developer

  4. Hi there,
    Great tutorial. It helped me a lot to add custom menus in my website.
    But I am wondering about one thing, that is how can I add CSS to this custom menu?
    Thanks in advance for your professional support.

  5. Hi there, Great tutorial. It helped me a lot to add custom menus in my website. But I am wondering about one thing, that is how can I add CSS to this custom menu? Thanks in advance for your professional support.

Leave a Reply

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