Skip to content

Commit 8774891

Browse files
committed
Commit from trunk of wp.org repo
1 parent b456187 commit 8774891

File tree

2 files changed

+152
-0
lines changed

2 files changed

+152
-0
lines changed

genesis-js-no-js.php

Lines changed: 97 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,97 @@
1+
<?php
2+
/**
3+
* Genesis js / no-js WordPress plugin.
4+
*
5+
* For child themes of the Genesis Theme.
6+
* Adds a no-js body class to the front-end, and a script on genesis_before
7+
* which immediately changes the class to js if JavaScript is enabled. This is
8+
* how WP does things on the back-end, to allow different styles for the same
9+
* elements depending if JavaScript is active or not.
10+
*
11+
* @package GenesisJsNoJs
12+
* @author Gary Jones
13+
* @license GPL3
14+
*
15+
* Plugin Name: Genesis js / no-js
16+
* Plugin URI: http://code.garyjones.co.uk/plugins/genesis-js-no-js/
17+
* Description: For child themes of the <a href="http://genesis-theme-framework.com/">Genesis Theme</a>. Adds a <code>no-js</code> body class to the front-end, and a script on <code>genesis_before</code> which immediately changes the class to <code>js</code> 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.
18+
* Version: 1.0.1
19+
* Author: Gary Jones
20+
* Author URI: http://garyjones.co.uk/
21+
* License: GPL3
22+
*/
23+
24+
25+
/**
26+
* Plugin class for Genesis js / no-js
27+
*
28+
* @package GenesisJsNoJs
29+
*/
30+
class Genesis_Js_No_Js {
31+
32+
/**
33+
* Holds copy of instance, so other plugins can remove our hooks.
34+
*
35+
* @since 1.0.0
36+
* @link http://core.trac.wordpress.org/attachment/ticket/16149/query-standard-format-posts.php
37+
* @link http://twitter.com/#!/markjaquith/status/66862769030438912
38+
*
39+
* @var Genesis_Js_No_Js
40+
*/
41+
static $instance;
42+
43+
/**
44+
* Constructor.
45+
*
46+
* @since 1.0.0
47+
*/
48+
public function __construct() {
49+
self::$instance = $this;
50+
add_action( 'init', array( &$this, 'init' ) );
51+
}
52+
53+
/**
54+
* Add action and filter.
55+
*
56+
* @since 1.0.0
57+
*/
58+
public function init() {
59+
add_filter( 'body_class', array( $this, 'body_class' ) );
60+
add_action( 'genesis_before', array( $this, 'script' ), 1 );
61+
}
62+
63+
/**
64+
* Add 'no-js' class to the body class values.
65+
*
66+
* @since 1.0.0
67+
*
68+
* @param array $classes Existing classes
69+
* @return array
70+
*/
71+
public function body_class( $classes ) {
72+
$classes[] = 'no-js';
73+
return $classes;
74+
}
75+
76+
/**
77+
* Echo out the script that changes 'no-js' class to 'js'.
78+
*
79+
* @since 1.0.0
80+
*/
81+
public function script() {
82+
?>
83+
<script type="text/javascript">
84+
//<![CDATA[
85+
(function(){
86+
var c = document.body.className;
87+
c = c.replace(/no-js/, 'js');
88+
document.body.className = c;
89+
})();
90+
//]]>
91+
</script>
92+
<?php
93+
}
94+
95+
}
96+
97+
new Genesis_Js_No_Js;

readme.txt

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
=== Plugin Name ===
2+
Contributors: GaryJ
3+
Donate link: http://code.garyjones.co.uk/donate/
4+
Tags: genesis, js-no-js
5+
Requires at least: 3.0
6+
Tested up to: 3.3
7+
Stable tag: 1.0.1
8+
9+
Make front-end styling easier for child themes on the Genesis Framework based on whether JavaScript is enabled or not.
10+
11+
== Description ==
12+
13+
Make front-end styling easier for child themes on the <a href="http://genesis-theme-framework.com/">Genesis Framework</a> based on whether JavaScript is enabled or not.
14+
15+
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.
16+
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.
17+
18+
This plugin is only useful if you're using a child theme of the <a href="http://genesis-theme-framework.com/">Genesis Framework</a> since it needs to use the `genesis_before` hook.
19+
20+
== Installation ==
21+
22+
1. Unzip and upload `genesis-js-no-js` folder to the `/wp-content/plugins/` directory
23+
1. Activate the plugin through the 'Plugins' menu in WordPress
24+
25+
== Frequently Asked Questions ==
26+
27+
= What does this plugin actually do? =
28+
29+
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).
30+
31+
WordPress uses this to apply different styles to the same elements, depending on whether JavaScript is present or not.
32+
33+
This plugin recreates the same effect, but for the front-end of <a href="http://genesis-theme-framework.com/">Genesis Framework</a> child themes.
34+
35+
= Shouldn't the script be at the end of the page? =
36+
37+
Usually, yes, but it's a fairly small script, so does not block rendering of other content for any noticeable length of time.
38+
39+
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.
40+
41+
== Changelog ==
42+
43+
= 1.0.1 =
44+
* 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))
45+
46+
= 1.0 =
47+
* First public version.
48+
49+
== Upgrade Notice ==
50+
51+
= 1.0.1 =
52+
Minor change to avoid potential problems with themes hooking in elements before the script.
53+
54+
= 1.0 =
55+
Update from nothingness. You will feel better for it.

0 commit comments

Comments
 (0)