The document provides a guide on creating and managing WordPress menus with best practices for naming and registering menus, as well as utilizing PHP functions for their implementation. It highlights strategies for customizing menu behavior, including filtering classes and reusing menus across multisite installations. The content also emphasizes the significance of logical naming and CSS styles for WordPress menus.

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