1.
@jonnyauk
https://wider.co.uk
Making WordPress
menus smarter
Jonny Allbut
Digital Director

2.
@jonnyauk
https://wider.co.uk
WordPress menus
admin rocks!

3.
@jonnyauk
https://wider.co.uk
Creating WordPress
editable menus

4.
@jonnyauk
https://wider.co.uk
• Logical naming for flexibility.
• Name by context/content of menu rather than location:
- Header Navigation > Primary Navigation
- Footer Column 3 Right Menu > Service Leads
It’s all in a name…

5.
@jonnyauk
https://wider.co.uk
<?php
function mytheme_wp_theme_init(){
$menus = array(
'primary-nav' => __( 'Primary navigation', 'mytheme' ),
'leads-nav' => __( 'Leads navigation', 'mytheme' ),
'legal-nav' => __( 'Legal navigation', 'mytheme' )
);
register_nav_menus( $menus );
}
add_action( 'wp_loaded', 'mytheme_wp_theme_init', 1 );
?>
1) Register in functions.php
https://developer.wordpress.org/reference/functions/register_nav_menus/

6.
@jonnyauk
https://wider.co.uk
<?php
wp_nav_menu( array(
'menu' => 'Primary navigation',
'menu_id' => 'menu-primary-footer-nav',
'container_class' => false,
'depth' => 1,
'theme_location' => 'primary-nav'
));
?>
2) Output menu in theme
https://developer.wordpress.org/reference/functions/wp_nav_menu/

7.
@jonnyauk
https://wider.co.uk
<?php
$this_menu = wp_nav_menu(
array(
'container_class'=> 'footer-navigation clearfix',
'theme_location' => 'secondary',
'echo' => false,
'fallback_cb' => '__return_false'
)
);
echo ( !empty($this_menu) ) ? '<div class="row menu-box">' .
$this_menu . '</div>' : '';
?>
Avoiding empty menus and markup

8.
@jonnyauk
https://wider.co.uk
WordPress menus
CSS

9.
@jonnyauk
https://wider.co.uk
<ul id="primary-header-nav" class="menu">
<li id="menu-item-7" class="menu-item menu-item-type-post_type menu-item-
object-page current-menu-item page_item page-item-2 current_page_item menu-
item-7"><a href="http://demo-menus.beta/menus-2-css/sample-page/">Sample
Page</a></li>
<li id="menu-item-8" class="menu-item menu-item-type-post_type menu-item-
object-post menu-item-8"><a href="http://demo-menus.beta/menus-2-css/
2016/10/21/sample-post/">Sample Post</a></li>
<li id="menu-item-11" class="menu-item menu-item-type-post_type menu-item-
object-testimonials menu-item-11"><a href="http://demo-menus.beta/menus-2-css/
testimonials/sample-testimonial/">Sample Testimonial</a></li>
</ul>
What do you get?

10.
@jonnyauk
https://wider.co.uk
CSS classes of interest
.menu-item-object-posttype
.current-menu-item
.current_page_item

11.
@jonnyauk
https://wider.co.uk
Re-using menus in multisite
<?php
if ( get_current_blog_id() != 1 ) {
switch_to_blog( 1 );
wp_nav_menu( array(
'container' => false,
'theme_location' => 'secondary-nav',
'walker' => new aub_epc_menu_icon_spanner()
) );
restore_current_blog();
}
?>

12.
@jonnyauk
https://wider.co.uk
Delving deeper into
menus - filtering

13.
@jonnyauk
https://wider.co.uk
wp-includes/
class-walker-nav-menu.php
search for ‘apply_filter’

14.
@jonnyauk
https://wider.co.uk
Filtering nav_menu_css_class
https://developer.wordpress.org/reference/hooks/nav_menu_css_class/
<?php
function mytheme_menu_highlighter( $classes, $item, $args ){
if ( is_admin() ) return;
if ( ( 'leads-nav' == $args->theme_location &&
(is_post_type_archive('blog') || is_singular( 'blog') || is_date() ||
is_category() ) && 'Blog' == $item->title) )
{ $classes[] = 'current-menu-item';}
return array_unique( $classes );
}
add_filter( 'nav_menu_css_class', 'mytheme_menu_highlighter', 10, 3 );
?>

15.
@jonnyauk
https://wider.co.uk
Filtering walker_nav_menu_start_el
https://developer.wordpress.org/reference/hooks/walker_nav_menu_start_el/
<?php
function mytheme_menu_no_link( $item_output, $item, $depth, $args ) {
if ( !is_admin() && property_exists($args, 'menu_id') && $args->menu_id ==
'menu-primary-navigation' ) {
if ( property_exists($item, 'classes') && is_array($item->classes) ) {
$item_output = ( in_array('menu-title-no-link', $item->classes) ) ?
preg_replace('#<a.*?>([^>]*)</a>#i', '$1', $item_output) : $item_output;
}
}
return $item_output;
}
add_filter( 'walker_nav_menu_start_el', 'mytheme_menu_no_link', 10, 4);
?>

16.
@jonnyauk
https://wider.co.uk
wp-includes/
class-walker-nav-menu.php

17.
@jonnyauk
https://wider.co.uk
Using a custom navigation walker
<?php
wp_nav_menu( array(
'menu' => 'Primary navigation',
'menu_id' => 'menu-primary-footer-nav',
'theme_location' => ‘primary-nav'
'walker' => new my_nav_walker()
));
?>

18.
@jonnyauk
https://wider.co.uk
Now go create some
awesome menus!
Jonny Allbut
Digital Director