Does wordpress wp_enqueue_style support noscript?

I want to add stylesheet wrapped in noscript tag for a custom theme. Does wp_enqueue_style has any support for it? Or should I just include it like we do normally in html?

Solutions Collecting From Web of "Does wordpress wp_enqueue_style support noscript?"

No, it doesn’t. If you need to use NOSCRIPT, you need to add it to the theme header.php directly or use wp_head action to add it from code.

Zorro Here Stumbled across this question today when I was looking to solve the same problem for enqueued scripts. I am guessing what you really want is to use noscript after scripts, not after styles, right

If yes, I am sharing the way i solved because it may help you as well.

Using noscript with scripts

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 in the example 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 .= '<p>this site demands javascript</p>';
        $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);

Basically, you gotta append your noscript element to the related script using the add_noscript_filter, which gives you the final script string with both the original script added with wp_enqueue_script and any inline script added by wp_add_inline_script hook.

Using noscript with styles

If you really need to use it with styles, there’s the style_loader_tag filter which works in a similar fashion

You would use it like this:

/**
 * @summary        filters an enqueued style tag and adds a noscript element after it
 * 
 * @description    filters an enqueued style tag (identified by the $handle variable) and
 *                 adds a noscript element after it.
 * 
 * @access    public
 * @param     string    $tag       The tag string sent by `style_loader_tag` filter on WP_Styles::do_item
 * @param     string    $handle    The script handle as sent by `script_loader_tag` filter on WP_Styles::do_item
 * @param     string    $href      The style tag href parameter as sent by `script_loader_tag` filter on WP_Styles::do_item
 * @param     string    $media     The style tag media parameter as sent by `script_loader_tag` filter on WP_Styles::do_item
 * @return    string    $tag       The filter $tag variable with the noscript element
 */
function add_noscript_style_filter($tag, $handle, $href, $media){
    // 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 .= '<p>this site demands javascript</p>';
        $noscript .= '</noscript>';
        $tag = $tag . $noscript;
    }
        return $tag;
}
// adds the add_noscript_filter function to the style_loader_tag filters
// it must use 4 as the last parameter to make $tag, $handle, $href, $media available
// to the filter function
add_filter('style_loader_tag', 'add_noscript_style_filter', 10, 4);

References:

  • script_loader_tag on WP Trac.
  • style_loader_tag on WP Trac.

The other responses provide answers to your question as asked, but they overlook a much more common approach to modifying styles based on whether or not the client supports JavaScript.

First: In your header.php file add a no-js class to the root (html) element. It might look something like:

<html class="no-js" <?php language_attributes(); ?>>

Next: Add a script which replaces the no-js class with a js class. This can also be handled directly in header.php but I prefer to attach it at an early priority on the wp_head action. Here is an example from the current default theme, twentyseventeen:

function twentyseventeen_javascript_detection() {
    echo "<script>(function(html){html.className = html.className.replace(/\bno-js\b/,'js')})(document.documentElement);</script>\n";
}
add_action( 'wp_head', 'twentyseventeen_javascript_detection', 0 );

Finally: Decide how you want to apply your styles. It will vary on a case-by-case basis. You can either:

Apply your styles assuming that JavaScript is not available with overrides for cases when it is:

.my-element {
    display: block;
}

.js .my-element {
    display: none;
}

Or apply styles assuming that JavaScript will be available with overrides for cases when it is not:

.my-element {
    display: none;
}

.no-js .my-element {
    display: block;
}