Add Additional Menus to Child Theme

TwentyTwelve supports one menu and TwentyFourteen supports two but more can be added.

These instructions apply to TwentyTwelve but can be adapted to TwentyFourteen.

Child theme files:

  • functions.php
  • header.php
  • js/navigation.js

functions.php

De-queue the original navigation.js script and queue the one in the child theme.

// de-queue navigation js
add_action('wp_print_scripts','tto_dequeue_navigation');
	function tto_dequeue_navigation() {
		wp_dequeue_script( 'twentytwelve-navigation' );
}
// load the new navigation js
	function tto_custom_scripts()
{

// Register the new navigation script
	wp_register_script( 'uppernav-script', get_stylesheet_directory_uri() . '/js/navigation.js', array(), '1.0', true );

// Enqueue the new navigation script
	wp_enqueue_script( 'uppernav-script' );
}
add_action( 'wp_enqueue_scripts', 'tto_custom_scripts' );

 Register the menu areas

// Add the new menu
register_nav_menus( array(
	'primary' => __( 'Lower Menu (Below Header))', 'tto'),
    'secondary' => __( 'Top Menu (Above Header)', 'tto' ),
) );

 header.php

Add new menu location

  <!-- Upper Navigation -->
        <nav id="upper-navigation" class="main-navigation" role="navigation">
        	<h3 class="menu-toggle"><?php _e( 'General Menu', 'twentytwelve' ); ?></h3>
        	<div class="skip-link assistive-text"><a href="#content" title="<?php esc_attr_e( 'Skip to content', 'twentytwelve' ); ?>"><?php _e( 'Skip to content', 'twentytwelve' ); ?></a></div>
        	<?php wp_nav_menu( array( 'theme_location' => 'secondary', 'menu_class' => 'nav-menu', 'fallback_cb' => false ) ); ?>
        </nav><!-- #upper-navigation -->

 fallback_cb=>false prevents menu showing all pages if no menu is allocated to this location.

js/functions.js

Enable responsive behaviour of the new menu

// Upper Navigation
( function() {
	var button = document.getElementById( 'upper-navigation' ).getElementsByTagName( 'h3' )[0],
	    menu   = document.getElementById( 'upper-navigation' ).getElementsByTagName( 'ul' )[0];

	if ( undefined === button )
		return false;

	// Hide button if menu is missing or empty.
	if ( undefined === menu || ! menu.childNodes.length ) {
		button.style.display = 'none';
		return false;
	}

	button.onclick = function() {
		if ( -1 == menu.className.indexOf( 'nav-menu' ) )
			menu.className = 'nav-menu';

		if ( -1 != button.className.indexOf( 'toggled-on' ) ) {
			button.className = button.className.replace( ' toggled-on', '' );
			menu.className = menu.className.replace( ' toggled-on', '' );
		} else {
			button.className += ' toggled-on';
			menu.className += ' toggled-on';
		}
	};
} )();

 TwentyFourteen Theme

Navigation functions are jQuery driven in js/functions.js which handles two menus but can be adpeted to handle more.