Cleaner WordPress Markup with Soil

Soil is a WordPress plugin that cleans up WordPress markup along with a few other enhancements.

Code is poetry?

The biggest component of Soil is the ‘clean up’, which stems from me being a little OCD with code formatting. Soil’s clean up makes the output of WordPress markup as minimal as possible, mostly by using HTML5.

Let’s take a look at source of <head> from a default WordPress install running the default theme:

<!DOCTYPE html>
<html lang="en-US" class="no-js">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width">
  <link rel="profile" href="http://gmpg.org/xfn/11">
  <link rel="pingback" href="http://example.com/wp/xmlrpc.php">
  <!--[if lt IE 9]>
  <script src="http://example.com/wp/wp-content/themes/twentyfifteen/js/html5.js"></script>
  <![endif]-->
  <script>(function(){document.documentElement.className='js'})();</script>
  <title>Example Site | Just another WordPress site</title>
<link rel="alternate" type="application/rss+xml" title="Example Site &raquo; Feed" href="http://example.com/feed/" />
<link rel="alternate" type="application/rss+xml" title="Example Site &raquo; Comments Feed" href="http://example.com/comments/feed/" />
<link rel='stylesheet' id='twentyfifteen-fonts-css'  href='//fonts.googleapis.com/css?family=Noto+Sans%3A400italic%2C700italic%2C400%2C700%7CNoto+Serif%3A400italic%2C700italic%2C400%2C700%7CInconsolata%3A400%2C700&#038;subset=latin%2Clatin-ext' type='text/css' media='all' />
<link rel='stylesheet' id='genericons-css'  href='http://example.com/wp/wp-content/themes/twentyfifteen/genericons/genericons.css?ver=3.2' type='text/css' media='all' />
<link rel='stylesheet' id='twentyfifteen-style-css'  href='http://example.com/wp/wp-content/themes/twentyfifteen/style.css?ver=4.1' type='text/css' media='all' />
<!--[if lt IE 9]>
<link rel='stylesheet' id='twentyfifteen-ie-css'  href='http://example.com/wp/wp-content/themes/twentyfifteen/css/ie.css?ver=20141010' type='text/css' media='all' />
<![endif]-->
<!--[if lt IE 8]>
<link rel='stylesheet' id='twentyfifteen-ie7-css'  href='http://example.com/wp/wp-content/themes/twentyfifteen/css/ie7.css?ver=20141010' type='text/css' media='all' />
<![endif]-->
<script type='text/javascript' src='http://example.com/wp/wp-includes/js/jquery/jquery.js?ver=1.11.1'></script>
<script type='text/javascript' src='http://example.com/wp/wp-includes/js/jquery/jquery-migrate.js?ver=1.2.1'></script>
<link rel="EditURI" type="application/rsd+xml" title="RSD" href="http://example.com/wp/xmlrpc.php?rsd" />
<link rel="wlwmanifest" type="application/wlwmanifest+xml" href="http://example.com/wp/wp-includes/wlwmanifest.xml" /> 
<meta name="generator" content="WordPress 4.1" />
  <style type="text/css">.recentcomments a{display:inline !important;padding:0 !important;margin:0 !important;}</style>
</head>

And now my nitpicks, in order:

  1. HTML5 doesn’t need self-closing tags (/>)
  2. HTML5 doesn’t need the type attribute on stylesheets
  3. HTML5 doesn’t need the type attribute on JavaScript
  4. HTML5 doesn’t need the media attribute on [most] stylesheets
  5. The id attribute on stylesheets isn’t necessary
  6. EditURI and wlwmanifest links aren’t neccessary
  7. The generator meta tag isn’t necessary
  8. There shouldn’t be inline CSS for the recent comments widget

After activating Soil and enabling the clean up feature, the same <head> output becomes a lot easier to read:

<!DOCTYPE html>
<html lang="en-US" class="no-js">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width">
  <link rel="profile" href="http://gmpg.org/xfn/11">
  <link rel="pingback" href="http://example.com/wp/xmlrpc.php">
  <!--[if lt IE 9]>
  <script src="http://example.com/wp/wp-content/themes/twentyfifteen/js/html5.js"></script>
  <![endif]-->
  <script>(function(){document.documentElement.className='js'})();</script>
  <title>Example Site | Just another WordPress site</title>
<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Noto+Sans%3A400italic%2C700italic%2C400%2C700%7CNoto+Serif%3A400italic%2C700italic%2C400%2C700%7CInconsolata%3A400%2C700&#038;subset=latin%2Clatin-ext">
<link rel="stylesheet" href="http://example.com/wp/wp-content/themes/twentyfifteen/genericons/genericons.css?ver=3.2">
<link rel="stylesheet" href="http://example.com/wp/wp-content/themes/twentyfifteen/style.css?ver=4.1">
<!--[if lt IE 9]>
<link rel="stylesheet" href="http://example.com/wp/wp-content/themes/twentyfifteen/css/ie.css?ver=20141010">
<![endif]-->
<!--[if lt IE 8]>
<link rel="stylesheet" href="http://example.com/wp/wp-content/themes/twentyfifteen/css/ie7.css?ver=20141010">
<![endif]-->
<script src="http://example.com/wp/wp-includes/js/jquery/jquery.js?ver=1.11.1"></script>
<script src="http://example.com/wp/wp-includes/js/jquery/jquery-migrate.js?ver=1.2.1"></script>
</head>

Additional cleaning

Two other clean up features in Soil include relative URLs and nice search. When relative URLs are enabled, your site hostname is removed in as many places as safely possible.

Nice search rewrites search queries from http://example.com/?s=example%20query to http://example.com/search/example+query.

Download Soil and clean up the WordPress markup on your site. If you’re using the Sage starter theme, most of the features in Soil will be automatically enabled after activating the plugin.

Start the discussion on our Discourse