diff --git a/genesis-js-no-js.php b/genesis-js-no-js.php new file mode 100644 index 0000000..c675779 --- /dev/null +++ b/genesis-js-no-js.php @@ -0,0 +1,97 @@ +Genesis Theme. 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 differing styles for elements if JavaScript is active or not. + * Version: 1.0.1 + * Author: Gary Jones + * Author URI: http://garyjones.co.uk/ + * License: GPL3 + */ + + +/** + * Plugin class for Genesis js / no-js + * + * @package GenesisJsNoJs + */ +class Genesis_Js_No_Js { + + /** + * Holds copy of instance, so other plugins can remove our hooks. + * + * @since 1.0.0 + * @link http://core.trac.wordpress.org/attachment/ticket/16149/query-standard-format-posts.php + * @link http://twitter.com/#!/markjaquith/status/66862769030438912 + * + * @var Genesis_Js_No_Js + */ + static $instance; + + /** + * Constructor. + * + * @since 1.0.0 + */ + public function __construct() { + self::$instance = $this; + add_action( 'init', array( &$this, 'init' ) ); + } + + /** + * Add action and filter. + * + * @since 1.0.0 + */ + public function init() { + add_filter( 'body_class', array( $this, 'body_class' ) ); + add_action( 'genesis_before', array( $this, 'script' ), 1 ); + } + + /** + * Add 'no-js' class to the body class values. + * + * @since 1.0.0 + * + * @param array $classes Existing classes + * @return array + */ + public function body_class( $classes ) { + $classes[] = 'no-js'; + return $classes; + } + + /** + * Echo out the script that changes 'no-js' class to 'js'. + * + * @since 1.0.0 + */ + public function script() { + ?> + + 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. + +== Installation == + +1. Unzip and upload `genesis-js-no-js` folder to the `/wp-content/plugins/` directory +1. Activate the plugin through the 'Plugins' menu in WordPress + +== Frequently Asked Questions == + += 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](http://twitter.com/joshstauffer)) + += 1.0 = +* First public version. + +== Upgrade Notice == + += 1.0.1 = +Minor change to avoid potential problems with themes hooking in elements before the script. + += 1.0 = +Update from nothingness. You will feel better for it. \ No newline at end of file