WordPress menu and widget editing stops working – and how we fixed that.

Making a WordPress website (version 4.2.2) for a client we had a ferocious load of plugins on board. Any WordPress web designer knows that this can be a recipe for trouble, and so it proved for us. Sometimes plugins are not compatible with each other and stuff stops working. For us it was two things in the admin screen: the drop-down menu to edit widgets was no longer working; and the menu editing screen no longer allowed drag and drop.

Standard advice for this scenario is to disable and uninstall plugins one by one. We could do that, but every one of these plugins was needed for this site, and some of them had a lot of work and data associated with them. So that was not the favoured option. Luckily a bit of research found a better solution.

First, checking the javascript error console on the widget page revealed that the problem appeared to be some missing javascript.

Uncaught TypeError: Cannot read property 'add' of undefined(anonymous function) @ load-scripts.php?c=0&load[]=jquery-core,jquery-migrate,utils,jquery-ui-widget,jquery-ui-core,jquery…:54a.widget.version @ load-scripts.php?c=0&load[]=jquery-core,jquery-migrate,utils,jquery-ui-widget,jquery-ui-core,jquery…:54(anonymous function) @ load-scripts.php?c=0&load[]=jquery-core,jquery-migrate,utils,jquery-ui-widget,jquery-ui-core,jquery…:54

Ok, that looks a bit complicated. Luckily, there is an awesome workaround that works perfectly if you need to edit your widgets without using the normal javascript interface. I found this via Open Source Training LLC blog. Read this whole post before you implement this – you might be able to fix it even more easily.

Edit WordPress widgets without using the dropdown admin interface:

Use this custom URL to turn on a hidden widget editing mode that allows you to edit widgets one by one and save them.

http://yoursite.com/wp-admin/widgets.php?widgets-access=on

This then persists until such time as you turn it off. Once widgets are edited, turn off editing mode like this:

http://yoursite.com/wp-admin/widgets.php?widgets-access=off

Replace ‘yoursite.com’ with your site’s address – or just go to the widget editing page and edit the URL directly in your address bar.

What to do when you can’t drag and drop the WordPress menu admin interface

The other problem we had was the menu editing interface. This normally allows you to drag and drop. Ours didn’t. There isn’t a cunning hidden menu editing trick like we used for the widgets, so a bit more debugging was required.

To investigate the problem a bit further we decided to turn off script concatenation in wp-config.php. This was inspired by a post in wptricks24 blog. WordPress by default saves resources by running all its javascript files into one. Sometimes that doesn’t quite work, and so you can turn that feature off. That can make the site slower, but can also fix incompatibility problems like this.

This extra line goes into the wp-config.php file :

define( 'CONCATENATE_SCRIPTS', false );

Edit your wp-config.php file and insert the extra code just below this line:

define('DB_HOST', 'localhost');

Checking the remote site and indeed, http://yoursite.com/wp-includes/js/jquery/ui/core.min.js was not there. Some of our messing about with plugins must have accidentally deleted it. But good news: this is a core file, so we had a local copy.  Uploading the new copy fixed the menu problem entirely – and when we checked, it also fixed the widget editing problem we had earlier! So we could turn off the widget editing alternative method, and also successfully turn off CONCATENATE_SCRIPTS.

Two problems fixed in one, a useful workaround and a diagnostic trick discovered.