Menu’s duplicated in footer

Replies: 0

I’m going to try and write this as clearly as possible but apologies if I miss something. I’ll try to be as thorough as possible in explaining how my navigation is currently set up.

What I’m trying to achieve: In the footer I need a duplicate of the main navigation (simple right?) and also an additional menu listing pages not shown in the main navigation.

My Main Navigation is created using a custom menu and uses the following code (thanks to @keesiemeijer) in the functions.php file.

// Remove id from nav menu items
add_filter( 'nav_menu_item_id', 'My_Theme_nav_menu_item_id', 10, 4 );

function My_Theme_nav_menu_item_id( $id, $item, $args, $depth ) {
	if ( 'header-menu' !== $args->theme_location ) {
		return $id;
	}

	return '';
}

// Add 'site-nav__item' class
add_filter( 'nav_menu_css_class', 'My_Theme_nav_menu_item_class', 10, 4 );

function My_Theme_nav_menu_item_class( $classes , $item, $args, $depth ) {

	if ( 'header-menu' !== $args->theme_location ) {
		return $classes;
	}

	$new_classes = array( 'site-nav__item' );
	if ( in_array( 'current-menu-item', $classes ) ) {
		$new_classes[] = 'selected';
	}

	return $new_classes;
}

// Add 'site-nav__link' class
add_filter( 'nav_menu_link_attributes', 'My_Theme_nav_menu_link_atts', 10, 4 );

function My_Theme_nav_menu_link_atts( $atts, $item, $args, $depth ) {

	if ( 'header-menu' !== $args->theme_location ) {
		return $atts;
	}

	$new_atts = array( 'class' => 'site-nav__link' );
	if ( isset( $atts['href'] ) ) {
		$new_atts['href'] = $atts['href'];
	}

	return $new_atts;
}

function html5blank_nav() {

	$menu = wp_nav_menu(
		array(
			'theme_location'  => 'header-menu',
			'menu'            => '',
			'container'       => '',
			'container_class' => '',
			'container_id'    => '',
			'menu_class'      => '',
			'menu_id'         => '',
			'echo'            => false,
			'fallback_cb'     => 'wp_page_menu',
			'before'          => '',
			'after'           => '',
			'link_before'     => '',
			'link_after'      => '',
			'items_wrap'      => '<ul class="site-nav__list">%3$s</ul>',
			'depth'           => 0,
			'walker'          => ''
		)
	);

	if ( $menu ) {
		echo $menu;
	}
}

I try to pull the same menu into the footer using this in the markup:

<?php footer_sitemap_nav(); ?>

And this in functions.php

function footer_sitemap_nav()
{
	wp_nav_menu(
	array(
		'theme_location'  => 'header-menu',
		'items_wrap'      => '<ul>%3$s</ul>'
		)
	);
}

This works but obviously it uses all the unique classes I added for the main navigation in the header. Is there any easy way to strip/replace them? If not maybe I’d be best off using the default classes – rather than overwrite everything in the CSS.

It would be a bit of a pain and not the most graceful thing but if I created another menu (appearance > menus) with exactly the same items as the main navigation achieve what I’m after? Doesn’t sound ideal though!

Finally, my 2nd footer nav listn should display 3 sub pages of a high-level page. To do this I’ve created a new menu and only selected the 3 pages I want to display. This is called ‘extra-menu’ and I’ve called it by using:

function footer_resources_nav()
{
	wp_nav_menu(
	array(
		'theme_location'  => 'extra-menu',
		'items_wrap'      => '<ul>%3$s</ul>'
		)
	);
}

That seems to work, does it all seem ok?

Sorry this seems like a really long post. I’m never to WordPress development and I don’t really know any PHP. So even when things appear to work I’m keen to not ‘hack’ things together or if I have to I like to at least know why 🙂

Thanks in advance!