Genesis js / no-jsMake JS conditional styling much easier

[imp_desc]

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.

This plugin is only useful if you’re using a child theme of the Genesis Framework since it needs to use the genesis_before hook.

Download

Download from WordPress Plugin Repository: Genesis js / no-jsMake JS conditional styling much easier v1.0.1 (385 downloads).

Installation

1. Unzip and upload genesis-js-no-js folder to the /wp-content/plugins/ directory
2. 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.

Changelog

1.0.1

• Improved plugin so script is hooked in with priority 1 – avoids a theme placing anything before the script (props Josh Stauffer)

1.0

• First public version.