Adding 960 Grid System ( 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, 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 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 id="masthead" class="site-header container_16" role="banner">
<div id="main" class="site-main container_16">


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


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


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


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.

12 replies on “Adding 960 Grid System ( to Underscores WordPress Theme”

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?

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.

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.

Hi _S users,

I am a developer and I have created a set of styles inside style.css . These styles can make your WordPress theme look better and almost ready to run the WordPress site.

This is just style and no other things are touched. You just need to add styles to your new _S wordPress theme,

Please check

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.