Make front end styling easier for child themes on the Genesis Framework based on whether JavaScript is enabled or not.
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 uses the genesis_before
hook.
Once this plugin is installed and activated, then it will work automatically. There are no options, and nothing to set-up.
/wp-content/plugins/
directory.Check out the Codex for more information about installing plugins manually.
Using git, browse to your /wp-content/plugins/
directory and clone this repository:
git clone [email protected]:GaryJones/genesis-js-no-js.git
Then go to your Plugins screen and click Activate.
composer require gamajo/genesis-js-no-js
Once this plugin is installed and activated, then it will work automatically. There are no options, and nothing to set-up.
/wp-content/plugins/
directory.Check out the Codex for more information about installing plugins manually.
Using git, browse to your /wp-content/plugins/
directory and clone this repository:
git clone [email protected]:GaryJones/genesis-js-no-js.git
Then go to your Plugins screen and click Activate.
composer require gamajo/genesis-js-no-js
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 browser developer tools).
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.
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.
See CHANGELOG.md for all of the changes.