Recently I published two minimalist, grid-based WordPress themes called Miniml Press – typographically based and organized into three columns – and The Daily Grind which is based on a basic newspaper layout (like the paper version of the New York Times), emphasizing typography, and attempting to display range and variety of grid layout within a WordPress environment. Both of these themes utilize Elliot Jay Stock’s Starkers wordpress theme and also integrate Vladmir Carrer’s excellent grid framework The Golden Grid.
There are many blank themes, but I have found Starkers to be most intuitive, basic and clean – and therefore easiest to comprehend. There aren’t an overwhelming number of files – and with little effort you can integrate whatever layout you heart desires.
Recently, I have had several requests to talk about how I integrated a grid layout within a WordPress environment. Believe me when I say: If I can do it, anyone can do it. I have researched many grid frameworks. Many of these frameworks, including Sandbox & 960 Grid System, are robust and powerful options – but if you’re relatively new to grid design and you’re looking for an intuitive framework that doesn’t blow your mind with too many options (and yet is still full of possibility) – I would recommend Vladmir Carrer’s The Golden Grid.
Vladmir’s blog discusses his desire to achieve a "perfect" layout. His grid is a default width of 970px or 10px + 960px. The best thing about this grid is how easy it is to implement. The columns are broken down into a variety of widths, which float left, displayed inline, and has a 10px margin for nice spacing.
An example of the css file looks like this:
.g160,<br />
.g320,<br />
.g480,<br />
.g640,<br />
.g800,<br />
.g960,<br />
.g80,<br />
.g240,<br />
.g400,<br />
.g560,<br />
.g720,<br />
.g880,<br />
.g960<br />
{float:left; display: inline; margin-left:10px; }
"g" stands for Golden. The width of .g160 is 150px with a 10px left-margin. It’s pretty much that simple. The main wrapper has a 0 margin with a width of 970px with top padding of 10px. With this layout you can construct a perfect grid.
For the Miniml Press theme, I used three columns: .g240, .g240, and .g480. Pretty easy. Add those up and you get – 960px. I’m not great a math, but I can add that without much trouble. I put the right column or g480 within the loop. The code looks like this:
<div class="g480" id="loop">
<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>
<?php get_the_image(array(‘custom_key’ => array(‘feature_img’), ‘default_size’ => ‘medium’, ‘width’ => ‘470’, ‘height’ => ‘150’, ‘image_class’ => ‘feature’)); ?>
<div class="post" id="loop">
<h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a><span style="float:right;"><?php comments_popup_link(‘No Comments »’, ‘1 Comment »’, ‘% Comments »’); ?></span></h2>
<p id="time"><?php the_time(‘F jS, Y’) ?> <!– by <?php the_author() ?> –></span>
<p><?php the_excerpt_reloaded(125); ?></p>
<p><?php the_tags(‘Tags: ‘, ‘, ‘, ‘<br />’); ?>posted in <?php the_category(‘, ‘) ?></p>
</div><!– end while loop –>
<?php endwhile; ?>
<div class="clear" style="height:0px;"> </div>
Of course, after each row that equals 960px you have to clear it. I chose to limit the height of this clear class to 0px. Everything is nice and tidy. Simple, really.
In order to make sure the entire grid is within the The Golden Grid layout you have to make sure the .main class wraps around the entire layout. Simply add the <div class="main"> in the header like this:
</head>
<div class="main">
<div class="g480" style="margin-left:0;"><h1 style="padding-left:0;"><a href="<?php echo get_option(‘home’); ?>/"><?php bloginfo(‘name’); ?></a></h1>
</div>
<div class="g480">
<h1 style="float:right;">
<img src="http://s51370.gridserver.com/_minimalwordpress/i/twitter.jpg"><?php aktt_latest_tweet(); ?></h1> </div>
<div class="clear" style="height:80px;"> </div>
Again I use .g480 and .g480 to create the header section, then clear it with the clear class, except this time I use a 80px height value to grant more whitespace (which I love).
The Daily Grind theme is slightly more involved, but no more difficult to integrate The Golden Grid.
I set up the header section exactly the same, except a little more involved in the sense that the header section implements a variety of columns. Here’s a section:
<div class="main">
<div class="g160"><img src="http://s51370.gridserver.com/wordpress/i/grindoflife.png"></div>
<div class="g640" style="text-align:center;"><a href="<?php echo get_option(‘home’); ?>/"><img src="http://s51370.gridserver.com/wordpress/i/dg.png"></a></div>
<div class="g160" style="">
<h1 style="font-size:12px; text-align:center;">National Edition</h1>
<h2 style="font-size:10px; color:#777">Colorado: Mostly sunny, warmer. Highs in the 80’s but cooler in the mountains. Warming trend will continue tomorrow, highs 90-95 in many places.</h2>
</div>
<div class="clear" style="height:8px;"> </div>
Pretty much the same principles. Put everything within a g*** column, make sure the columns add up to the width of the .main class (960px) and clear it. You have an unlimited number of possibilities to display your design.
Really, the whole purpose of this theme was to see how creative I could be using this grid layout. I simply used categories to display the content, instead of using the loop. By creating a variety of categories, you can display specific content anywhere on the page. I got this idea from the very nice wordpress Upstart Blogger Futurosity Magazine theme, which you can find here.
When it’s all said and done, it’s not particularly complicated. The Golden Grid has a vast array of uses – the only real limit is your imagination.
Hope this was useful!
justin
from siiimple.com