Adding 960 Grid System (960.gs) to Underscores WordPress Theme

The Underscores WordPress Theme (aka “_s”) is a great starter theme for anyone know who knows their way around markup and CSS. However, it doesn’t come with our favorite layout tool, the 960 grid system.

This tutorial shows you how to add 960gs to your WordPress theme in just a few minutes. This is not a tutorial on how to use the 960 grid system, only how to implement it into a WordPress theme. You’ll need at least a copy of WordPress installed (version 3.5.x as of this writing) and a fresh Underscores theme.

Install Underscores

Go to http://underscores.me, generate a theme, and upload it to wp-content/themes.

Copy 960.css file to your theme folder

Download the 960 grid system files from http://960.gs. Extract the files anywhere on your computer.

The only file you need is the minified 960.css file at “core/css/min/960.css“.

Upload 960.css to your themes folder. It should be in the same folder as style.css.

Add 960.css to your theme

Now that it’s in your theme, you have to tell WordPress to use it.

The proper way is to edit your functions.php file and use the “wp_enqueue_style“. This makes it available to caching and minifying plugins like W3 Total Cache.

At approximately line 126 of a fresh Underscores theme’s functions.php, you’ll find “function mytheme_scripts()”. Add a line at the top of the function to include 960.css:

function mytheme_scripts() {
	wp_enqueue_style( 'mytheme-960', get_template_directory_uri() . '/960.css' );
...
}
add_action( 'wp_enqueue_scripts', 'mytheme_scripts' );

“mytheme” should be the name of the theme you generated earlier.

Alternatively, you could include it from your style.css file:

@import url("960.css");

Apply 960 Container classes

Underscores has three 3 main sections in the body. These are where you need to add the container classes. Use your choice of “container_12“, “container_16“, or “container_24” depending on your design.

header.php:

<header id="masthead" class="site-header container_16" role="banner">

<div id="main" class="site-main container_16">

footer.php:

<footer id="colophon" class="site-footer container_16" role="contentinfo">

What you should see at this point is all of your content in a 960px box, centered on the page.

Apply Grid Classes

Every WordPress theme will be different. I suggest applying classes on at least the following:

header.php

First children of the <header> tag, such as <hgroup> and <nav>

All instances of <div id=”primary”>

1. index.php
2. 404.php
3. image.php
4. index.php
5. page.php
6. single.php

sidebar.php

<div id=”secondary” role=”complementary”>

footer.php

First children of <footer> tag, such as <div class=”site-info”>