WordPress 3.6 Update Breaks jQuery Tabs in Widgets

I use the FlexSqueeze theme for FastWPTips.com and when I updated to the latest WordPress 3.6 core, I could no longer access the design tabs in the theme options. Instead I received a blank page.

This oddity in WordPress 3.6 is caused by the fact that a new version of jQuery is used in WordPress 3.6.  In the new version there is no SELECT method for jQuery user interface tabs. This causes the problems with a WordPress theme once you’ve updated to the latest version.

To fix this you need to change the old jQuery programming in a theme from something like this:

 

jQuery("#tabs").tabs( {
       select: function( e, ui )
       {    
        jQuery.cookie( "stickyTab", ui.index );
       }
       } );
        jQuery("#tabs").tabs( 'select', jQuery.cookie( "stickyTab" ) );
        jQuery("#tabs").css("display", "block");
 

To something like this:

 
jQuery("#tabs").tabs( {
     activate: function( event, ui ) {    
     jQuery.cookie( "stickyTab", jQuery("#tabs").tabs("option","active") );
     }
   } );
    jQuery("#tabs").tabs( 'option', 'active', jQuery.cookie( "stickyTab" ) );
    jQuery("#tabs").css("display", "block");

In the custom.js, widget.js, or other similar file.

If you are experiencing a similar problem with a broken user interface in a theme after the update to WordPress 3.6, I would advise you to contact the creator of your theme or plugin and ask for an update to the files.

After updating your files to accommodate this change to jQuery, your site should function normally.

 

Tagged with: blank • jquery • SELECT • select option

Filed under: Errors

Like this post? Subscribe to my RSS feed and get loads more!