Thesis Tip #3 – Multiple content areas

(This tutorial is specifically for the Thesis theme, but can be adapted to work with any Wordpress theme).

Wordpress works great if you want to display a title and then a block of content, but if you’re using it as a CMS you’ll often be faced with the problem of multiple content areas. You might need multiple boxes on a homepage, or 3 columns of text on an inner page.

There’s many ways to go about this. Some of them include:

• Including <div>’s in your post content. This will work well for a developer like me who understands code, but for clients it is not usually a good option. They will typically work in the Visual mode, and can easily delete or break the<div>’s, then not know how to add them back in HTML mode.
• Using sidebars and widgets to display content. This is good for one-off things like sidebars (same across the site) or boxes on a homepage (only used once), but it doesn’t scale well – you don’t want 20 different sidebars for different areas of your site. It also disconnects the content from the page. It’s nice to have all the content that will appear on a page editable in the same place. (This goes back to my principle of making client’s sites easy to use and hard to break).

For a project I’m working on now we needed two or three columns of content on every page (here’s an example on the client’s site). All the blocks of content are unique to that page. This solution was heavily inspired by a post at kriesi.at, but I’ve modified it with the help of Chris Bratlien to make as many content areas as you like (the code from that post only creates a left column and a right column).

The Content

When you’re writing your content in Wordpress, simply break up the content sections using an <h4> heading. I chose <h4> because it’s easily accessible from the menu bar. Select the text you want as your heading, click on the last icon in the menu( )  then click where it says Paragraph and go down to Heading 4. You could change this to whatever heading you’d like; I chose Heading 4 because I seem to only use <h1>, <h2> and <h3>.

The Code

In your Custom Functions file, paste the following code:

function multi_content($content){
$columns = explode('<h4>', $content);
$i = 0;
foreach ($columns as $column){
if (($i % 2) == 0){
$return .= "<div class=\"column\" id=\"content-$i\">" . "\n";
if ($i > 1){
$return .= "<h4>";
}
} else{
$return .= "<div class=\"column\" id=\"content-$i\">" . "\n <h4>";
}
$return .= $column;
$return .= '</div>';
$i++;
}
if(isset($columns[1])){
$content = wpautop($return);
}else{
$content = wpautop($content);
}
return $content;
}
add_filter('the_content', 'multi_content');


Here’s what that is doing:

• $columns = explode('<h4>', $content); Break up the content into separate blocks every time you find an <h4>.
• $i = 0; Make a counter (called i) and start at 0.
• foreach ($columns as $column){ For every block of content…
• if (($i % 2) == 0){ If i is an even number (0, 2,4…) …
• $return .= "<div class=\"column\" id=\"content-$i\">" . "\n"; Add a div with the class of “column” and the id of “content-[i]“, so content-0, content-2…
• if ($i > 1){$return .= "<h4>";} If this is any block of content except the first, add back the <h4> (our first block of content was everything before the first <h4>, so we don’t want to add an additional one)
• } else{ $return .= "<div class=\"column\" id=\"content-$i\">" . "\n <h4>";} If i is an odd number (1,3,5…), add a div with the class of “column” and the id of “content-[i]” and an <h4>.
• $return .= $column; $return .= '</div>'; $i++;} Add the block of content and close the div at the end. Then move the counter up one and start again.
• if(isset($columns[1])){ $content = wpautop($return); If there’s only one block of content (no <h4>’s were used), ignore everything we did and just show the content.
• }else{ $content = wpautop($content); } return $content; } If there was more than one block of content, replace the default Wordpress content with the div’s and content we just did.
• add_filter('the_content', 'multi_content'); Run this filter every time Wordpress wants to see the content of a post or page.

You’ll then need to add the appropriate css to make it behave as you like. If you want to apply css to all the columns, use the class “column.” If you want to add css to individual columns, use their id’s. Here’s an example:


.column {float: left;}
#content-0 {width: 400px;}
#content-1 {width: 300px;}

I hope that helps some of you. I know I will be using it a lot for client websites.

Tagged as: thesis, thesis-tip, tutorial, wordpress

• Thesis Tip #11 – Clickable Logo in Header
• Thesis Tip #10 – Filter Categories from Homepage
• Thesis Tip #9 – Custom Options Page
• Thesis Tip #8 – Change Next and Previous Post Text
• Thesis Tip #7 – Import and Export Your Design
• Thesis Tip #6 – Print Stylesheets
• Thesis Tip #5 – Featured Content Rotator
• Thesis Tip #4 – Adding Classes to Body
• Thesis Tip #3 – Multiple content areas
• Thesis Tip #2 – Additional Sidebars

Bill Erickson is a WordPress Consultant who builds custom websites using WordPress as a CMS and Thesis as a framework. He’s a cofounder and resident of The Creative Space, and a cofounder of the BIL Conference (the open analog to the TED Conference).