Nearly a year ago I wrote an article lamenting my inability to edit JS from within the native WP Theme Editor. Still quite frustrated with WP’s continued blocking of these files types, I was finally inspired by a comment from Michael regarding a plugin that might let me edit JS files, so I decided to check it out. While I was at it, I thought I might as well also check the WP Plugins repo again to see if any other plugins had surfaced to handle this.

I installed and tested the following plugins, with the following results, on a 1) WP 3.8 single-site installation with no other plugins, using the TwentyFourteen Theme, and 2) this site, which is also running WP 3.8, but is multi-site, with several other plugins, using my custom Theme.

WP Editor, by Benjamin Rojas

Since this is the plugin that Michael mentioned, it made sense for me to start here. And, lo-and-behold, WP Editor does allow you to edit existing JS files! In fact, it allows you to edit any existing text-based file in your Theme, including those within sub-directories, upload new files, and even create new sub-directories for those new files!

WP Editor adds three new WP Admin menu items: WP Editor (an admin menu for WP Editor itself), Appearance > Theme Editor and Plugins > Plugin Editor, the latter two both replacing their corresponding native-WP Editor links. By replacing the standard WP Editors, opting instead to create its own editor interface, WP Editor very cleverly bypasses the unalterable restrictions within WP’s core files. Slick! If you can’t join `em, kick `em!

While I wasn’t personally crazy about the look of the interface, there are several themes from which you can choose, even choosing different themes for the Post/Page editor, Theme Editor, Plugin Editor, whether to use WP Editor for each of those, as well as other options. And most importantly, the functionality is solid!

But my biggest surprise came when I installed the plugin on a multi-site installation: This bugger works there too!! Wha-hoo!! In fact, WP Editor even solves another annoyance I have, with WP’s multi-site Admin interface, which moves the Theme & Plugin Editors into the Network Admin screens (meaning at least a couple more clicks, just to update a CSS value or something), by adding these new Theme Editor and Plugin Editor links right into my current Site Admin menu…

Well played, WP Editor, and kudos to Benjamin for doing such a thorough job on this!

Global Javascript Editor, by Julien Law

Global Javascript Editor also solves the problem of not being able to edit JS files, but in a completely different approach, which I love, because a) Who needs two of the same thing? and b) How often is the same solution right for every situation?

Global Javascript Editor also bypasses the native-WP restrictions, opting instead to leave the native-WP Theme and Plugin Editors as they are, and creating a new Appearance > Global Javascript link, which opens a custom Editor (this does mean two different editor screens, one for this custom JS file, and another for all other editing). Any code entered into the custom Editor will be inserted into a new JS file, which will be appended as the last JS file in your page’s source code. There is even a list of several common frameworks (Backbone, jQuery, Modernizr, etc.) that, if checked, will be added to the page as well.

It’s another slick approach, and certainly solves the problem of being able to edit JS files via the WP Admin. If the custom JS files doesn’t exist, it creates one, storing the content within a newly-created global-js directory, inside the uploads directory (something that pretty much needs to be writable, so doubly-clever!). Two files are actually created, one minified, one not, and naturally the minified is what is sent to the end-user.

While this plugin works flawlessly as described on single-site, I did encounter the following error message on multi-site when trying to save the JS file:
Fatal error: Cannot redeclare class JSMin in /home/aarontgrogg/aarontgrogg.com/wp-content/plugins/global-javascript/min/lib/JSMin.php on line 57
The script tag is added to the site, the global-js directory is successfully created, but the actual JS files are never created, and therefore a 404 is introduced to the site.

Another great plugin, kudos to Julien for creating this alternative!

Also worth noting…

While none of the following said they would allow me to edit JS files, they looked like they might, based on their name and/or description, so I tried them anyhow; none of them added the ability to edit JS files…

• ACE Edit: Adds syntax highlighting, but does not add JS to the Theme Editor list of files
• Advanced Code Editor: Adds syntax highlighting, but does not add JS to the Theme Editor list of files

Conclusion

Global Javascript Editor is great if all you need is a single custom JS file added to all pages of a single-site installation. This plugin allows you to open the JS file, edit its content, even add possible dependencies (via the WP installation’s libraries), all from within the WP Admin.

WP Editor, in my opinion, however, does go the extra mile, moving all of your editing into a single custom editor, allowing you to choose any file, regardless how deeply nested in sub-directories, edit and save them, and even add new files (assuming you have write-permissions on the server), and all of this on single- or multi-site installations.

In the end, thanks to Michael’s prod, we have two solutions that allow us to edit JS files from within the WP Admin.

Happy holidays, and happy JS editing,
Atg

Top⇪