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 couldn't add defer tag in plugin javascripts. Google developer pagespeed test suggests me to add defer tag in contact form 7 javascripts.

This is how contact form 7 includes javascript in header.

add_action( 'wp_enqueue_scripts', 'wpcf7_enqueue_scripts' );

function wpcf7_enqueue_scripts() {
    // jquery.form.js originally bundled with WordPress is out of date and deprecated
    // so we need to deregister it and re-register the latest one
    wp_deregister_script( 'jquery-form' );
    wp_register_script( 'jquery-form', wpcf7_plugin_url( 'jquery.form.js' ),
        array( 'jquery' ), '2.52', true );

    $in_footer = true;
    if ( 'header' === WPCF7_LOAD_JS )
        $in_footer = false;

    wp_enqueue_script( 'contact-form-7', wpcf7_plugin_url( 'scripts.js' ),
        array( 'jquery', 'jquery-form' ), WPCF7_VERSION, $in_footer );

    do_action( 'wpcf7_enqueue_scripts' );
}

Now how to add defer="defer" tag in the above code?

share|improve this question
    
Relevant ticket: core.trac.wordpress.org/ticket/12009 –  scribu Jan 9 '12 at 17:15
    
Nice Question @Viruthagiri. –  Ramkumar Feb 2 '12 at 13:30

1 Answer 1

up vote 20 down vote accepted

There is no dedicated filter available … at least I cannot see one. But …

  • wp_print_scripts() calls WP_Scripts->do_items()
  • which calls WP_Scripts->do_item()
  • which uses esc_url()
  • which does offer a filter: 'clean_url'.

And here we go:

function add_defer_to_cf7( $url )
{
    if ( FALSE === strpos( $url, 'contact-form-7' )
      or FALSE === strpos( $url, '.js' )
    )
    { // not our file
        return $url;
    }
    // Must be a ', not "!
    return "$url' defer='defer";
}
add_filter( 'clean_url', 'add_defer_to_cf7', 11, 1 );

Caveat: not tested, just an idea. :)

Update

I have written and tested a plugin with this code. See https://gist.github.com/1584783

share|improve this answer
    
This is perfect also to use with data-main in requirejs –  Nicola Peluchetti Jun 6 '12 at 15:07
    
That's a nice hack, and so simple. I reckon it'd be good also for adding charset='utf-8' when necessary! –  webaware Jan 16 '13 at 8:16
    
Great, but why: Must be a ', not "! ? –  henrywright Feb 1 at 2:09
    
@henrywright WordPress add ' on both side of the returned string, an " would result in invalid HTML. –  toscho Feb 1 at 10:54
    
@toscho - thanks for explaining! –  henrywright Feb 1 at 15:49

protected by Community Nov 24 '13 at 2:33

Thank you for your interest in this question. Because it has attracted low-quality answers, posting an answer now requires 10 reputation on this site.

Would you like to answer one of these unanswered questions instead?

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