wordcamp manchester 2016 - making wordpress menus smarter
TRANSCRIPT
@jonnyaukhttps://wider.co.uk
Making WordPressmenus smarter
Jonny Allbut Digital Director
@jonnyaukhttps://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…
@jonnyaukhttps://wider.co.uk
<?phpfunction 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.phphttps://developer.wordpress.org/reference/functions/register_nav_menus/
@jonnyaukhttps://wider.co.uk
<?phpwp_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 themehttps://developer.wordpress.org/reference/functions/wp_nav_menu/
@jonnyaukhttps://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
@jonnyaukhttps://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?
@jonnyaukhttps://wider.co.uk
CSS classes of interest
.menu-item-object-posttype
.current-menu-item
.current_page_item
@jonnyaukhttps://wider.co.uk
Re-using menus in multisite
<?phpif ( 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(); }?>
@jonnyaukhttps://wider.co.uk
wp-includes/class-walker-nav-menu.php
search for ‘apply_filter’
@jonnyaukhttps://wider.co.uk
Filtering nav_menu_css_classhttps://developer.wordpress.org/reference/hooks/nav_menu_css_class/
<?phpfunction 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 );?>
@jonnyaukhttps://wider.co.uk
Filtering walker_nav_menu_start_elhttps://developer.wordpress.org/reference/hooks/walker_nav_menu_start_el/
<?phpfunction 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);?>
@jonnyaukhttps://wider.co.uk
Using a custom navigation walker
<?phpwp_nav_menu( array( 'menu' => 'Primary navigation', 'menu_id' => 'menu-primary-footer-nav', 'theme_location' => ‘primary-nav' 'walker' => new my_nav_walker() ));?>
@jonnyaukhttps://wider.co.uk
Now go create some awesome menus!
Jonny Allbut Digital Director