whilst wp_enqueue_script seems to work it's not really elegant. I'm currently making a WP front end which uses MVC (backbone.js) and has literally 30+ seperate Model/View/Collection/Controller scripts and I keep adding to the number. I've used require.js a lot before and really like it, however it seems to completely break wordpresses logic.

Can anyone point me to a clean method of using a js scriptloader with wordpress? or is this a hopeless task?


  • 1
    What's not elegant about it? Front end as in theme? What are you trying to achieve feature wise/performance wise that the wp_enqueue_script can not give you?
    – Adam
    Apr 28, 2012 at 15:17
  • I'm trying to create a single page theme interfacing the JSON API with only the bare bones WP HTML generation as a fallback. I guess, I'm trying to delegate the responsibility for bootstrapping JS dependencies to the front end as opposed to the PHP as Ideally I'm only going to call a PHP page-render once then dynamically load additional JS deps when the app requires them.
    – Alex
    Apr 28, 2012 at 15:54

2 Answers 2


Though WordPress already has a basic .js API (with register and enqueue script), I don't see why you cannot use it in conjunction with require.js, at least at the modular level.

From what I can tell (never used it) it only needs to be loaded, so you can,


Then use the recommended require folder structure and js code to take advantage of it. I believe that require.js is framework agnostic, even so it has it's own namespace function to avoid conflicts.

With that being said your still going to be limited to using it for your own code as opposed to plugins and themes you might be using.

Meaning, if a plugin or theme author does it the right way you can wp_dequeue_script the script and manage it with require.js, but what if they don't? There is not much you can do outside writing some sort of hacky plugin or manually changing the code.

For this reason using a js framework with wordpress is probably not worth the effect, unless your doing it from scratch and have control over the plugins and themes.

  • you mean only enqueue the require.js file and then (somehow, sorry my WP is not great) push in the actual js deps?
    – Alex
    Apr 28, 2012 at 16:15
  • just reading over here about it, codex.wordpress.org/Function_Reference/wp_enqueue_script seems as though this still means heaping a huge lump of js into the users' cache when it's perhaps unnecessary.. (using the deps will essentially link in those files when the page is rendered)
    – Alex
    Apr 28, 2012 at 16:18
  • Well you would just use require to load the js at the modular level, I don't see any other reason why one would use this if not doing it for that reason, I added to my answer.
    – Wyck
    Apr 28, 2012 at 16:22

For using require JS you need add in head

<!-- Delayed execution of inline jQuery scripts with ready waiting event -->
<script type="text/javascript">(function(w, d, u){w.readyQ = []; w.bindReadyQ = []; function p(x, y){if (x == "ready"){w.bindReadyQ.push(y); } else{w.readyQ.push(x); }}; var a = {ready:p, bind:p}; w.$ = w.jQuery = function(f){if (f === d || f === u){return a} else{p(f)}}})(window, document)</script>

<!-- Loading require.js -->
<script async data-main="/wp-content/theme/default/js/requirejs.config" src="/wp-content/theme/default/js/requirejs.min.js"></script>

Next, create Require.JS config file and update functions.php

/* Delayed loading of all JS files */
add_filter('script_loader_tag', function($tag, $handle, $src) {
    if (isAdmin()) return $tag;

    if (stripos($src, 'jquery.min') !== FALSE) return '';

    global $wp_scripts;
    $dependencies = $wp_scripts->query($handle, 'registered')->deps;
    $dependenciesList = empty($dependencies) ? "'jquery'" : "'" . implode("','", $wp_scripts->query($handle, 'registered')->deps) . "'";

    return "<script>$(document).ready(function(){ define('{$handle}', [{$dependenciesList}], function(){require(['{$src}']);}); require(['{$handle}']); });</script>\n";
}, 10, 3);

And in finish, you need in your config file, add initialization of delayed jquery events, like this:

    paths: {
        jquery: 'jquery.min'

//loading jquery as dependency
require(["jquery"], function ($) {
  • Editing my functions.php in that way completely crashed my site without giving any helpful error message. I'm glad I was able to SSH into my server and edit the file directly to delete those lines.
    – Ryan
    Feb 4, 2016 at 6:06
  • I do not have any comments, except this: (facepalm)
    – akazakou
    Feb 5, 2016 at 10:30
  • Nice idea - isAdmin is not a WP function - is_admin() might have been a better guess ;)
    – Q Studio
    Sep 23, 2020 at 9:48

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.