Ben Word

Find Hotlinks with Killshot

Fri, 12 Apr 2013 00:00:00 -0500

Hotlinking is when you source an image form a third-party web site without placing it on your own server.

This practice is looked down on and even considered stealing by some. I inherited a website that has a thousand blog posts starting from early 2009. The original contributors to the blog for several years would frequently hotlink images in their posts.

A lot of the images were returning 404’s by this time, but there were still lots of posts actively hotlinking images. I talked to Stephen Jothen about the problem and mentioned that I wished there was a tool that could crawl a site and spit out a list of URLs that contained hotlinked assets.

Stephen replied with, “I got this”, and a couple hours later Killshot was born. Scott Walkinshaw packaged it up as a gem to make the installation process easy.

Installation

Make sure you’ve got RubyGems installed, and then run the following:

$ gem install killshot

Killshot is now installed can be ran from anywhere on your system.

Usage

Killshot works by providing a root to crawl along with a list of allowed domains. To find hotlinks on the site I inherited, I ran:

$ killshot -r http://shoretelsky.dev -w www.shoretelsky.com

Killshot starts crawling the site and spitting out hotlinks it discovers:

Searching for hotlinks...
1. http://gigaom.files.wordpress.com/2010/08/vonage-facebook-iphone.jpg from http://www.shoretelsky.com/2010/08/05/vonage-lets-you-make-calls-over-facebook-for-free/
2. http://www.turksat.com.tr/english/v2/sites/default/files/node_images/cable5.jpg from http://www.shoretelsky.com/2010/08/03/are-service-providers-giving-up-on-landline-too-soon/
3. http://blog.radvision.com/images/2008/20080811-VideoOverEnterprise-More-bandwidth.jpg from http://www.shoretelsky.com/2010/07/29/enterprise-voip-your-network-or-ours/
4. http://2.bp.blogspot.com/_5cLmD8GqnKY/SyhyeXIy-FI/AAAAAAAADUA/KD_11HoCONM/s320/telephone-game-300x300.jpg from http://www.shoretelsky.com/2010/07/27/apps-arent-just-for-smartphones-theyre-for-desk-phones-too/
5. http://beta.thehindu.com/multimedia/dynamic/00027/25IN_THSWS_FACEBOOK_27362f.jpg from http://www.shoretelsky.com/2010/07/14/social-media-use-at-work-on-the-rise/
6. http://farm1.static.flickr.com/54/119209886_3842c27ced_m.jpg from http://www.shoretelsky.com/2010/06/08/interview-with-dan-hoffman-surfing-the-mobility-wave/
7. http://www.wired.com/images_blogs/gamelife/2010/01/ipad.jpg from http://www.shoretelsky.com/2010/07/12/were-featured-in-the-wall-street-journal/

From WordPress to Jekyll

Tue, 09 Apr 2013 00:00:00 -0500

I’ve moved my blog from WordPress to Jekyll — a static site generator that runs on Ruby.

I’ve found Jekyll interesting since I heard about it a few years ago, and once I finally got around to playing with it a bit more, decided to move my blog over from WordPress.

I had no reason to use WordPress for my site. Aside from W3 Total Cache, I wasn’t using any plugins, nor any custom post types or anything special. This site is simply a blog with a handful of pages.

Jekyll allows me to write posts in Sublime Text 2 with Markdown and manage everything in git.

I use a Grunt setup similar to the one in Roots to compile LESS to CSS. My _config.yml is pretty straightforward:

# Dependencies
markdown:     rdiscount
rdiscount:    { extensions: [smart] }
pygments:     true
exclude:      ["Gruntfile.js", "node_modules", "package.json"]

# Settings
paginate:     10
name:         Ben Word
description:
url:          http://benword.com
permalink:    /:title/

auto:         true
server:       true

My default layout has includes for the <head>, header, footer and JS, which is similar to what you’d find in the Roots theme wrapper:

<!DOCTYPE html>
<html lang="en">
  <head>
    {% include head.html %}
  </head>
  <body>
    {% include header.html %}

    <div class="wrap container" role="document">
      <main role="main">
        {{ content }}
      </main>
    </div>

    {% include footer.html %}
    {% include js.html %}
  </body>
