diff --git a/CHANGELOG.md b/CHANGELOG.md new file mode 100644 index 0000000..ea00ace --- /dev/null +++ b/CHANGELOG.md @@ -0,0 +1,15 @@ +# Genesis js / no-js Changelog + +## 2.0.0 (2014-08-23) + +* Refactor class into a new file. Stops using half-implemented Singleton pattern. +* Update documentation. +* Add GitHub Updater support. + +## 1.0.1 (2011-06-02) + +* 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.0 (2011-05-24) + +* Initial release. \ No newline at end of file diff --git a/README.md b/README.md new file mode 100644 index 0000000..3cf45e7 --- /dev/null +++ b/README.md @@ -0,0 +1,52 @@ +# Genesis js / no-js + +Make front-end styling easier for child themes on the Genesis Framework based on whether JavaScript is enabled or not. + +## Description + +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. It uses the `genesis_before` hook supplied by Genesis, so it won't work for other themes. + +The script is fairly small so does not block rendering of other content for any noticeable length of time. + +Putting the script at the top 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. + +## Installation + +Once this plugin is installed and activated, then it will work automatically. There are no options, and nothing to set-up. + +### Upload + +1. Download the latest tagged archive (choose the "zip" option). +2. Go to the __Plugins -> Add New__ screen and click the __Upload__ tab. +3. Upload the zipped archive directly. +4. Go to the Plugins screen and click __Activate__. + +### Manual + +1. Download the latest tagged archive (choose the "zip" option). +2. Unzip the archive. +3. Copy the folder to your `/wp-content/plugins/` directory. +4. Go to the Plugins screen and click __Activate__. + +Check out the Codex for more information about [installing plugins manually](http://codex.wordpress.org/Managing_Plugins#Manual_Plugin_Installation). + +### Git + +Using git, browse to your `/wp-content/plugins/` directory and clone this repository: + +`git clone git@github.com:GaryJones/genesis-js-no-js.git` + +Then go to your Plugins screen and click __Activate__. + +## Updates + +This plugin supports the [GitHub Updater](https://github.com/afragen/github-updater) plugin, so if you install that, this plugin becomes automatically updateable direct from GitHub. + +## Credits + +Built by [Gary Jones](https://twitter.com/GaryJ) +Copyright 2011 [Gamajo Tech](http://gamajo.com/) \ No newline at end of file diff --git a/assets/banner-1544x500.jpg b/assets/banner-1544x500.jpg new file mode 100644 index 0000000..5dc137b Binary files /dev/null and b/assets/banner-1544x500.jpg differ diff --git a/assets/banner-772x250.jpg b/assets/banner-772x250.jpg new file mode 100644 index 0000000..6bfd0f1 Binary files /dev/null and b/assets/banner-772x250.jpg differ diff --git a/assets/icon-128x128.png b/assets/icon-128x128.png new file mode 100644 index 0000000..0b042a0 Binary files /dev/null and b/assets/icon-128x128.png differ diff --git a/assets/icon-256x256.png b/assets/icon-256x256.png new file mode 100644 index 0000000..fcf8710 Binary files /dev/null and b/assets/icon-256x256.png differ diff --git a/genesis-js-no-js.php b/genesis-js-no-js.php index c675779..1f6bc8f 100644 --- a/genesis-js-no-js.php +++ b/genesis-js-no-js.php @@ -2,96 +2,35 @@ /** * Genesis js / no-js WordPress plugin. * - * For child themes of the Genesis Theme. + * For child themes of the Genesis Framework. + * * 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. * - * @package GenesisJsNoJs - * @author Gary Jones - * @license GPL3 + * @package GenesisJsNoJs + * @author Gary Jones + * @link https://github.com/GaryJones/genesis-js-no-js + * @copyright 2011 Gary Jones, Gamajo Tech + * @license GPL-2.0+ * - * Plugin Name: Genesis js / no-js - * Plugin URI: http://code.garyjones.co.uk/plugins/genesis-js-no-js/ - * Description: For child themes of the 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 + * @wordpress-plugin + * Plugin Name: Genesis js / no-js + * Plugin URI: https://github.com/GaryJones/genesis-js-no-js + * Description: For child themes of the Genesis Framework. 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: 2.0.0 + * Author: Gary Jones + * Author URI: http://gamajo.com/ + * Text Domain: genesis-js-no-js + * Domain Path: /languages + * License: GPL-2.0+ + * License URI: http://www.gnu.org/licenses/gpl-2.0.txt + * GitHub Plugin URI: https://github.com/GaryJones/genesis-js-no-js + * GitHub Branch: master */ +require plugin_dir_path( __FILE__ ) . 'includes/class-genesis-js-no-js.php'; -/** - * 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() { - ?> - - run(); diff --git a/includes/class-genesis-js-no-js.php b/includes/class-genesis-js-no-js.php new file mode 100644 index 0000000..78f5f22 --- /dev/null +++ b/includes/class-genesis-js-no-js.php @@ -0,0 +1,61 @@ + + + Genesis Framework since it needs to use the `genesis_before` hook. +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 1. 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. + == Frequently Asked Questions == = What does this plugin actually do? =