Ben Word

Roots Theme: One Year Later

Ben Word — Sun, 13 May 2012 22:01:03 +0000

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. There’s been 10,644 tweets mentioning the Roots website.

We went from having 0 available translated languages to becoming fully WPML compatible with support for 18 different languages.

Project History

I moved from Dallas, TX to Northern Colorado at the end of 2009 and started a job at a place that is basically a website factory, creating mainly brochure and small-business websites built on WordPress.

I was the third employee and was thrown into a job where they wanted me building sites by modifying WooThemes templates. If you’ve ever used a WooThemes template you’d understand that it’s a huge pain in the ass for a developer to work with. I had worked with WordPress and created WordPress themes in the past and knew that we needed a better work process.

I quickly began maintaining my own starting theme since I was tired of having to re-do the same things each time I started working on a new website (before I left the website factory I was usually creating 3 new themes a day).

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 starting themes by that point, but my coworkers insisted that Roots was going to “blow up” – I blew off the thought…

Traffic Spikes

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

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

Roots helped me get a new day-job only two weeks after releasing it
GitHub is really, really, really, really awesome
People hate bugs
People 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 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!

Watch and contribute to Roots on GitHub

Purchase a support block for Roots Theme

How to Hide The Fact That You’re Using WordPress

Ben Word — Mon, 07 Nov 2011 15:00:17 +0000

Updated on May 13th, 2012

In the Roots Theme we’re taking several steps to ensure that a visitor to your website won’t know 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, and 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

Cleaning up the output of wp_head

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











Home | Example | Just another WordPress site

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:





  

  

  Example Site

Here’s what we do to clean up wp_head:

Remove all unnecessary functions

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', 'index_rel_link');
remove_action('wp_head', 'parent_post_rel_link', 10, 0);
remove_action('wp_head', 'start_post_rel_link', 10, 0);
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);

Remove unnecessary CSS

// remove CSS from recent comments widget
function roots_remove_recent_comments_style() {
  global $wp_widget_factory;
  if (isset($wp_widget_factory->widgets['WP_Widget_Recent_Comments'])) {
    remove_action('wp_head', array($wp_widget_factory->widgets['WP_Widget_Recent_Comments'], 'recent_comments_style'));
  }
}

add_action('wp_head', 'roots_remove_recent_comments_style', 1);

// remove CSS from gallery
function roots_gallery_style($css) {
  return preg_replace("!!s", '', $css);
}

add_filter('gallery_style', 'roots_gallery_style');

Hide /wp-content/

Rewrite static theme assets and plugins directory

// rewrite /wp-content/themes/theme-name/css/ to /css/
// rewrite /wp-content/themes/theme-name/js/  to /js/
// rewrite /wp-content/themes/theme-name/img/ to /img/
// rewrite /wp-content/plugins/ to /plugins/

function roots_flush_rewrites() {
  global $wp_rewrite;
  $wp_rewrite->flush_rules();
}

function roots_add_rewrites($content) {
  $theme_name = next(explode('/themes/', get_stylesheet_directory()));
  global $wp_rewrite;
  $roots_new_non_wp_rules = array(
    'css/(.*)'      => 'wp-content/themes/'. $theme_name . '/css/$1',
    'js/(.*)'       => 'wp-content/themes/'. $theme_name . '/js/$1',
    'img/(.*)'      => 'wp-content/themes/'. $theme_name . '/img/$1',
    'plugins/(.*)'  => 'wp-content/plugins/$1'
  );
  $wp_rewrite->non_wp_rules += $roots_new_non_wp_rules;
}

add_action('admin_init', 'roots_flush_rewrites');

function roots_clean_assets($content) {
    $theme_name = next(explode('/themes/', $content));
    $current_path = '/wp-content/themes/' . $theme_name;
    $new_path = '';
    $content = str_replace($current_path, $new_path, $content);
    return $content;
}

function roots_clean_plugins($content) {
    $current_path = '/wp-content/plugins';
    $new_path = '/plugins';
    $content = str_replace($current_path, $new_path, $content);
    return $content;
}

add_action('generate_rewrite_rules', 'roots_add_rewrites');
if (!is_admin()) {
  add_filter('plugins_url', 'roots_clean_plugins');
  add_filter('bloginfo', 'roots_clean_assets');
  add_filter('stylesheet_directory_uri', 'roots_clean_assets');
  add_filter('template_directory_uri', 'roots_clean_assets');
  add_filter('script_loader_src', 'roots_clean_plugins');
  add_filter('style_loader_src', 'roots_clean_plugins');
}

Change location of 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 the Roots theme we’re using a directory in the root of your WordPress install called /assets/ without the date organization by default.

Cleaning up the output of navigation menus

Here’s the clean walker from Roots:

class Roots_Nav_Walker extends Walker_Nav_Menu {
  function check_current($val) {
    return preg_match('/(current-)/', $val);
  }

