How to Design a Wordpress Theme With a Grid

Designing a Wordpress theme requires some HTML knowledge.

Many Wordpress themes use a standard format, with a long horizontal header at the top, and beneath it a content area with one or more sidebars. However, this does not have to be the case and Wordpress templates can take any shape or size. Why not use a grid theme to add variety to your site and set it apart from the rest? Each section of the grid can be home to a different feature of the site, organized using HTML and CSS code.

Instructions

1. Go to starkerstheme.com and download the .zip file. When the download is complete, extract the file to your computer. This is a blank "Developer" theme that you can use to design your own themes.

2. Open "style.css" and add the following code on a new line:

   #gridrow { display:block;width:100% }

   #gridcell {width: 33%;float:left;border:solid 1px;}

3. Copy and paste the code below into the "404.php," "archive.php," "category.php," "index.php," "search.php," "single.php," "tag.php," and "page.php" files, just below the "get_header(); ?>" line:

   <div id="gridrow">

   <div id="gridcell">row 1 cell 1</div>

   <div id="gridcell">row 1 cell 2</div>

   <div id="gridcell">row 1 cell 3</div>

   </div>

   <div id="gridrow">

   <div id="gridcell">row 2 cell 1</div>

   <div id="gridcell">row 2 cell 2</div>

   <div id="gridcell">row 2 cell 3</div>

   </div>

   <div id="gridrow">

   <div id="gridcell">row 3 cell 1</div>

   <div id="gridcell">row 3 cell 2</div>

   <div id="gridcell">row 3 cell 3</div>

   </div>

   This creates a three-by-three grid layout, with each cell labeled so you can find it easily in the code. Save these files but keep them open.

4. Replace the cell labels with the information you want in each cell. For instance, you might want your website logo at the top left, some navigation buttons in the top middle, and your copyright information on the bottom row.

5. Place the main content of the blog in the grid cell you want. To accomplish this, replace the cell label with the "loop" inside each of the files you have open. The loop is everything between and including the line starting with "<?php if ( have_posts()" and ending with "<?php endwhile;". Save all files when done.

6. Add any other styling you want by adding CSS code to the "style.css" file. You can also change the size of the grid cells by altering the "height" and "width" attributes of the "#gridcell" line.

Tips & Warnings

• If you increase the border size of the cells or add padding, they will no longer fit on the screen horizontally. To fix this, reduce the "width" of the "#gridcell" line in "style.css" by 1 percent. If the problem remains, reduce by another 1 percent and repeat until the grid displays correctly.

References

• Starkers: The Completely Naked Theme for WordPress

Resources

• W3 Schools: CSS Tutorial