Add a noscript element to WordPress using script_loader

A good practice for developing websites and webapps is to give alternatives for features that depend on Javascript. Something known as progressive enhancement.

[Versão em Português? Clique aqui.]

Ideally, you start from the basic experience without Javascript and progressivelly enhances the experience with new Javascript features. At least, you should give some kind of warning or alternative content to the user (or search engines) if you can’t provide the same experience.

One way of doing that is by using noscript elements with the description, the warning or an alternative feature. Say, for example, an static image instead of some kind of interactive graphic.

Unfortunately, so far, WordPress doesn’t have a native specific way to add noscript elements to any Javascript enqueued with the native wp_register_script/wp_enqueue_script functionsw

The good news is that you can solve that by using a WordPress filter. Specifically, by using the script_loader_tag, as you can see below.

/**
 * @summary        filters an enqueued script tag and adds a noscript element after it
 * 
 * @description    filters an enqueued script tag (identified by the $handle variable) and
 *                 adds a noscript element after it. If there is also an inline script enqueued
 *                 after $handled, adds the noscript element after it.
 * 
 * @access    public
 * @param     string    $tag       The tag string sent by `script_loader_tag` filter on WP_Scripts::do_item
 * @param     string    $handle    The script handle as sent by `script_loader_tag` filter on WP_Scripts::do_item
 * @param     string    $src       The script src as sent by `script_loader_tag` filter on WP_Scripts::do_item
 * @return    string    $tag       The filter $tag variable with the noscript element
 */
function add_noscript_filter($tag, $handle, $src){
    // as this filter will run for every enqueued script
    // we need to check if the handle is equals the script
    // we want to filter. If yes, than adds the noscript element
    if ( 'script-handle' === $handle ){
        $noscript = '<noscript>';
        // you could get the inner content from other function
        $noscript .= '
 
this site demands javascript
 
';
        $noscript .= '</noscript>'; $tag = $tag . $noscript; } return $tag; } // adds the add_noscript_filter function to the script_loader_tag filters // it must use 3 as the last parameter to make $tag, $handle, $src available // to the filter function add_filter('script_loader_tag', 'add_noscript_filter', 10, 3);

Enjoy! This function is also available on Github.

Adding a noscript element to WordPress scripts using the script_loader_tag filter

Celso Bessa