4

The instructions for implementing Modernizr state that I should add class="no-js" to the <html> element.

Is there a way to do this in WordPress using a hook or filter? If at all possible, I'd prefer to do this without editing the theme files.

4
  • Sorry, I fail at previewing and escaping my code - I need to add the class to the <html> element (see edited question). Also, I need to add it via PHP. "no-js" stands for "No Javascript", so using javascript to set that class is not an option.
    – tex
    Jun 6 '11 at 8:08
  • Sorry about that.
    – Bainternet
    Jun 6 '11 at 9:24
  • This thread is a bit outdated, sorry, but may this plugin be usefull for someone reading you, as i did: wordpress.org/extend/plugins/genesis-js-no-js/faq/… Enjoy !
    – KouiK
    Dec 9 '11 at 14:44
  • There is a hook to modify the body classes, you can add it there. codex.wordpress.org/Plugin_API/Filter_Reference/body_class
    – jgraup
    Jan 17 '16 at 14:28
7

This is not exactly the answer, but you can use a hook for language_attributes filter. This action is fired at <html> tag and what it does is simply echo the lang=en string, for ex. You can hook to that and replace the string with your CSS class, like this:

add_filter('language_attributes', 'modernizr');
function modernizr($output) {
    return $output . ' class="no-js"';
}

This works only when your theme follows the WordPress Theme Development Checklist. Sometimes people don't follow this and that breaks the technique.

5
  • I'd considered that, but it looks a little hacktacular, so I'm hoping to find another solution. Will leave the question open to see if there are any other interesting suggestions.
    – tex
    Jun 6 '11 at 8:52
  • 1
    @Tex Take a look at the Codex. @rilwis suggestion is best practice. Place his code in your functions.php file.
    – kaiser
    Jun 6 '11 at 11:15
  • 1
    @kaiser I'm familiar with that article, but I don't see anything in the article that suggests that using language_attributes to set other attributes in the <html> tag is 'best practice'. As a matter of fact, the article states that the two acceptable parameters to the function are 'xhtml' and 'html', which supports my contention that this is a bit hacky. Anyway, if it works without detrimental side effects and it's the only way, I'll probably go with it.
    – tex
    Jun 7 '11 at 11:52
  • @Tex you can still add your own filter or hook. functions.php always runs before any other file.
    – kaiser
    Jun 7 '11 at 11:56
  • "Place his code in your functions.php file." - Actually, since the OP state that he doesn't want to edit Theme files, I would recommend either 1) place the code in a Child Theme functions.php file, or 2) place the code in a site-specific Plugin. Apr 4 '12 at 16:01
3

A little late to the game here, but just to add to @Rilwis answer you could add the script to a function that checks if the no-js language attributes are added or not.

While I don't use Modernizr, I do use the no-js detection script from twenty-sixteen so inclusion is pretty much the same. Doing it this way, you don't have to worry about removing the function added to wp_head or wp_enqueue_scripts since it happens automatically when you remove the filter.

Adding Removing Filter Approach

/** 
 * Javascript Detection Filter
 * 
 * remove_filter( 'language_attributes', 'lang_atts_js_detect' ); 
 */ 
add_filter( 'language_attributes', 'lang_atts_js_detect' );
function lang_atts_js_detect($output) {
    return $output . ' class="no-js"';
}
add_action( 'wp_head', function() {
    if ( has_filter( 'language_attributes', 'lang_atts_js_detect' ) ) {
        echo "<script>(function(html){html.className = html.className.replace(/\bno-js\b/,'js')})(document.documentElement);</script>\n";
    }
}, 0);

Theme Support Approach

Another option could be to do this using current_theme_supports.

/** 
 * Javascript Detection Theme Support
 * 
 * add_theme_support( 'js-detect' ); 
 */ 
add_action( 'init', function() {
    if ( current_theme_supports( 'js-detect' ) && !is_admin() )
        add_filter( 'language_attributes', 'lang_atts_js_detect_class' );
        add_action( 'wp_head', 'lang_atts_js_detect_script', 0 );
}
function lang_atts_js_detect_class($output) {
    return $output . ' class="no-js"';
}
function lang_atts_js_detect_script() {
    echo "<script>(function(html){html.className = html.className.replace(/\bno-js\b/,'js')})(document.documentElement);</script>\n";
}

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.