Ever have a client that can’t give you FTP access? Usually not a big deal if you’re using WP, because you can use the Theme Editor to edit your files. But then, surely you’ve noticed, the WP Theme Editor doesn’t allow you to edit JS files… (Though, really annoyingly, you can edit JS files via the Plugin Editor… whaaaat theeee…??)
I finally got sick of this and decided to figure out how to fix this issue. I mean, it might even be as simple as some regex somewhere that was blocking anything with .js, right?
Well, actually, yes, that’s almost exactly what it is. But unfortunately all the restriction takes place inside WP Core files, which I would really rather not edit, for obvious reasons, and I cannot find any hooks that will do the job…
I’ve found three solutions that do not satisfy me:
- In
wp-includes/themes.php, insideget_themes()on line 352, editif ( preg_match('|\.css$|', $file) )so it also allows.js. - In
wp-admin/theme-editor.php, on line 58, just before$allowed_filesis defined, add$themes[$theme]['Stylesheet Files'][] = TEMPLATEPATH.'/scripts.js';. - Put my
scripts.jsfile into a folder insidewp-content/pluginsso WP will think it’s a plug-in, allowing me to jump over the Plug-in Editor to edit it.
Any better ideas out there? Would love to hear them…
Atg
You can create a template file with the standard Template Name header and serve that as a JS file in PHP by altering the header(“Content-type: text/javascript”);
Downfall — you won’t be able to use register/enqueue scripts. But you can probably write a hook to load your PHP-fake js file after enqueue scripts occur
@ DavidOSomething: Right, and I’d have to link to that file as a
.phpfile, because the WP Core code is actually filtering on.cssand.php; no other file extensions are permitted into the list of files you can select to edit. This isn’t terrible, and it’s another good option, thanks!very nice
i like it ;) thanks
Hi! For your 3 solutions, wouldn’t you still need FTP access to implement those solutions? It doesn’t seem like the files you mentioned are editable through the CMS…
PS: How dumb that you can’t edit JS but you can edit PHP. You’re much more likely to make a horrible mistake editing the PHP!!
@Heather: No, no FTP required, the above three solutions would all allow me to edit JS files via the WP Admin GUI, I just don’t like any of the solutions, they’re all less than ideal… :-)
Cheers,
Atg
Hi ATG,
Not a big wordpress fan, but Im still confused how you would add/install the scripts.js ‘plugin’ from the GUI ??
@Erick: No, you’re absolutely right, aside from submitting your JS “plugin” to the WP Repository, then adding that plugin via the admin GUI, there is no way. I was really only thinking about editing…
yeah, but without ftp I can’t edit the core files that you refer to in your solution. correct?
@John: also correct… sadly… you cannot (and should not) edit the core files, yet cannot add new files or edit JS files via the editor.
Have you tried the WP Editor plugin? I’m giving it a go now and looks promising.
Gives you ability to edit all files in the theme, code highlighting amongst others.
@Michael: I have not, but will check it out, thanks!
Atg
So, yeah, I’ve now tried it, and while it does in fact do exactly what I was looking for on singe-site installations, it does not work for multi-site (http://wordpress.org/support/topic/multisite-110), which is what I have for this site…
Well, some things do work (like the syntax-coloring in the post editor), the important part for this article (being able to edit JS files), does not… :-(
But, yes, for single-site, totally something I would recommend!
Thanks for the recommendation,
Atg
Thanks for this. Was looking for this exact plugin. Hadn’t heard of it, and it’s gonna save my behind.
Note, I have just published an update to this conversation, including a solution… :-)
https://aarontgrogg.com/blog/2013/12/24/follow-up-to-why-cant-i-edit-javascript-files-in-the-wordpress-theme-editor/
Hello,
I just have a breakthrough on the subject. Javacsript and PHP can play together nicely if you place the tag in a PHP file as such:
$(‘.home_1’).attr(‘src’, ‘ ‘);
$(‘.home_2’).attr(‘src’,”);
add_filter(‘wp_theme_editor_filetypes’, function ($types) {
$types = array(‘scss’,’js’);
return $types;
});
Beautiful find, Dmitri!
As of 4.4, this has indeed been added:
https://developer.wordpress.org/reference/hooks/wp_theme_editor_filetypes/
But from the look of the WP Core code:
https://core.trac.wordpress.org/browser/tags/4.6/src/wp-admin/theme-editor.php#L76
It looks like you might want to do something more like this, no?
add_filter(‘wp_theme_editor_filetypes’, function ($types) { $types[] = ‘scss’; $types[] = ’js’; return $types; });