There are lots of good frameworks upon which to build child themes, but perhaps one of the simplest is Thematic. I’ve used it several times, and have found it to have the features that I needed and be very straightforward to modify.

One of the nicest features is that it comes with several different canned layouts. There are two two-column layouts and three three-column layouts. For my most recent project, however, I needed a four-column layout for the home page. Not to worry, Thematic can do it. Below, I’ll show you how.

Step 1. Install the Thematic theme.  This is relatively simple. Just download it from the WP repository.

Step 2. Create the child theme. In the thematic folder, look for the directory named “thematicsamplechildtheme”. Copy that directory to /wp-content/themes folder and rename it. I renamed mine “4-col-child-theme”. Activate the child theme.

Step 3. Choose a layout. Go to /wp-content/themes/thematic/library/layouts and choose one of the layout stylesheets there. I chose the 3c-fixed.css layout to base my four-column layout on. I copied that file to your child theme folder and changed the filename to “4c-fixed.css”.

 Step 4. Apply that layout. To apply that layout, you have to edit your style.css file. Open it and look for the lines:

/* Apply a basic layout */
@import url('library/layouts/2c-r-fixed.css');

Change the second line to:

@import url('library/layouts/4c-fixed.css');

 Once you have completed these steps, your home page should look something like this:

Step 5. The next step is to modify the layout stylesheet. The first thing I did was to delete the widgets in the left (primary) and right (secondary) sidebars to 180px. Then, I reduced the width of the primary and secondary asides to 180px. I then reduced the left margin of the content div to 200px and added a width specification of 250px. After doing this, my layout looked like this:

Step 6. The next step is to create a division for the second content column. I copied the specification for #content, and created #content2. Instead of a margin-left of 200px, I gave #content2 a margin-left of 20px and then made both #content and #content2 float:left. Here’s what the code for these two divisions now looks like:

#content {
margin: 0 0 0 200px;
width:250px;
float:left;
overflow:hidden;
}
#content2 {
margin: 0 0 0 20px;
width:250px;
float:left;
overflow:hidden;
}

Step 7. The last step is to create the home page template. To create this template, I started with the page template. I copied /wp-content/themes/thematic/page.php to /wp-content/themes/4-col-child-theme/front-page.php.

Then, I stripped out all of the code for displaying page content and added some content for the two content columns. Here’s what the code looks like:

<?php

    // calling the header.php
    get_header();

    // action hook for placing content above #container
    thematic_abovecontainer();

?>

		<div id="container">
		
			<?php 
				thematic_abovecontent();
				echo apply_filters( 'thematic_open_id_content', '<div id="content">' . "\n" );
	        ?>
			<p>This is the first column of content.</p>
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas nibh lectus, tempor et semper eget, euismod in erat. Duis pulvinar, odio at consequat laoreet, purus mauris congue magna, at rhoncus eros libero ut tellus. Vivamus faucibus feugiat nibh eu egestas. Suspendisse porttitor sem vitae magna ullamcorper gravida. Sed ac lacus sem, in condimentum eros. Suspendisse mollis felis vitae diam sodales sit amet scelerisque ante rutrum. Phasellus nulla sapien, viverra ac aliquam ut, porta a urna. Sed pulvinar, urna eget accumsan auctor, nulla tellus placerat tellus, at euismod turpis eros feugiat nunc. Duis risus nunc, tincidunt eget adipiscing at, rutrum quis sapien. Quisque imperdiet tempor tortor id imperdiet. Nam dignissim nulla libero, ac tincidunt felis.</p>
			</div><!-- #content -->
			<?php 
				thematic_abovecontent();
				echo apply_filters( 'thematic_open_id_content', '<div id="content2">' . "\n" );
	        ?>
			<p>This is the second column of content.</p>
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas nibh lectus, tempor et semper eget, euismod in erat. Duis pulvinar, odio at consequat laoreet, purus mauris congue magna, at rhoncus eros libero ut tellus. Vivamus faucibus feugiat nibh eu egestas. Suspendisse porttitor sem vitae magna ullamcorper gravida. Sed ac lacus sem, in condimentum eros. Suspendisse mollis felis vitae diam sodales sit amet scelerisque ante rutrum. Phasellus nulla sapien, viverra ac aliquam ut, porta a urna. Sed pulvinar, urna eget accumsan auctor, nulla tellus placerat tellus, at euismod turpis eros feugiat nunc. Duis risus nunc, tincidunt eget adipiscing at, rutrum quis sapien. Quisque imperdiet tempor tortor id imperdiet. Nam dignissim nulla libero, ac tincidunt felis.</p>
			</div><!-- #content -->
			
		</div><!-- #container -->

<?php 

    // action hook for placing content below #container
    thematic_belowcontainer();

    // calling the standard sidebar 
    thematic_sidebar();
    
    // calling footer.php
    get_footer();
?>

And, here’s what the page looks like:

For the actual site, I’m going to replace the static HTML with some PHP code to grab some data from a database and post it here. You could do something similar, using WordPress functions to display WordPress content in one column and perhaps some static HTML or some other dynamic data in the second column.

Have fun!