</html>

I decided to use Bootstrap 3 on this site even though it’s still in active development. Some notes:

I setup a variables-custom.less file where I define my custom fonts and sizes so that I can update Bootstrap 3 while it’s being developed and not worry about overwriting my changes
I’ve commented out a lot of things that I don’t need in bootstrap.less (glyphicons (I’m using Icomoon), dropdowns, navbar, modals, carousel, and lots more)
I’m using rem sizing on mostly everything

I love this new setup. Having complete control of the HTML, CSS, and JS output feels great after making so many WordPress sites over the past several years. This doesn’t mean that I’m done with WordPress — I’ll still be working with WordPress on a daily basis and Roots will continue to be maintained. I’m also working on a new project with Scott, Joel and Nick. Stay tuned!

Using Roots Theme without Bootstrap

Tue, 12 Feb 2013 00:00:00 -0600

Want to get the benefits of using Roots (theme wrapper, clean code, URL rewrites) without having to use Bootstrap?

Here’s how to get up and running in just a few minutes:

Download Roots
Edit lib/scripts.php and remove the CSS enqueues for Bootstrap CSS
Edit assets/js/plugins.js and remove the minified Bootstrap JS
Remove add_theme_support('bootstrap-top-navbar') from lib/config.php and the Bootstrap navbar specific modifications in the nav walker at lib/nav.php.

Roots is delete key friendly, just like HTML5 Boilerplate.

Jump Start Your WordPress Site Development with Soil

Mon, 05 Nov 2012 00:00:00 -0600

Soil is a collection of frequently used plugins for your WordPress installation along with a site specific plugin that contains your custom post types, taxonomies, meta boxes and shortcodes.

You can download the latest version from GitHub.

What’s Included?

Must Use Plugins

Options Framework Plugin
Custom Metaboxes and Fields
CF Post Formats
Base — Site specific functionality (custom post types, taxonomies, meta boxes, shortcodes)

Plugins

The master branch of Roots is also included, although I just end up replacing it with the grunt.js branch.

Installing Soil

After installing the latest Soil you’ll need to extract the contents to your wp-content directory.

You should install Soil after you’ve already installed WordPress to avoid any conflicts from the mu-plugins since they’re already loaded before the WordPress installation is finished.

Site Specific Functionality

In the mu-plugins directory you’ll find a plugin called Base. The Base plugin is used to define all the custom post types, taxonomies, meta boxes, and shortcodes for your site. Base comes with some basic examples of each of these.

Custom Post Types and Taxonomies

Custom post types and taxonomies are defined in mu-plugins/base/lib/post-types.php. There’s an example post type called Rotator that can be used for something like a slideshow or carousel.

The Rotator Location taxonomy can be used to group Rotator posts together to use in specific areas on your site.

Meta Boxes

Custom post types and taxonomies are defined in mu-plugins/base/lib/meta-boxes.php. Base uses the Custom Metaboxes and Fields plugin for creating custom meta boxes. This plugin allows you to easily create several different types of meta boxes (normal inputs, textareas, file uploads, datepickers, TinyMCE instances and more) and assign them to specific pages and custom post types.

The included example adds a meta box to pages called Page Options with an input for subtitles.

Use this snippet to output the subtitle in your template:

<?php
  $subtitle = get_post_meta($post->ID, '_base_page_subtitle', true);
  if (!empty($subtitle)) :
?>
  <h2><?php echo $subtitle; ?></h2>
<?php endif; ?>

Shortcodes

Shortcodes are defined in mu-plugins/base/lib/shortcodes.php. The example [rotator] shortcode will output posts from the Rotator custom post type. You can also specify the Rotator Location (taxonomy) with an attribute, ie: [rotator location="home"]

The example shortcode is grabbed from a template file rather than concatenating the output which really helps with readability and working with the shortcode code.

It wouldn’t take much work to convert the included shortcode template and use it to create a Bootstrap carousel to use wherever you’d like on your site. Here’s a basic example:

