I would like to add some custom JavaScript to my site: a combination of external CDN-hosted files, static library files hosted locally, and local JavaScript that I'd like to be able to edit in the admin interface.

All the files are site-wide, not page-specific.

Basically I want something like the following to be rendered in my page:

<script src="some.file.on.cdn/jquery.js"></script>
<script src="some.other.cdn/jquery.js"></script>
<script src="/my/local/uploaded/unchanging/library/file.js"></script>
  // Some JavaScript that I can edit through the WordPress
  // admin interface, preferably in a nice editor interface
  // with syntax formatting etc

The problem is that I've only been able to find two straightforward ways of adding JavaScript.

  1. Theme customisation options to add JS files in the footer - but then I'm maintaining a lot of JavaScript in a small textbox with no syntax formatting.
  2. Plugins to allow you to add custom JS, which give you a nice editing interface - but they wrap everything in outer <script> tags, so you can't add your own custom <script> tags in there.

If I try to combine the two, it doesn't work, because the files from (1) get inserted after (2), so the dependencies are broken.

What's the best way of managing this problem?

I know I could add all the local code to a file and upload it as with the other files, but I'd much prefer to be able to make quick edits in the admin interface.

I'm using WordPress 4.4.1 with Parallax Pro. I'm not using a child theme and would prefer to avoid it, and editing PHP directly, if possible.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.