3

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?

2

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.

2

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:

  • Wait? Sorry I am bit confused, why would I add script within noscript tag? I want to add css within noscript so any content that stays hidden can be made visible to users with javascript disabled. I will try your solution if it works with what I want to do and will mark it as solution. Thanks – Zorro Here Oct 4 '17 at 11:02
  • Well, noscript is, a lot of times, used as fallback for scripts. Anyway, you can use eitcher the script_loader_tag or the style_loader_tag filters. – Celso Bessa Oct 4 '17 at 15:19
0

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;
}
  • Thanks, actually I used to do that but it complicates things and as site grows you have to deal with more complications. Also there are chances of content showing up while page is loading. For same reasons I dropped using it and started using noscript, which keeps things simple. – Zorro Here Oct 16 '17 at 17:08

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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