Genesis js / no-js

Description

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.

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

Once installed and activated, then the plugin will work. There are no options, and nothing to set-up.

FAQ

Installation Instructions
  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

Once installed and activated, then the plugin will work. There are no options, and nothing to set-up.

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.

Reviews

Read all 2 reviews

Contributors & Developers

“Genesis js / no-js” is open source software. The following people have contributed to this plugin.

Contributors

“Genesis js / no-js” has been translated into English (UK). Thank you to the translators for their contributions.

Translate “Genesis js / no-js” into your language.

Interested in development?

Browse the code or subscribe to the development log by RSS.

Changelog

2.1.0

  • Load plugin text domain.
  • Add composer.json.
  • Better change log format.
  • Tweak documentation.

2.0.0

  • GitHub Updater plugin support
  • Refactor class into a new file. Stops using half-implemented Singleton pattern.
  • Update documentation.

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.