Giter VIP home page Giter VIP logo

garyjones / genesis-js-no-js Goto Github PK

View Code? Open in Web Editor NEW
22.0 4.0 3.0 551 KB

WordPress plugin for Genesis child themes. Adds a 'no-js' body class to the front-end, and a small inline script that changes it to `js` if JavaScript is enabled. Allows for styling of elements (like potential hiding) if JavaScript is enabled.

License: GNU General Public License v2.0

PHP 100.00%
genesis genesis-framework wordpress wordpress-plugin

genesis-js-no-js's Introduction

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.

Git

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

composer require gamajo/genesis-js-no-js

Updates

This plugin supports the GitHub Updater plugin, so if you install that, this plugin becomes automatically updateable direct from GitHub.

Credits

Built by Gary Jones
Copyright 2011 Gamajo

genesis-js-no-js's People

Contributors

garyjones avatar timothyjensen avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar

genesis-js-no-js's Issues

PHP version compare checks for 7.1, not 7.0

Expected Behavior

The plugin should not attempt to deactivate on PHP 7.0.

Current Behavior

The plugin attempts to deactivate when running PHP 7.0

Possible Solution

Replace 7.1 with 7.0 in the version compare

Your Environment

  • Version used: 3.1.0
  • WordPress version: 4.9
  • Genesis version: 2.5.3
  • Base child theme: Custom
  • Link to your project: not public

Make CSP friendly

Instead of the inline script, change it to an enqueued external .js file, so that Content Security Policies (whitelist or nonce approaches) will work.

Regex may not always match the desired substring.

The regex used in the replace() method may not always match the substring 'no-js':

c = c.replace(/no-js/, 'js');

Say we have a body class of 'home alpha-plugin-no-js no-js', then the regex will match the first occurrence of 'no-js' and result in a body class of 'home alpha-plugin-js no-js'.

To avoid this, we can add the global flag to the regex, but that might conflict with other plugins. Another idea is to add a space so that the regex matches / no-js/ (with a preceding space). We could also create a more complex regex, but that might not be necessary.

Fatal error when plugin attempts to deactivate due to unmet PHP requirement

Expected Behavior

When the PHP version is less than the minimum required version (currently 7.0), the plugin attempts to deactivate, and one would expect that self deactivation would be successful.

Current Behavior

The plugin attempts to deactivate, but throws a fatal error:
Fatal error: Call to undefined function wp_get_current_user() in /app/public/wp-includes/capabilities.php on line 598

Possible Solution

Execute the code on the init hook.

Your Environment

  • Version used: 3.1.0
  • WordPress version: 4.9
  • Genesis version: 2.5.3
  • Base child theme: Genesis Sample
  • Link to your project: local

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.