[oik] plugins.com

WordPress plugins and themes

How to fix an unresponsive Menu button in child themes of TwentyTwelve

Recently we noticed that the Menu button in child themes of TwentyTwelve was not behaving correctly; it was not expanding when you clicked on it.

We tracked it down to a change in the parent theme, between version 1.4 and 1.5.

New versions of oik2012, oik20120 and other bespoke themes built as child themes of TwentyTwelve will be made available in due course. In the mean time, here’s a brief explanation and some notes about our planned fix.

The problem

The TwentyTwelve theme has a responsive menu that reduces to a single Menu button when the window width is narrower than 600 pixels. Pressing the Menu button should reveal the menu, in a vertical list.

1. oik20120 – menu greater than 600 pixels

2. oik20120 – menu less than 600 pixels

3. oik20120 – menu button pressed

With version 1.5, any clicking or pressing on the Menu button is ignored. The menu items do not get displayed.

The problem is not restricted to mobile devices – you can recreate the problem with a window width less than 600 pixels.

Fix

The fix requires a change to the header.php file in the child theme.

Replace


<h3 class="menu-toggle"><?php _e( 'Menu', 'twentytwelve' ); ?></h3>
 

with


<button class="menu-toggle"><?php _e( 'Menu', 'twentytwelve' ); ?></button>
 

Note: This fix will work when the Menu has already been broken due to TwentyTwelve having been upgraded.

Compatibility fix for oik child themes

Q. But what if you deliver a fix to your theme but TwentyTwelve is still at v1.4? A. The fix will cause the problem to occur until TwentyTwelve is upgraded.

The solution for oik plugins’ child themes is to use a function that will test the current version of TwentyTwelve, and behave accordingly. In functions.php we add the following function

You appear to be a bot. Output may be restricted


function oik20120_menu_toggle() {
  $installed_theme = wp_get_theme( "twentytwelve" );
  if ( $installed_theme->exists() ) {
    $version =  $installed_theme->get('Version');
    if ( version_compare( $version, 1.5, 'ge' ) ) {
    ?>
      <button class="menu-toggle"><?php _e( 'Menu', 'twentytwelve' ); ?></button>
    <?php } else { ?>    
      <h3 class="menu-toggle"><?php _e( 'Menu', 'twentytwelve' ); ?></h3>
    <?php
    }
  }
}
 

and change header.php to use this function

You appear to be a bot. Output may be restricted


<?php oik20120_menu_toggle(); ?>
 

oik plugins fix

A version of the above fix will be developed, tested and delivered for the following themes:

See also