I want to load head js first and then all enqueued scripts into it's function. Like so...

<script src=">/js/head.load.min.js" type="text/javascript" charset="UTF-8"></script>

<script type="text/javascript">
head.js("/path/to/jquery.js", "/google/analytics.js", "/js/site.js", function() {

   // all done


How would I do this?

For those that don't know HeadJS is the 2.30KB script that speeds up, simplifies and modernizes your site...


  • I don't think you need this. Just put your scripts before </body> and they will load after the document is rendered... Commented Jan 24, 2011 at 15:13
  • Putting your files at the bottom will most likely break stuff as alot plugins put inline scripts in the head.
    – Backie
    Commented Jan 24, 2011 at 15:19

4 Answers 4


You should be forewarned that not all plugins/themes use enqueue. When I first started dealing with all the JavaScripts and CSS files outputed I just hooked into the enqueued files. This resulted in me only getting 2 out of 10 JavaScript files and 1 out of 3 CSS files.

Here is some quick PoCs. Neither tested but meant to put you in the right direction, if you can code. Once I get home I'll whack together something more fitting and functional.

function head_files(){

    global $wp_scripts, $auto_compress_scripts;

    print 'print out head.js';  

    $queue = $wp_scripts->queue;
        $to_do = $wp_scripts->to_do;
    $headArray = array();
        foreach ($to_do as $key => $handle) {
            $src = $wp_scripts->registered[$handle]->src;
        $headArray[] = $src;

    print 'print out head.js("'.implode("'",$headArray.'")';

(Basically swiped most of the code from JS & CSS Script Optimizer)

add_filter('wpsupercache_buffer', 'head_files' );
function head_files($buffer){
    if ( $fileType == "js" ){
            $headArray = $matches[2];

    print 'print out head.js';  

    print 'print out head.js("'.implode("'",$headArray.'")';
    return $buffer;

Using WP Super Cache output buffering.

  • 2
    nice, but he should use that plugin instead of head.js in my opinion. it has the option to combine all js, compress it and move it in the footer Commented Jan 24, 2011 at 15:57
  • As stated before, moving stuff to the footer automatically on WordPress install leads to broken inline JavaScript.
    – Backie
    Commented Jan 25, 2011 at 8:16
  • I don't understand. Why would the footer javascript break? Head.js here does exactly the same thing (loading js after DOM is loaded). Commented Jan 26, 2011 at 12:04

Here's what I'm trying to do to integrate head.js:

i put this code in my template functions.php file

define('THEME', get_bloginfo('template_url'), true);
define('THEME_JS', THEME . '/js/', true);

function head_js_files()
    if (is_admin()) return; //to preserve the admin

        global $wp_scripts;

    $in_queue = $wp_scripts->queue;

        $scripts = array();
        foreach($in_queue as $script)

            $src = $wp_scripts->registered[$script]->src;
            $src = ( (preg_match('/^(http|https)\:\/\//', $src)) ? '' : get_bloginfo('url') ) . $src;
            $scripts[] = '{' . $script . ':"' . $src . '"}';

        echo "<script type=\"text/javascript\" src=\"".THEME_JS."head.js\"></script>\n";
        echo "<script type=\"text/javascript\">head.js(\n". implode(",\n", $scripts). "\n);</script>\n";

    $wp_scripts->queue = array();

It outputs something like this:

<script type="text/javascript">head.js(

Notice that it also uses script labeling that could be really useful sometimes to identify what (and when) scripts are loaded.

  • try testing this with plugins that call wp_print_scripts after <head> :) Commented Jan 26, 2011 at 12:19
  • What kind of plugins do so? Commented Jan 26, 2011 at 13:55
  • here's one: gravityforms.com (also your function doesn't handle localized js) Commented Jan 29, 2011 at 11:11
  • @one-trick-pony gravity forms is a paid plugin... i obviously prefer to try a free one! In the meanwhile i fixed my code to be compatible also with localized js... Commented Feb 2, 2011 at 19:52

You can also try out this plugin (or at least look at the code in it):


It does a regex on the output before it printed to the screen, so it works even with scripts that were not enqueued.


Here's my solution for this. I'm using yepnope instead of head.js, but the theory's pretty much the same.


I hope it helps, and let me know if you have any comments on that other thread.

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.