3.6 Upgrade – No Menu Toggle
-
I am unable to get my sites to work the menu toggle. As far as I can tell it has something to do with calling the JS on it’s parent theme, Twenty Twelve and it isn’t a styling issue. So whenever I click the toggle it doesn’t change the class of the menu to “toggle-on” hence a JS issue. If you need to see an example, I am developing on https://gomississippiriver.com/10states and saw it on another one of our sites at https://witravelbestbets.com. Please let me know if you have any suggestions!
-
If it is the javascript, it would be in TwentyTwelve’s /js/navigation.js file. I am assuming no modifications have been made to this file?
I can only think of two possibilities:
1) an id or class attribute in the menu HTML has been either renamed or removed, so the JavaScript is no longer able to grab the DOM object it once did.
2) the JavaScript needs to be inside the child theme to work properly (but I don’t believe this is true, because when I create a generic Twenty Twelve child theme and try to replicate the problem, everything seems to work properly.)
Well, I didn’t change any of the files, just installed the new WordPress version 3.6. Would it have updated those files for any reason? It’s confusing because on the https://witravelbestbets.com site it was working just fine before the upgrade. There is no reason it shouldn’t be working and the only thing I’ve done recently is upgrade to 3.6.
I went through my child theme and the menus are all called dynamically based on the Twenty Twelve child theme.
If it helps, here is my code:
<nav id="site-navigation" class="main-navigation" role="navigation"> <h3 class="menu-toggle"><?php _e( 'Menu', 'twentytwelve' ); ?></h3> <a class="assistive-text" href="#content" title="<?php esc_attr_e( 'Skip to content', 'twentytwelve' ); ?>"><?php _e( 'Skip to content', 'twentytwelve' ); ?></a> <?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu' ) ); ?> </nav><!-- #site-navigation -->Maybe I’m not calling something semantically correct?
Thanks for your help!
Have you tried deactivating your plugins to see if any are problematic?
Your JavaScript doesn’t seem to be adding the toggled-on state to the h3.menu-toggle or the ul#menu-main-menu
However, the id’s and classes the navigation.js script is looking for all seems to be in order…
I’ll keep looking. Have you made too many edits to header.php surrounding the wp_nav_menu call? Could you post a code snippet?
Aaron
Deactivating my plugins did not fix the issue :/.
Here is my header.php code. Maybe there’s some syntax errors in there. Thank you for all of your help!
<?php /** * The Header for our theme. * * Displays all of the <head> section and everything up till <div id="main"> * * @package WordPress * @subpackage Twenty_Twelve * @since Twenty Twelve 1.0 */ ?><!DOCTYPE html> <!--[if IE 7]> <html class="ie ie7" <?php language_attributes(); ?>> <![endif]--> <!--[if IE 8]> <html class="ie ie8" <?php language_attributes(); ?>> <![endif]--> <!--[if !(IE 7) | !(IE 8) ]><!--> <html <?php language_attributes(); ?>> <!--<![endif]--> <head> <link href='https://fonts.googleapis.com/css?family=Merriweather:700,900|Merriweather+Sans:400,800' rel='stylesheet' type='text/css'> <meta charset="<?php bloginfo( 'charset' ); ?>" /> <meta name="viewport" content="width=device-width" /> <title><?php wp_title( '|', true, 'right' ); ?></title> <link rel="profile" href="https://gmpg.org/xfn/11" /> <link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" /> <?php // Loads HTML5 JavaScript file to add support for HTML5 elements in older IE versions. ?> <!--[if lt IE 9]> <script src="<?php echo get_template_directory_uri(); ?>/js/html5.js" type="text/javascript"></script> <![endif]--> <?php wp_head(); ?> </head> <body <?php body_class(); ?>> <div class="background"> <?php if ( is_page() && has_post_thumbnail() ) { ?> <div class="soliloquy-item"> <?php the_post_thumbnail();?> </div><?php } elseif ( function_exists( 'soliloquy_slider' ) ) soliloquy_slider( '124' ); ?> </div> <div id="page" class="hfeed site"> <header id="masthead" class="site-header" role="banner"> <div class="extras"> <?php get_search_form(); ?> <ul id="sm-menu" class="nav-menu"> <li><a href="https://www.facebook.com/GreatRiverRoad"><img src="<?php echo get_stylesheet_directory_uri(); ?>/images/facebook.png"></a></li><li><a href="https://www.twitter.com/GreatRiverRoad"><img src="<?php echo get_stylesheet_directory_uri(); ?>/images/twitter.png"></a></li> <li class="country"><a href="#"><img src="<?php echo get_stylesheet_directory_uri(); ?>/images/us.png" class="flag"></a> <ul class="sub-menu"> <a href="#"><li><div class="us"></div>English</li></a> <a href="#"><li><div class="japan"></div>Japanese</li></a> </ul> </li> </ul> </div> <a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"><hgroup> <h1 class="site-title"><?php bloginfo( 'name' ); ?></h1> <h2 class="site-description"><?php bloginfo( 'description' ); ?></h2> </hgroup></a> <nav class="business-navigation" role="navigation"> <?php wp_nav_menu( array( 'theme_location' => 'business', 'menu_class' => 'business-menu' ) ); // when hotels, restaurants, and services becomes active unblock this section?> </nav> <nav id="site-navigation" class="main-navigation" role="navigation"> <h3 class="menu-toggle"><?php _e( 'Menu', 'twentytwelve' ); ?></h3> <a class="assistive-text" href="#content" title="<?php esc_attr_e( 'Skip to content', 'twentytwelve' ); ?>"><?php _e( 'Skip to content', 'twentytwelve' ); ?></a> <?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu' ) ); ?> </nav><!-- #site-navigation --> <?php $header_image = get_header_image(); if ( ! empty( $header_image ) ) : ?> <a href="<?php echo esc_url( home_url( '/' ) ); ?>"><img src="<?php echo esc_url( $header_image ); ?>" class="header-image" width="<?php echo get_custom_header()->width; ?>" height="<?php echo get_custom_header()->height; ?>" alt="" /></a> <?php endif; ?> </header><!-- #masthead --> <div id="main" class="wrapper"> <?php if( get_field('photo_caption') ) :?> <div class="slider-title-wrap"> <p class="slider-title"><span class="highlight"><?php the_field('photo_caption'); ?></span></p> </div> <?php endif; ?>Okay, did some digging/debugging with Chrome’s Inspect Element tool on the Wisconsin site. Think I might have a potential clue, but not a complete solution just yet.
When your site’s page is first loading, it invokes the navigation.js that we mentioned earlier, but line 7:
var nav = document.getElementByID( 'site-navigation' ), button, menu;. . . returns a null value for nav. Since nav is null, lines 8 and 9 cause the function to return immediately without assigning anything to the button or menu variables.
And since no button object exists/gets created, the button.onClick event handler never gets created. So you can click that menu button all you like, there’s just nothing on the other end listening for it.
(Interestingly enough, when I perform the same debugging against a copy of the same site found in Internet Archive from 7/31, the navigation.js works fine, setting a value for nav, button and menu, as well as tying the event handler function to the onClick event of the button object.)
In english, I’m saying I think navigation.js is firing TOO early . . . before the navigation menu has been rendered. Something has changed between 7/31 and now that is causing that particular javascript to be executed before the page has finished loading completely, instead of after. I’m hoping this gives you a Eureka moment, because without knowing more about the difference between TwentyTwelve and your child theme, I can only offer conjecture about what might be causing it.
Knowing that I tried hard coding the Javascript call into the header and footer and that did not work for either. Maybe it has something to do with my functions file?
<?php function register_my_menus() { register_nav_menus( array( // 'primary' => __ ( 'Primary Menu' ), //MAIN MENU IN PARENT THEME 'states' => __( 'State Menu' ), 'business' => __( 'Business Listings Menu' ), 'footer' => __( 'Footer Menu' ) ) ); } add_action( 'init', 'register_my_menus' ); //Add thumbnail support if ( function_exists( 'add_theme_support' ) ) { add_theme_support( 'post-thumbnails' ); set_post_thumbnail_size( 150, 150, true ); // default Post Thumbnail dimensions (cropped) add_image_size( 'blog', 285, 150, true ); } function remove_some_widgets(){ // Unregister some of the TwentyTwelve sidebars unregister_sidebar( 'sidebar-1' ); unregister_sidebar( 'sidebar-2' ); unregister_sidebar( 'sidebar-3' ); } add_action( 'widgets_init', 'remove_some_widgets', 11 ); function custom_widgets_init() { register_sidebar( array( 'name' => __( 'Home Sidebar'), 'id' => 'sidebar-1', 'description' => __( 'Appears on homepage and in general posts and pages below the map', 'twentytwelve' ), 'before_widget' => '<aside id="%1$s" class="widget %2$s">', 'after_widget' => '</aside>', 'before_title' => '<h3 class="widget-title">', 'after_title' => '</h3>', ) ); register_sidebar( array( 'name' => __( 'Home Content Sidebar'), 'id' => 'sidebar-2', 'description' => __( 'Appears on homepage below the content', 'twentytwelve' ), 'before_widget' => '<aside id="%1$s" class="widget %2$s">', 'after_widget' => '</aside>', 'before_title' => '<h3 class="widget-title">', 'after_title' => '</h3>', ) ); register_sidebar( array( 'name' => __( 'State Sidebar'), 'id' => 'sidebar-3', 'description' => __( 'Appears on state pages below the map', 'twentytwelve' ), 'before_widget' => '<aside id="%1$s" class="widget %2$s">', 'after_widget' => '</aside>', 'before_title' => '<h3 class="widget-title">', 'after_title' => '</h3>', ) ); register_sidebar( array( 'name' => __( 'State Content Sidebar'), 'id' => 'sidebar-4', 'description' => __( 'Appears on state pages below the content', 'twentytwelve' ), 'before_widget' => '<aside id="%1$s" class="widget %2$s">', 'after_widget' => '</aside>', 'before_title' => '<h3 class="widget-title">', 'after_title' => '</h3>', ) ); } add_action( 'widgets_init', 'custom_widgets_init',12 ); //SETUP BUSINESSES MENU ITEM function codex_custom2_init() { $labels = array( 'name' => 'Businesses', 'singular_name' => 'Business', 'add_new' => 'Add New', 'add_new_item' => 'Add New Business', 'edit_item' => 'Edit Business', 'new_item' => 'New Business', 'all_items' => 'All Businesses', 'view_item' => 'View Business', 'search_items' => 'Search Businesses', 'not_found' => 'No businesses found', 'not_found_in_trash' => 'No businesses found in Trash', 'parent_item_colon' => '', 'menu_name' => 'Businesses' ); $args = array( 'labels' => $labels, 'public' => true, 'publicly_queryable' => true, 'show_ui' => true, 'show_in_menu' => true, 'query_var' => true, 'rewrite' => array( 'slug' => 'business' ), 'capability_type' => 'post', 'has_archive' => true, 'hierarchical' => false, 'menu_position' => 5 ); register_post_type( 'business', $args ); } add_action( 'init', 'codex_custom2_init' ); // hook into the init action and call create_book_taxonomies when it fires add_action( 'init', 'create_business_taxonomies', 0 ); // create two taxonomies, genres and writers for the post type "book" function create_business_taxonomies() { // Add new taxonomy, make it hierarchical (like categories) $labels = array( 'name' => _x( 'Business Categories', 'taxonomy general name' ), 'singular_name' => _x( 'Business Category', 'taxonomy singular name' ), 'search_items' => __( 'Search Business Categories' ), 'all_items' => __( 'All Business Categories' ), 'parent_item' => __( 'Parent Category' ), 'parent_item_colon' => __( 'Parent Category:' ), 'edit_item' => __( 'Edit Business Category' ), 'update_item' => __( 'Update Business Category' ), 'add_new_item' => __( 'Add New Business Category' ), 'new_item_name' => __( 'New Business Category Name' ), 'menu_name' => __( 'Business Categories' ), ); $args = array( 'hierarchical' => true, 'labels' => $labels, 'show_ui' => true, 'show_admin_column' => true, 'query_var' => true, 'rewrite' => array( 'slug' => 'business-category' ), ); register_taxonomy( 'business-category', array( 'business' ), $args ); // Add new taxonomy, NOT hierarchical (like tags) $labels = array( 'name' => _x( 'Business Tags', 'taxonomy general name' ), 'singular_name' => _x( 'Business Tag', 'taxonomy singular name' ), 'search_items' => __( 'Search Business Tags' ), 'popular_items' => __( 'Popular Business Tags' ), 'all_items' => __( 'All Business Tags' ), 'parent_item' => null, 'parent_item_colon' => null, 'edit_item' => __( 'Edit Business Tag' ), 'update_item' => __( 'Update Business Tag' ), 'add_new_item' => __( 'Add New Business Tag' ), 'new_item_name' => __( 'New Business Tag' ), 'separate_items_with_commas' => __( 'Separate tags with commas' ), 'add_or_remove_items' => __( 'Add or remove business tags' ), 'choose_from_most_used' => __( 'Choose from the most used business tags' ), 'not_found' => __( 'No business tags found.' ), 'menu_name' => __( 'Business Tags' ), ); $args = array( 'hierarchical' => false, 'labels' => $labels, 'show_ui' => true, 'show_admin_column' => true, 'update_count_callback' => '_update_post_term_count', 'query_var' => true, 'rewrite' => array( 'slug' => 'business-tag' ), ); register_taxonomy( 'business-tag', 'business', $args ); }Your header.php file is not the same as the original theme’s: https://www.diffchecker.com/e0zxgf89 .
Try taking Twenty Twelve’s original header.php code and pasting it over yours.
I want to modify the header.php file. This is a custom child theme, so the header.php shouldn’t be the same as the Twenty Twelve header.php file.
Which files have you changed?
Not all of these are super changed from the original. So I’ll separate into two lists.
Major Customization
- content-page.php
- content.php
- footer.php
- header.php
- sidebar.php
Minor Customization
- archive.php
- category.php
- index.php
- page.php
- searchform.php
- single.php
- tag.php
Misc.
- functions.php (obviously this is completely different because the 2012 theme is being called as template)
- 3 custom page layouts (agritourism, homepage, states)
- 3 custom sidebars (blog, map, states)
TwentyTwelve adds navigation.js in the functions.php file, with a wp_enqueue_script call. It specifically sets the in_footer attribute to true, to cause navigation.js to load in the footer.
By any chance, have you loaded navigation.js elsewhere, prior to the functions.php in the parent theme being executed? I ask because if the script is loaded elsewhere, that might keep wp_enqueue_script from loading the navigation.js file, depending upon how it was loaded.
Or, less likely, have you overridden any functions in TwentyTwelve’s functions.php by making them pluggable functions in your child theme’s functions.php?
I want to modify the header.php file. This is a custom child theme, so the header.php shouldn’t be the same as the Twenty Twelve header.php file.
Silly qustion then.
If you stop using your child theme and JUST use Vanilla Twenty Twelve, does it work?
If you stop using your child theme and JUST use Vanilla Twenty Twelve, does it work?
Nope, not working. Hence my initial thought that maybe the new upgrade did something to the files? I even uninstalled and reinstalled the theme and nothing changed.
By any chance, have you loaded navigation.js elsewhere, prior to the functions.php in the parent theme being executed?
The only place navigation.js is called is in the parent theme’s files lines 90-153. See below.
function twentytwelve_scripts_styles() { global $wp_styles; /* * Adds JavaScript to pages with the comment form to support * sites with threaded comments (when in use). */ if ( is_singular() && comments_open() && get_option( 'thread_comments' ) ) wp_enqueue_script( 'comment-reply' ); /* * Adds JavaScript for handling the navigation menu hide-and-show behavior. */ wp_enqueue_script( 'twentytwelve-navigation', get_template_directory_uri() . '/js/navigation.js', array(), '1.0', true ); /* * Loads our special font CSS file. * * The use of Open Sans by default is localized. For languages that use * characters not supported by the font, the font can be disabled. * * To disable in a child theme, use wp_dequeue_style() * function mytheme_dequeue_fonts() { * wp_dequeue_style( 'twentytwelve-fonts' ); * } * add_action( 'wp_enqueue_scripts', 'mytheme_dequeue_fonts', 11 ); */ /* translators: If there are characters in your language that are not supported by Open Sans, translate this to 'off'. Do not translate into your own language. */ if ( 'off' !== _x( 'on', 'Open Sans font: on or off', 'twentytwelve' ) ) { $subsets = 'latin,latin-ext'; /* translators: To add an additional Open Sans character subset specific to your language, translate this to 'greek', 'cyrillic' or 'vietnamese'. Do not translate into your own language. */ $subset = _x( 'no-subset', 'Open Sans font: add new subset (greek, cyrillic, vietnamese)', 'twentytwelve' ); if ( 'cyrillic' == $subset ) $subsets .= ',cyrillic,cyrillic-ext'; elseif ( 'greek' == $subset ) $subsets .= ',greek,greek-ext'; elseif ( 'vietnamese' == $subset ) $subsets .= ',vietnamese'; $protocol = is_ssl() ? 'https' : 'http'; $query_args = array( 'family' => 'Open+Sans:400italic,700italic,400,700', 'subset' => $subsets, ); wp_enqueue_style( 'twentytwelve-fonts', add_query_arg( $query_args, "$protocol://fonts.googleapis.com/css" ), array(), null ); } /* * Loads our main stylesheet. */ wp_enqueue_style( 'twentytwelve-style', get_stylesheet_uri() ); /* * Loads the Internet Explorer specific stylesheet. */ wp_enqueue_style( 'twentytwelve-ie', get_template_directory_uri() . '/css/ie.css', array( 'twentytwelve-style' ), '20121010' ); $wp_styles->add_data( 'twentytwelve-ie', 'conditional', 'lt IE 9' ); } add_action( 'wp_enqueue_scripts', 'twentytwelve_scripts_styles' );Or, less likely, have you overridden any functions in TwentyTwelve’s functions.php by making them pluggable functions in your child theme’s functions.php?
My functions code is pasted above this post, but there are no enqueued scripts in the functions.php file and I have already deduced that no plugins specifically are conflicting with theme by deactivating them.
This is stumpifying! Would it be easier to upload my entire themes folder somewhere to peruse freely? Thank you to everyone taking the time to check this out!
> This is stumpifying!
I agree. But I think we’re getting closer to pinpointing the cause.
Your response to Ipstenu’s question suggests the issue is specific to your copy of the TwentyTwelve theme. Otherwise the Vanilla Twenty Twelve test would have worked.
If you have access to a tool that lets you compare two directories (e.g. the diff command), I’d suggest downloading a fresh copy of the TwentyTwelve theme and trying to isolate the difference.
- The topic ‘3.6 Upgrade – No Menu Toggle’ is closed to new replies.