<div class="carousel slide">
  <div class="carousel-inner">
    <?php
      $rotator_location = array();
      if (!empty($location)) :
        $rotator_location = array(
          array(
            'taxonomy' => 'base_rotator_location',
            'field'    => 'slug',
            'terms'    => $location
          )
        );
      endif;

      $rotator_args = array(
        'posts_per_page' => -1,
        'meta_query'     => array(array('key' => '_thumbnail_id')),
        'post_type'      => 'base_rotator',
        'tax_query'      => $rotator_location
      );
      $rotator_query = new WP_Query($rotator_args);

      $i = 0;
      while ($rotator_query->have_posts()) : $rotator_query->the_post();
    ?>
      <?php $classes = ($i === 0) ? 'active item' : 'item'; ?>
      <div <?php post_class($classes); ?>>
        <?php the_post_thumbnail(); ?>
        <div class="carousel-caption">
          <h4><?php the_title(); ?></h4>
          <?php the_excerpt(); ?>
        </div>
      </div>
    <?php $i++; endwhile; wp_reset_postdata(); ?>
  </div>
</div>

How to style Gravity Forms with Bootstrap and LESS

Mon, 15 Oct 2012 00:00:00 -0500

Gravity Forms is the best solution for building forms in WordPress. There currently aren’t any other plugins that come close to what Gravity Forms has to offer, and the features in Gravity Forms allow you to build very complex forms all within WordPress.

One problem with Gravity Forms is that you can’t easily edit the form markup. You’re able to apply CSS classes to certain areas but you won’t be able to target the exact elements that you want. Applying Bootstrap’s styling for forms, buttons, and alerts to Gravity Forms is extremely easy by editing Bootstrap’s LESS files.

Before you read further you must be able to compile Bootstrap’s LESS files to the appropriate CSS files. This usually means that bootstrap.less compiles to bootstrap.css, and responsive.less compiles to bootstrap-responsive.css.

Lately I’ve been using a grunt.js build script that handles compiling LESS, but there are several tools available that have made it painless: CodeKit (OS X), SimpLESS, WP-LESS

Gravity Forms Settings

After downloading and activating Gravity Forms you’ll need to change a couple general settings. Navigate to Forms > Settings through the admin navigation:

Set Output CSS to No
Set Output HTML5 to Yes

The included Gravity Forms CSS includes too many styles (their forms.css includes almost 2,500 lines) you’d need to override so it’s just easier to start from scratch.

Go ahead and create a new form and then include it on a post or page so that you’re able to test your new styles. When including a Gravity Form I opt for not displaying the form title and description and instead just manually include those if necessary.

General Styling for Gravity Forms

Before we start editing LESS files we’ll need to apply some basic styling to the form, such as making the <ul> have list-style: none; and removing unnecessary margins.

In your theme’s stylesheet add the following:

.gform_wrapper ul { list-style: none; margin-left: 0; }
.gform_wrapper form { margin-bottom: 0; }

To get radio and checkbox inputs to display properly, add:

.gfield_radio input,
.gfield_checkbox input {
  vertical-align: 0;
}
.gfield_radio label,
.gfield_checkbox label {
  display: inline-block;
  margin-left: 8px;
}

I use LESS for my stylesheet and like to use Bootstrap’s @red to style the asterisks on required fields:

.gform_wrapper .gfield_required {
  color: @red;
  padding-left: 1px;
}

Editing Bootstrap’s LESS for Gravity Forms Styling

buttons.less

Open up buttons.less so that we can apply the Bootstrap styles associated with both .btn and .btn-primary to .gform_button.

Update the first .btn style block so that it gets applied to the Gravity Forms submit button:

