Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

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

});
</script>

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...

http://headjs.com/

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

4 Answers

up vote 8 down vote accepted

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.

add_action('wp_print_scripts','head_files');
function head_files(){

    global $wp_scripts, $auto_compress_scripts;

    print 'print out head.js';  

    $queue = $wp_scripts->queue;
        $wp_scripts->all_deps($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" ){
            preg_match_all('~<script.*(type="["\']text/javascript["\'].*)?src=["\'](.*)["\'].*(type=["\']text/javascript["\'].*)?></script>~iU',$content,$matches);
            $headArray = $matches[2];
    }


    print 'print out head.js';  

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

Using WP Super Cache output buffering.

share|improve this answer
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 –  onetrickpony Jan 24 '11 at 15:57
    
As stated before, moving stuff to the footer automatically on WordPress install leads to broken inline JavaScript. –  Backie Jan 25 '11 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). –  onetrickpony Jan 26 '11 at 12:04
add comment

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);

add_action('wp_print_scripts','head_js_files');
function head_js_files()
{
    if (is_admin()) return; //to preserve the admin

        global $wp_scripts;

    $in_queue = $wp_scripts->queue;

    if(!empty($in_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(
    {jquery:"/wp-includes/js/jquery/jquery.js"},
    {jquery_lastfm:"http://localhost/lucianomammino/wp-content/plugins/lastfm-recent-tracks-widget/js/jquery.lastfm.js"},
    {nav:"http://localhost/lucianomammino/wp-content/themes/lmtheme/js/jquery.dropdown.js"}
);</script>

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

share|improve this answer
    
try testing this with plugins that call wp_print_scripts after <head> :) –  onetrickpony Jan 26 '11 at 12:19
    
What kind of plugins do so? –  Luciano Mammino Jan 26 '11 at 13:55
    
here's one: gravityforms.com (also your function doesn't handle localized js) –  onetrickpony Jan 29 '11 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... –  Luciano Mammino Feb 2 '11 at 19:52
add comment

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

http://wordpress.org/extend/plugins/headjs-loader/

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

share|improve this answer
add comment

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

http://wordpress.stackexchange.com/a/40325/9802

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

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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