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 19 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. :)


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

share|improve this answer
I tried it. But its not working. I can't see any defer tag in contact form 7 scripts when i view source of the page. Is it possible to apply defer tag for all .js files using wp_head filter? –  Giri Jan 9 '12 at 19:57
It works. I have tested it now. See the gist. Oh, and wp_head is not needed at all. –  toscho Jan 9 '12 at 20:33
Yes its working now. But i have plenty of plugins that adds javascripts in the header. So can you give me some code to add defer="defer" tag in all .js files instead of contact form 7 files alone ? Your answer was very userful. Thanks. –  Giri Jan 9 '12 at 20:51
@Viruthagiri Just remove the special check for 'contact-form-7'. I prepared the plugin for that. Some plugins are written without using the API: they don’t use wp_enqueue_script – no way to get these without output buffering. You shouldn’t add defer to all scripts anyway. Some depend on a correct load order and will not run then. –  toscho Jan 9 '12 at 21:22
Ahh. Got it. Thanks –  Giri Jan 9 '12 at 21:32

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.