This tutorial is for someone who updated their WordPress blog to the latest version 4.0 and left with few issues (mostly the issues were around Add Media button and Media library listing). On September 4th, WordPress officially announced its latest update called “Benny” named after the famous Jazz musician Benny Goodman. Interestingly the WordPress Media library had a major makeover, a beautiful endless grid view of the uploaded media. Fixed toolbar when the post/page editor was scrolled, embeddable content previews right in the editor etc…Got excited? Well, that excitement just made me to click the “Update wordpress” button. As far as the update was concerned, it went smooth but left few issues –
The Add Media button located at the top of Post/Page editor was not working (It did nothing for the first click and just launched a blank window for the second click). The other issue was the Media library listing – upon clicking, a blank window showing none of the uploaded images.
I thought of debugging and enabled ‘define(‘SCRIPT_DEBUG’, true);‘ in wp-config.php. After few hours of Googling, I tried plenty of suggestions posted across various WordPress forums.
JS Errors observed:
Uncaught TypeError: Cannot read property 'replace' of undefined Uncaught TypeError: Cannot read property 'length' of undefined load-scripts.php TypeError: 'undefined' is not an object (evaluating 'c.parent().offset().top') eload-scripts.php
Suggestion 1: Few suggested to add the below line wp-config.php
define('CONCATENATE_SCRIPTS', false );Result – It didn’t work for me.
Suggestion 2: Few users were able to fix the issue by deactivating the WPML Plugin, Comprehensive Google Maps Plugin, mqtranslate and Genesis Title Toggle plugins.
Result – I don’t use those plugins. Since most of the users were able to fix the issue by deactivating the problematic plugins, I started to disable all of my installed plugins and activated one by one. Still no luck.
Between all those drama, I did tried copying upload.php from the old WordPress backup and replaced the new upload.php in wp-admin directory. Interestingly, the media library issue got fixed, but the issue with Add media button still persisted.
Suggestion 3: Disable Caching plugins. In fact, whatever named as cache – disable everything.
Result : I disabled WP-Total cache plugin, no luck again. But it’s always advised to clear or empty cache files after every plugin or WordPress update.
Finally, it was the Cloudflare plugin that was causing this issue. But how? As you know that Cloudflare helps supercharge your website content by optimizing, distributing across the globe, serving the request from the nearest possible location and it does all those by caching your content. The trick was to turn On “Development Mode” in Cloudflare plugin, so that the content was not served via cloudflare servers. Now get back to the Media library, you will see the new grid view of the uploaded images. Also, remember to checkout the “Add Media” button in the Post/Page editor – that too worked as expected.
Should I keep Cloudflare deactivated? Not at all! Once you confirm that the issue has been rectified, go back to the plugin settings page and turn Off “Development Mode” . Now the Cloudflare should cache the new content and all should be fine.
So the “Add Media” button and media listing issue was because of caching? Might be! Who knows! But it worked. Do you face an issue with WordPress 4.0? Let me know as the comments.
Note: To be frank, I don't understand WordPress internals properly. So my suggestion may not be perfect, but it worked for me. Hope this can help someone out there facing similar issue.
