All things WordPress

Fixing broken widgets in WordPress admin

Written by: Peter Fisher on December 16, 2012
Tagged under: , ,
Share on FacebookShare on Google+Tweet about this on TwitterShare on LinkedIn

WordPressRecently I was asked to fix some broken features in a WordPress admin section.  Now WordPress have an active release cycle and so it’s admin system is usually quite stable, so my first guess was a recent plugin update may of broken something.

Upon logging into the system I noticed that a few dashboard widgets were not loading up.  In fact the Ajax calls in the dashboard modules were not returning a valid response. Continuing on to the widget section under themes/appearance I noticed that widgets could not be dragged and their containers could not be collapsed.  Something was definitely broken and it looked like it was a client sided issue.

After going back to the dashboard and loading fire-bug, I noticed that the console was spitting out a pile of JavaScript errors. Most of these looked like dependency issues as they were stating that certain JavaScript objects could not be loaded.  After inspecting the DOM in fire-bug I noticed that the load-scripts.php file was not pulling down any JavaScript files.

Now this could be the the result of one of two errors.  The first is that the JavaScript files do exist but their include paths are wrong or that the files don’t exist at all. So I looked into the folder structure and was shocked by the amount of JavaScript in multiple directories. Maybe this how WordPress is designed and I’m just being OCD but I expected the JavaScript files to only live in a  single directory.  Here I was looking at:

  • /include/*
  • /wp-admin/include/*
  • /themes/*
  • /plugins/*

After untangling the dependencies I noticed that some plugins included the missing JavaScript files. Of course to make things more difficult, some of the JavaScript files were out of date and superseded by other JavasScript files.   I was looking at mixture of JavaScript frameworks and a mixture of versions of those frameworks all sprinkled over mix of directories.

The blog had many plugins and as a developer I realize that not all of those plugins would of been constructed using the latest JavaScript frameworks. This would indeed result in the blog having multiple JavaScript framework versions. So I brushed over this issue and continued to look for what is missing rather than tidying up what was already there.

Looking back over the errors, I noticed that most of the issues centred around missing jQuery UI extensions so I took a look at the jQuery frameworks included in the blog and noticed that the core jQuery framework was actually missing in all cases.

Now the next challenge was to find,  download and include the right jQuery versions in the correct directories.

Luckily some of the existing jQuery UI extensions were not minified so I could read the code and more importantly the code comments. Some of these comments mentioned what version of the code their were using. Unfortunately the jQuery UI website only allows you to download the last two versions of the framework and of course, the versions I needed were much earlier than these. Thankfully the jQuery team don’t clear out the tags in their GitHub repository so I was able to download all the old versions of the framework.

After I had everything I needed, I started uploading the missing files one by one and checking for new errors. Once this was finished I tested the frontend and the admin section again.

Share on FacebookShare on Google+Tweet about this on TwitterShare on LinkedIn

Peter Fisher is a web developer working in Gloucester UK. Founder of the digital agency Websomatic, author of this blog and the HowToCodeWell Youtube channel. Peter has over ten years of web development experience under his belt

Read all about Peter Fisher

Leave a Reply

Your email address will not be published. Required fields are marked *