Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

WordCamp Manchester 2016 - Making WordPress Menus Smarter

1,125 views

Published on

Presented at WordCamp Manchester 2016, covering some tricks and tricks on getting more out of WordPress menus.

Published in: Internet
  • ➤➤ How Long Does She Want You to Last? Here's the link to the FREE report  https://tinyurl.com/rockhardxxx
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

WordCamp Manchester 2016 - Making WordPress Menus Smarter

  1. 1. @jonnyauk https://wider.co.uk Making WordPress
 menus smarter Jonny Allbut Digital Director
  2. 2. @jonnyauk https://wider.co.uk WordPress menus admin rocks!
  3. 3. @jonnyauk https://wider.co.uk Creating WordPress editable menus
  4. 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. 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. 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. 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. 8. @jonnyauk https://wider.co.uk WordPress menus
 CSS
  9. 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. 10. @jonnyauk https://wider.co.uk CSS classes of interest .menu-item-object-posttype .current-menu-item .current_page_item
  11. 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. 12. @jonnyauk https://wider.co.uk Delving deeper into menus - filtering
  13. 13. @jonnyauk https://wider.co.uk wp-includes/
 class-walker-nav-menu.php search for ‘apply_filter’
  14. 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. 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. 16. @jonnyauk https://wider.co.uk wp-includes/
 class-walker-nav-menu.php
  17. 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. 18. @jonnyauk https://wider.co.uk Now go create some
 awesome menus! Jonny Allbut Digital Director

×