// Core
.btn,
.gform_button {
  display: inline-block;
  .ie7-inline-block();
  padding: 4px 14px;

  ...etc.

Update the backgrounds further down in the file to apply the styling to the Gravity Forms button:

// Set the backgrounds
// -------------------------
.btn,
.gform_button {
  // reset here as of 2.0.3 due to Recess property order
  border-color: #c5c5c5;
  border-color: rgba(0,0,0,.15) rgba(0,0,0,.15) rgba(0,0,0,.25);
}
.btn-primary,
.gform_button {
  .buttonBackground(@btnPrimaryBackground, @btnPrimaryBackgroundHighlight);
}

After making these changes and re-compiling your Bootstrap LESS you’ll notice that the Gravity Forms submit button now looks like a Bootstrap button with the primary styling.

alerts.less

Edit your theme stylesheet to hide the error messages from Gravity Forms associated with each field since we’ll be applying Bootstrap’s error styling to the inputs:

.gform_wrapper .validation_message { display: none; }

Open up alerts.less so that we can apply the Bootstrap alert styles to the necessary Gravity Forms elements:

Update the first .alert style block so that it gets applied to the Gravity Forms error and confirmation messages:

// Base styles
// -------------------------

.alert,
.validation_error,
#gforms_confirmation_message {
  padding: 8px 35px 8px 14px;
  margin-bottom: @baseLineHeight;

  ...etc.

Update the .alert-error style block so that it gets applied to the necessary Gravity Forms form elements:

.alert-danger,
.alert-error,
.validation_error,
.gform_wrapper .gfield_error input[type=text],
.gform_wrapper .gfield_error input[type=tel],
.gform_wrapper .gfield_error input[type=email],
.gform_wrapper .gfield_error textarea,
.gform_wrapper .gfield_error select {
  background-color: @errorBackground;
  border-color: @errorBorder;
  color: @errorText;
}

I like to also apply the @errorText to the form labels in my theme stylesheet:

.gform_wrapper .gfield_error label {
  color: @errorText;
}

Further Customizations

Now that you have Bootstrap’s button and alert styling applied to Gravity Forms you might want to customize and style your forms further. You can either edit forms.less or just make your customizations in your theme stylesheet.

Alternative Method

You can also apply the styles just by editing your theme stylesheet if you add imports for buttons.less and alerts.less at the top of the file, although this will result in a lot of duplicated code in the final output. Example:

@import "bootstrap/alerts.less";
@import "bootstrap/buttons.less";

.gform_wrapper .gform_button {
  .btn;
  .btn-primary;
}

I’ve created a gist that includes the modified Bootstrap LESS files (only tested on Bootstrap v2.1.1).

Integrating Grunt with Roots Theme

Wed, 03 Oct 2012 00:00:00 -0500

Using Grunt with Roots will help you automate your workflow and build WordPress themes more efficiently.

I pushed up a Grunt branch to the Roots repository that will show you how I’ve used grunt in my projects lately. The Roots Gruntfile will:

Validate your JavaScript with JSHint
Compile Bootstrap’s bootstrap.less & responsive.less along with your site-specific app.less to main.css
Concatenate all your JavaScript plugins and site-specific JS to scripts.js
Minify scripts.js to scripts.min.js & main.css to main.min.css
Update lib/scripts.php’s wp_enqueue_style and wp_enqueue_script calls to update the version based off the md5 of the files (to bust cache)

Benefits

Easily compile LESS files
Minification and concatenation without plugins
Fewer requests made to the server (one CSS file, one main JS file besides Modernizr and jQuery)
Ensures valid JavaScript
Others working on your project are able to use the same build script and have a unified development process
Code is optimized for production use

The Gruntfile.js file

'use strict';
module.exports = function(grunt) {

  grunt.initConfig({
    jshint: {
      options: {
        jshintrc: '.jshintrc'
      },
      all: [
        'Gruntfile.js',
        'assets/js/*.js',
        'assets/js/plugins/*.js',
        '!assets/js/scripts.min.js'
      ]
    },
    recess: {
      dist: {
        options: {
          compile: true,
          compress: true
        },
        files: {
          'assets/css/main.min.css': [
            'assets/css/less/bootstrap/bootstrap.less',
            'assets/css/less/bootstrap/responsive.less',
            'assets/css/less/app.less'
          ]
        }
      }
    },
    uglify: {
      dist: {
        files: {
          'assets/js/scripts.min.js': [
            'assets/js/plugins/bootstrap/bootstrap-transition.js',
            'assets/js/plugins/bootstrap/bootstrap-alert.js',
            'assets/js/plugins/bootstrap/bootstrap-button.js',
            'assets/js/plugins/bootstrap/bootstrap-carousel.js',
            'assets/js/plugins/bootstrap/bootstrap-collapse.js',
            'assets/js/plugins/bootstrap/bootstrap-dropdown.js',
            'assets/js/plugins/bootstrap/bootstrap-modal.js',
            'assets/js/plugins/bootstrap/bootstrap-tooltip.js',
            'assets/js/plugins/bootstrap/bootstrap-popover.js',
            'assets/js/plugins/bootstrap/bootstrap-scrollspy.js',
            'assets/js/plugins/bootstrap/bootstrap-tab.js',
            'assets/js/plugins/bootstrap/bootstrap-typehead.js',
            'assets/js/plugins/*.js',
            'assets/js/_*.js'
          ]
        }
      }
    },
    watch: {
      less: {
        files: [
          'assets/css/less/*.less',
          'assets/css/less/bootstrap/*.less'
        ],
        tasks: ['recess']
      },
      js: {
        files: [
          '<%= jshint.all %>'
        ],
        tasks: ['jshint']
      }
    },
    clean: {
      dist: [
        'assets/css/main.min.css',
        'assets/js/scripts.min.js'
      ]
    }
  });

  // Load tasks
  grunt.loadTasks('tasks');
  grunt.loadNpmTasks('grunt-contrib-clean');
  grunt.loadNpmTasks('grunt-contrib-jshint');
  grunt.loadNpmTasks('grunt-contrib-uglify');
  grunt.loadNpmTasks('grunt-contrib-watch');
  grunt.loadNpmTasks('grunt-recess');

  // Register tasks
  grunt.registerTask('default', [
    'clean',
    'recess',
    'uglify',
    'version'
  ]);
  grunt.registerTask('dev', [
    'watch'
  ]);

};

File changes/re-organization

There have been a few changes in the grunt branch allowing better organization of your assets:

All Bootstrap files have been moved into a subdirectory to assets/css/less/bootstrap/
app.css has been renamed to app.less, moved to the LESS directory, and updated with some @import’s at the top of the file to use variables and mixins from Bootstrap
plugins.js has been removed since you’ll be placing all of your plugins within assets/js/plugins/
The minified Bootstrap JS doesn’t exist anymore and all of the Bootstrap plugins exist in assets/js/plugins/bootstrap/ — you can easily remove certain plugins from your site by editing the Gruntfile
main.js has been replaced with _main.js and contains an example helpful DOM-based routing script that works off the WordPress body_class
lib/scripts.php has been updated to remove all extra CSS and JS files and also places JavaScript in the footer

Installing Grunt to use with Roots

After you’ve installed grunt globally you’ll need to install the additional Grunt tasks we use. First, clone Roots from your /wp-content/themes/ directory and switch to the Grunt branch:

$ git clone https://github.com/retlehs/roots.git
$ cd roots
$ git checkout grunt

Then install the Grunt tasks (grunt-contrib, grunt-recess) used in the Roots Gruntfile by typing:

$ npm install

Now you’re ready to build. Type grunt to build. Use grunt watch to watch for updates to your LESS and JS files and Grunt will automatically re-build as you write your code.

Thanks to Stephen Jothen for the help creating the task that updates the versions for enqueued CSS and JS.

Roots Theme: One Year Later

Sun, 13 May 2012 00:00:00 -0500

The one year anniversary of the public release of Roots was on 03/28/2012. It was developed and used in-house for a year and 3 months before being released.

At the time of writing, Roots has 1,718 watchers, 319 forks, 36 contributors, and is the 8th most popular PHP project on GitHub.

There’s been 448 issues and 99 pull requests. We’ve pushed 410 commits. We went from having 0 available translated languages to becoming fully WPML compatible with support for 18 different languages.

Project History

Combining the Best

The first step was taking the Starkers bare-bones theme and integrating Blueprint CSS. I needed to use a grid system on each site I was creating and I always had a personal preference of Blueprint over 960.gs.

The next step was adding HTML5 Boilerplate’s markup (when I first started working on Roots, H5BP was actually called frontend-pro-template and maintained by only Paul Irish).

Public Release

On 03/28/2011 I released Roots to the public and emailed a bunch of WordPress bloggers about it. I had zero expectations about the release since there was already a bunch of public starter themes by that point, but my coworkers insisted that Roots was going to “blow up” – I blew off the thought…

Traffic Spikes

Date	Description	Visits
03/29/2011	HTML5 Boilerplate tweeted about Roots	500
04/02/2011	Smashing Magazine sent out a Facebook update about Roots	710
04/03/2011	Smashing Magazine tweeted about Roots	2,047
04/12/2011	Smashing Magazine sent out a newsletter that mentioned Roots	2,602
04/18/2011	Smashing Magazine mentioned Roots in a blog post	2,071
06/13/2011	Mashable mentioned Roots in a blog post	829
09/15/2011	LaFermeDuWeb (French) mentioned Roots in a blog post	888
01/24/2012	Web Resources Depot mentioned Roots in a blog post	1,151
02/08/2012	Smashing Magazine mentioned Roots in a blog post	1,318
03/22/2012	Smashing Magazine mentioned Roots in a blog post	5,000+

Speckyboy’s blog post about Roots has sent over 8,000 visits
Smashing Magazine is responsible for at least 20,000 visits

GitHub Traffic (04/01/2012)

Major Changes

Adding CSS Frameworks

Shortly after the public release, John Liuti submitted a pull request to add 960.gs integration along with Blueprint CSS. Then came the 1140px Grid. Then came Adapt.js & LESS. Then came Bootstrap & Foundation.

Removing CSS Frameworks except Bootstrap

We made the decision in February 2012 to remove all frameworks except for Bootstrap from Twitter since the codebase was becoming a bit ridiculous due to all the different CSS frameworks.

What I’ve Learned

GitHub is really, really, really, really awesome
People hate bugs, are lazy, and almost never troubleshoot
Most bugs come from root relative URLs and installs in subfolders
WordPress has too many bugs in Trac that have been forgotten (even if there’s a working patch) that would help out everybody if they could get pushed through

We’re always fighting against WordPress with the clean URLs & root relative URLs features. There’s also so many different types of installs, from subfolders to different core file locations, to network setups and child themes.

The most stable way to use Roots (with clean URLs & root relative URLs) has always been in the root web directory.

Where We’re Headed

We want to simplify the template files, do further re-organization & add better documentation. We’re also going to re-add better support for Gravity Forms within Bootstrap.

Thanks for all the support!

How to Hide The Fact That You’re Using WordPress

Mon, 07 Nov 2011 00:00:00 -0600

This post contains information on how to clean up WordPress code output. The methods described below do not prevent actual fingerprinting and shouldn’t be looked at as any sort of security measure.

In the Roots Theme we’re taking several steps to help make it not so obvious that you’re using WordPress:

Cleaning up the output of wp_head and removing the generator from RSS feeds
Hiding /wp-content/ by rewriting static theme assets (CSS, JS, images), rewriting the plugins directory, and also changing the location of WordPress uploads
Cleaning up the output of navigation menus with a custom walker
Bonus: root relative URLs

Clean Up wp_head

You’re probably used to viewing the source of your WordPress site and seeing some not-so-pretty code:

<!DOCTYPE html>
<!--[if IE 6]>
<html id="ie6" dir="ltr" lang="en-US">
<![endif]-->
<!--[if IE 7]>
<html id="ie7" dir="ltr" lang="en-US">
<![endif]-->
<!--[if IE 8]>
<html id="ie8" dir="ltr" lang="en-US">
<![endif]-->
<!--[if !(IE 6) | !(IE 7) | !(IE 8)  ]><!-->
<html dir="ltr" lang="en-US">
<!--<![endif]-->
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width" />
<title>Example Site | Just another WordPress site</title>
<link rel="profile" href="http://gmpg.org/xfn/11" />
<link rel="stylesheet" type="text/css" media="all" href="http://example.com/wp-content/themes/twentyeleven/style.css" />
<link rel="pingback" href="http://example.com/xmlrpc.php" />
<!--[if lt IE 9]>
<script src="http://example.com/wp-content/themes/twentyeleven/js/html5.js" type="text/javascript"></script>
<![endif]-->
<link rel="alternate" type="application/rss+xml" title="Example Site » Feed" href="http://example.com/feed/" />
<link rel="alternate" type="application/rss+xml" title="Example Site » Comments Feed" href="http://example.com/comments/feed/" />
<link rel="EditURI" type="application/rsd+xml" title="RSD" href="http://example.com/xmlrpc.php?rsd" />
<link rel="wlwmanifest" type="application/wlwmanifest+xml" href="http://example.com/wp-includes/wlwmanifest.xml" />
<meta name="generator" content="WordPress 3.4.2" />
  <style type="text/css">.recentcomments a{display:inline !important;padding:0 !important;margin:0 !important;}</style>
</head>

WordPress’s tagline is “Code is Poetry” but usually after taking a quick look at the output of the default theme you might think otherwise. It’s probably much worse once you’ve activated some plugins which likely enqueue CSS and scripts all over the place.

If you look at the output of a default Roots theme setup then you’re going to be looking at almost an exact match of HTML5 Boilerplate’s:

<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<head>
  <meta charset="utf-8">
  <title>Example Site</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <script src="/assets/js/vendor/modernizr-2.6.2.min.js"></script>

  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
  <script>window.jQuery || document.write('<script src="/assets/js/vendor/jquery-1.8.2.min.js"><\/script>')</script>

  <link rel="stylesheet" href="/assets/css/bootstrap.css">
  <link rel="stylesheet" href="/assets/css/bootstrap-responsive.css">
  <link rel="stylesheet" href="/assets/css/app.css">
  <script type='text/javascript' src='/assets/js/plugins.js'></script>
  <script type='text/javascript' src='/assets/js/main.js'></script>
  <link rel="canonical" href="http://example.com/">

  <link rel="alternate" type="application/rss+xml" title="Example Site Feed" href="http://example.com/feed/">
</head>

Here’s what we do to clean up wp_head:

Remove Unnecessary Functions

<?php
function roots_head_cleanup() {
  remove_action('wp_head', 'feed_links', 2);
  remove_action('wp_head', 'feed_links_extra', 3);
  remove_action('wp_head', 'rsd_link');
  remove_action('wp_head', 'wlwmanifest_link');
  remove_action('wp_head', 'adjacent_posts_rel_link_wp_head', 10, 0);
  remove_action('wp_head', 'wp_generator');
  remove_action('wp_head', 'wp_shortlink_wp_head', 10, 0);

  global $wp_widget_factory;
  remove_action('wp_head', array($wp_widget_factory->widgets['WP_Widget_Recent_Comments'], 'recent_comments_style'));

  add_filter('use_default_gallery_style', '__return_null');
}
add_action('init', 'roots_head_cleanup');
?>

Hide /wp-content/

Hiding the wp-content directory makes your source code look more elegant. You can setup rewrites for your static theme assets and plugins directory and change the default location of WordPress uploads.

Rewrites

Want to rewrite your static theme assets and the plugins directory? Refer to the latest Roots rewrites.php file for implementation.

WordPress Uploads

Default WordPress settings will have all of your uploads going into /wp-content/uploads/ and also organized by date which can be changed in the admin under Settings > Media.

In Roots we’re using a directory in the root of your WordPress install called /assets/ without the date organization by default.

Navigation Menus

Want to clean up the output of the default WordPress navigation menu? Refer to the latest Roots nav.php file for the cleaner nav walker.

Root Relative URLs

Refer to the latest Roots cleanup.php file for root relative URLs functionality.

Huge thanks to Scott Walkinshaw for contributing many of the code examples above and to all of the other Roots contributors.

Follow Roots development on GitHub

Introducing Roots, a WordPress Starter Theme

Mon, 28 Mar 2011 00:00:00 -0500

Roots is a WordPress starter theme based on HTML5 Boilerplate and Bootstrap with some very unique features. Roots is delete-key friendly just like HTML5 Boilerplate, simply remove anything you don’t need. Roots will allow you to rapidly create websites and blogs.

Visit the Roots Theme site to learn more or head over to Roots on GitHub for an immediate download.