WPSmith | Genesis js / no-js

Genesis js / no-js

Make front-end styling easier for child themes on the Genesis Framework based on whether JavaScript is enabled or not.

Adds a no-js body class to the front-end, and a script on genesis_before which immediately changes the class to js if JavaScript is enabled. This is how WP does things on the back-end, to allow different styles for the same elements depending if JavaScript is active or not.

Genesis js / no-js is only useful if you're using a child theme of the Genesis Framework since it needs to use the genesis_before hook.

Download

Latest version: Download Genesis js / no-js v1.0.1 (Downloaded: 385 times)

Installation

Unzip and upload genesis-js-no-js folder to the /wp-content/plugins/ directory
Activate the plugin through the 'Plugins' menu in WordPress

FAQ

What does this plugin actually do?

If you look at the source of a WordPress back-end page, you'll see it has a body class of no-js. Immediately after the opening body tag is a small script which replaces no-js with js (you can see the amended class with Firebug / Inspector).

WordPress uses this to apply different styles to the same elements, depending on whether JavaScript is present or not.

This plugin recreates the same effect, but for the front-end of Genesis Framework child themes.

Shouldn't the script be at the end of the page?

Usually, yes, but it's a fairly small script, so does not block rendering of other content for any noticeable length of time.

Doing it immediately also reduces a flash of incorrectly styled content, as the page does not load with no-js styles, then switch to js once everything has finished loading.