Wordpress Templates mit Underscores erstellen

2014-01

http://underscores.me/

http://notebook.gaslampmedia.com/adding-960-grid-system-960-gs-to-underscores-wordpress-theme/ (2014-01)

• Dort ein Template generieren
• 960gs hinzufügen:

Auszug aus gaslampmedia.com Tutorial

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

    index.php
    404.php
    image.php
    index.php
    page.php
    single.php

sidebar.php

footer.php

First children of <footer> tag, such as

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.