  function start_el(&$output, $item, $depth, $args) {
    global $wp_query;
    $indent = ($depth) ? str_repeat("\t", $depth) : '';

    $slug = sanitize_title($item->title);
    $id = apply_filters('nav_menu_item_id', 'menu-' . $slug, $item, $args);
    $id = strlen($id) ? '' . esc_attr( $id ) . '' : '';

    $class_names = $value = '';
    $classes = empty($item->classes) ? array() : (array) $item->classes;

    $classes = array_filter($classes, array(&$this, 'check_current'));

    $custom_classes = get_post_meta($item->ID, '_menu_item_classes', true);
    foreach ($custom_classes as $custom_class) {
      $classes[] = $custom_class;
    }

    $class_names = join(' ', apply_filters('nav_menu_css_class', array_filter($classes), $item, $args));
    $class_names = $class_names ? ' class="' . $id . ' ' . esc_attr($class_names) . '"' : ' class="' . $id . '"';

    $output .= $indent . '
';

    $attributes  = ! empty($item->attr_title) ? ' title="'  . esc_attr($item->attr_title) .'"' : '';
    $attributes .= ! empty($item->target)     ? ' target="' . esc_attr($item->target    ) .'"' : '';
    $attributes .= ! empty($item->xfn)        ? ' rel="'    . esc_attr($item->xfn       ) .'"' : '';
    $attributes .= ! empty($item->url)        ? ' href="'   . esc_attr($item->url       ) .'"' : '';

    $item_output = $args->before;
    $item_output .= '';
    $item_output .= $args->link_before . apply_filters('the_title', $item->title, $item->ID) . $args->link_after;
    $item_output .= '';
    $item_output .= $args->after;

    $output .= apply_filters('walker_nav_menu_start_el', $item_output, $item, $depth, $args);
  }
}

To use the custom walker you’ll need to modify the call to your menu in your theme files:

 'primary_navigation', 'walker' => new roots_nav_walker())); ?>

Now the output of your navigation menus will look like:


  
    Home
    Sample Page

Root relative URLs in WordPress

After implementing the code below into your theme you’ll notice that instead of seeing http://example.com/ all over the place you’ll see mostly just /.

function roots_root_relative_url($input) {
  $output = preg_replace_callback(
    '!(https?://[^/|"]+)([^"]+)?!',
    create_function(
      '$matches',
      // if full URL is site_url, return a slash for relative root
      'if (isset($matches[0]) && $matches[0] === site_url()) { return "/";' .
      // if domain is equal to site_url, then make URL relative
      '} elseif (isset($matches[0]) && strpos($matches[0], site_url()) !== false) { return $matches[2];' .
      // if domain is not equal to site_url, do not make external link relative
      '} else { return $matches[0]; };'
    ),
    $input
  );
  return $output;
}

// workaround to remove the duplicate subfolder in the src of JS/CSS tags
// example: /subfolder/subfolder/css/style.css
function roots_fix_duplicate_subfolder_urls($input) {
  $output = roots_root_relative_url($input);
  preg_match_all('!([^/]+)/([^/]+)!', $output, $matches);
  if (isset($matches[1]) && isset($matches[2])) {
    if ($matches[1][0] === $matches[2][0]) {
      $output = substr($output, strlen($matches[1][0]) + 1);
    }
  }
  return $output;
}

if (!is_admin() && !in_array($GLOBALS['pagenow'], array('wp-login.php', 'wp-register.php'))) {
  add_filter('bloginfo_url', 'roots_root_relative_url');
  add_filter('theme_root_uri', 'roots_root_relative_url');
  add_filter('stylesheet_directory_uri', 'roots_root_relative_url');
  add_filter('template_directory_uri', 'roots_root_relative_url');
  add_filter('script_loader_src', 'roots_fix_duplicate_subfolder_urls');
  add_filter('style_loader_src', 'roots_fix_duplicate_subfolder_urls');
  add_filter('plugins_url', 'roots_root_relative_url');
  add_filter('the_permalink', 'roots_root_relative_url');
  add_filter('wp_list_pages', 'roots_root_relative_url');
  add_filter('wp_list_categories', 'roots_root_relative_url');
  add_filter('wp_nav_menu', 'roots_root_relative_url');
  add_filter('the_content_more_link', 'roots_root_relative_url');
  add_filter('the_tags', 'roots_root_relative_url');
  add_filter('get_pagenum_link', 'roots_root_relative_url');
  add_filter('get_comment_link', 'roots_root_relative_url');
  add_filter('month_link', 'roots_root_relative_url');
  add_filter('day_link', 'roots_root_relative_url');
  add_filter('year_link', 'roots_root_relative_url');
  add_filter('tag_link', 'roots_root_relative_url');
  add_filter('the_author_posts_link', 'roots_root_relative_url');
}

// remove root relative URLs on any attachments in the feed
function roots_root_relative_attachment_urls() {
  $roots_options = roots_get_theme_options();
  if (!is_feed() && $roots_options['root_relative_urls']) {
    add_filter('wp_get_attachment_url', 'roots_root_relative_url');
    add_filter('wp_get_attachment_link', 'roots_root_relative_url');
  }
}

add_action('pre_get_posts', 'roots_root_relative_attachment_urls');

Thanks

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

Watch and contribute to Roots on GitHub

Introducing Roots, a WordPress starting theme

Ben Word — Tue, 29 Mar 2011 01:02:16 +0000

Roots is a starting theme based on HTML5 Boilerplate, Blueprint CSS and Starkers 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 brochure sites and blogs.

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

add_editor_style not working?

Ben Word — Sat, 19 Mar 2011 00:12:26 +0000

add_editor_style tells WordPress to let you use editor-style.css in your theme directory to control the styling of TinyMCE’s editor. You can run into a problem where you’ll be updating editor-style.css but you don’t see any of the changes while refreshing the editor page. This is because of the way browsers cache TinyMCE’s content_css.

Here’s a quick fix for your functions.php:

    // add time() to the end of editor-style.css so that you'll always see the latest version
    add_editor_style('editor-style.css?' . time());