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

Posted

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“.

Note If you’re really trying to save space, you can upload just the minified versions of the columns structure you need (960_12_col.css, 960_16_col.css, or 960_24_col.css). However, 960.css contains all 3 versions, so that will cover nearly all use cases.

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”>

This tutorial was written specifically for Underscores due to the popularity of the theme. The same general procedure can be applied to any existing WordPress theme. The key strategies are adding the 960.css file, including it in the theme, and applying “container_” and “grid_” classes to key layout elements.

About The Author:

Thai Yin is a founder and partner at Gaslamp Media, a web and print design firm based in San Diego, CA. He writes regularly on Drupal, Wordpress, and design. You can find him online at Google+, Twitter, and Facebook.

11 Responses to “Adding 960 Grid System (960.gs) to Underscores WordPress Theme”

  1. Tina

    Thank you for this guide. I love 960 grid but I was struggling to integrate it with Underscores.

    Reply
  2. realloc

    Thanks for the post. BTW The file seems to be in code/css/min/960.css.

    Reply
  3. haluk

    Can the same instructions be applied for including twitter bootstrap ( both the .js and .css parts ). Or would working with twitter bootstrap be totally wrong as it would defeat the purpose of using _s at the first place?

    Reply
    • Thai Yin

      Yes, you could use the same process to load Bootstrap or any other js/css kit. However, if you’re going to use Bootstrap you should consider the Roots theme.

      Reply
  4. Cleaning Up the Cruft * | AI3:::Adaptive Information

    […] three-column design of my predecessor. Underscores supports a variety of layouts, and may also be integrated with even more flexible grid systems, something I did not do.) The development of template extensions requires a good understanding of […]

    Reply
  5. Mike

    Thanks for this helpful guide. BTW, I think the line [code][/code] should be prededed by [b]index.php:[/b]

    Reply
    • Mike

      EDIT (since my comment has cited html tags stripped): Thanks for this helpful guide. BTW, I think the line should be prededed by index.php:

      Reply
      • Mike

        EDIT #2 (html tags were stripped again): Thanks for this helpful guide. BTW, I think the line div id=main class=site-main container_16 should be preceded by index.php:

        Reply
  6. Victor

    This part “” In this tutorial was confusing since with the current version of _s it was no where near the header.php file. But what I did do was change “” all the way at the bottom of the page it seemed like it worked, if something is wrong with this please reply I want to know if it is an issue.

    Reply
  7. online bookmarking

    Appreciate another beneficial web site. The site different may well I am getting that sort of info printed in such an ideal technique? I own a task that we are merely at this point operating about, and i have experienced the looks available with regard to similarly info.

    Reply

Leave a Reply