A CSS Naked Day WordPress Plugin

— Web Design & Development

CSS Naked Day is tomorrow, April 9th. Being an advocate of web standards, I think this is a very cool (albeit not well-known) event. You can read more about it at http://naked.threepixeldrift.com/.

I wanted to participate this year, but the only WordPress plugin for CSS Naked Day I could find was several years out-of-date (and therefore wasn’t fully compatible with the latest version of WordPress and used some WordPress coding practices that are no longer encouraged). Therefore I decided to create an updated plugin with a few more options based on that work.

Using the Plugin

  1. Download my JAM CSS Naked Day plugin. You can then unzip the files and add them to your WordPress plugins folder (wp-plugins/JAMCSSNakedDay/) or use WordPress’ built-in plugin installer to upload the zip file.
    Screenshot of plugin upload page
    You can upload the zip file to install the plugin using WordPress' built-in uploader.
  2. Once the plugin is activated, you’ll see a CSS Naked Day page under the Appearance menu.
    Screenshot of CSS Naked Day menu item
    A CSS Naked Day menu item will be added to the appearance menu.
  3. You can specify a few options for the plugin, including a preview options that lets you (or any logged in administrator) view your site without CSS.
    Screenshot of CSS Naked Day options page
    You can set several options for the plugin to suit your preferences.

Options

Preview Mode

By checking this box the plugin will be active for any logged in administrators, regardless of the date. You can use this option to test how your website will look on CSS Naked Day. I think this is also a good method for checking your theme  to see if it uses standards-based, semantic markup.

Timeframe

CSS Naked Day takes place on April 9th, but depending on your time zone that day actually covers a 48 hour block of time around the globe. You can choose to only remove CSS for your website’s local time zone or for the full 48 hours so that all time zones will see your naked website for at least the entire day.

Script Mode

The plugin that I initially found used PHP output buffering to strip style sheets from the HTML output before the server rendered the pages. I realize that this may introduce some performance issues and potential conflicts with caching plugins, so I also provide a JavaScript option (using jQuery) that removes style sheets and inline styles once the page is loaded.

Display Message and Message Text

You can choose to display a message explaining why your website is naked. This reassures your visitors that there is nothing wrong with the website, and it can also provide information about CSS Naked Day. The plugin uses JavaScript (via jQuery) to prepend the message to the website’s <body>.

Compatibility and Feedback

The plugin has been tested in WordPress 3.3.1. It uses the latest best-practices for the WordPress settings API and security. JavaScript is properly enqueued using wp_enqueue_script, and plugin options are passed to the script via wp_localize_script to avoid writing .js files with PHP. The plugin also includes an uninstall.php file that will remove all settings it created in your website’s database if you decide to uninstall it.

As with the plugin this is based on, there is a known issue when using PHP output buffering in which occurrences of inline styles (style="") that are intended as text and not as an HTML attribute will also be removed (e.g. in CSS tutorial pages and other code snippets). You can avoid this by using JavaScript mode. Please let me know if you have any suggestions or encounter any other issues.