Adding Custom Menu Locations in WordPress Themes

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:

<?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
	));
?>

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:

<?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');
}
?>

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:

<?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
	));
?>

 

33 Responses to “Adding Custom Menu Locations in WordPress Themes”

  • Chris says: Mar 8, 2013 at 9:46 pm

    Nice work, Doug. This is GREAT!

  • Masud says: Sep 9, 2013 at 6:52 am

    Thanks, Doug. Very helpful!

  • abi says: Sep 25, 2013 at 4:50 am

    drop down menus is not appearing

    • Doug says: Oct 1, 2013 at 9:30 am

      Try adding the depth parameter to wp_nav_menu array, i.e.:

      wp_nav_menu(array(
      'depth' => 2,
      ));

      • Rina kanabar says: Dec 22, 2014 at 11:06 pm

        you have nice code

        • jasa seo says: Aug 5, 2015 at 10:23 am

          This is the same as adding custom menu in wordpress dashboard?

  • ambudy says: Sep 25, 2013 at 2:30 pm

    Hey great stuff! I already have a menu, how do I disable that before inserting this code? Thanks

  • Iva says: Jan 10, 2014 at 4:05 am

    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?

    • Doug says: Jan 25, 2014 at 2:47 pm

      Try replacing with "STYLESHEETPATH" when using a child theme. Thanks!

    • Billzuraf says: May 22, 2016 at 10:20 pm

      You are right

  • e Park Ltd says: Jan 14, 2014 at 6:50 pm

    Thanks, Very helpful!

  • Himanshu Goel says: Jan 20, 2014 at 8:05 am

    It was really helpful in customizing my new theme...

  • WordPress links | My Blog says: Mar 20, 2014 at 5:08 pm

    […] http://www.lanexa.net/2013/03/adding-custom-menu-locations-in-wordpress-themes/ […]

  • toko online murah says: May 10, 2014 at 3:14 am

    This is the same as adding custom menu in wordpress dashboard?

  • Subroto Biswas says: Oct 9, 2014 at 5:17 pm

    It is really great. It help me in a time when i have no option.

  • DISTRIBUTOR BENIH says: Nov 23, 2014 at 8:01 pm

    I have found very useful information over there, thanks for sharing this. please try to add more informative posts in order to keep us in touch.

  • Vinay Narang says: Dec 17, 2014 at 11:20 pm

    It's realy very helpful....Thanks a lot Doug

  • How to Add Custom Menu in Page Template in WordPress | Freelance UI/UX Designer Developer says: Mar 1, 2015 at 6:05 am

    […] Ref: http://codex.wordpress.org/Navigation_Menus http://www.wpbeginner.com/wp-themes/how-to-add-custom-navigation-menus-in-wordpress-3-0-themes/ http://www.lanexa.net/2013/03/adding-custom-menu-locations-in-wordpress-themes/ […]

  • Faedah Jaya says: Mar 6, 2015 at 10:33 pm

    great thought…. so true! that’s the deal of any business if you possess no skills and need external knowledge… Situs Perusahaan

  • Junaid ashraf says: Mar 27, 2015 at 7:57 am

    that's really nice work.nice structure for understand to anybody. thank you.

  • Denis says: Apr 19, 2015 at 10:22 am

    very helpful! thanks a lot!

    • jasa seo says: Feb 2, 2016 at 1:07 am

      Work for me Thanks for your sharing

  • Daniel Keith says: Jun 15, 2015 at 8:50 pm

    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.

  • zorayax says: Jun 25, 2015 at 8:03 am

    great post. thanks for sharing us.

  • Scott says: Jul 23, 2015 at 6:23 am

    +1!

  • jasa web terbaik says: Aug 3, 2015 at 7:18 pm

    Thanks add this to my child themes

  • Dee Wan says: Oct 6, 2015 at 8:22 pm

    Thank's for info, i can now add new menu myself and didn't need to buy it.

  • pakar seo says: Nov 20, 2015 at 7:39 am

    thanks for the tutorial.. love it!

  • obat rematik says: Dec 8, 2015 at 6:49 pm

    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.

  • Jordi Ma says: Jan 11, 2016 at 7:51 am

    Very usefult

  • elliottaylor says: Jun 14, 2016 at 5:07 am

    You are missing some semi-colons on your echo for first example - otherwise good.

 
Leave a Comment
User

Mail

Globe

Comment