Multiple Content Areas

This post has been marked as old. The code might no longer work. Comments have been disabled as this is no longer maintained. Use the search on the right to find a newer tutorial.

I’m closing the comments on this as it’s a very old technique that I no longer use or recommend. A much better option is to use Column Classes in your CSS file, then use the Div Shortcode Plugin to make it easy to create columns in your pages.

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 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).
  • Using a shortcode to break content up into multiple columns. Ex: [column id="1"] text in column 1 [/column] [column id="2"] text in column 2[/column]. I think this is a great solution, but the solution outlined below is a little easier for  non-technical people to use.
  • Adding an additional WYSIWYG meta box to the page editor for the second column. Again, this is a good solution but I believe the one outlined below is easier. The solution below also allows you to determine the number of columns on a per-page basis rather than a per-site basis like a meta box.

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 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 for this project we only used <h1>, <h2> and <h3>.

The Code

In your functions.php file (custom_functions.php file for Thesis), paste the following code:

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

chat50 Comments

  1. Steve says

    Bill,
    This is a brilliant idea. I have tried it on a simple test site, (not using the thesis framework) just a barebones theme and have two Queries.

    This might be my initial example, it seems to an extra blank div "content-0" before the working divs of class "content-1" "content-2".

    The h4 heading appears in the div for me at the top working divs of "content-1" and "content-2", I would want the seperator h4 or whatever tag to clearly identify the sections on the input page, but not to display the h4 header text in the actual content divs on the output of the page. Is this possible? New to WP please be gentle with me.

    Steve

  2. Laura says

    Thanks Bill,
    Beautiful solution! It is just what I was looking for.

    With this, I had my pages all laid out in an hour! Yeah for WordPress, Thesis, CSS and Bill Erickson!

  3. says

    Yes, this will allow you to do that. The code simply wraps your content in divs, so if you're content looked like this:

    lorem ipsum dolor sit amet

    <h4>Column title</h4>
    lorem ipsum dolor sit amet

    It would change it to:

    <div class=\”content\” id=\”content-0\”>
    lorem ipsum dolor sit amet
    </div>

    <div class=\”content\” id=\”content-1\”>
    <h4>Column title</h4>
    lorem ipsum dolor sit amet
    </div>

    You could then use CSS to do whatever you want with those two divs

  4. says

    Hello,

    I really like the post. The idea is simple enough and I was able to modify the functions page. I see the purpose of the H4 tag so you can use the editor, however doesn't this hurt results for search engines if you spam the h tags and I thought you are supposed to only put normal content inside h tags for best practices. So I did the div way, but thaat defeats the whole idea to make it easier for the client. I am at a lost because I have check out every option to make editble content areas on one page. A plug in that would allow you to add a div box specify the size and add css values would be the missing link for me. Any ideas?

  5. Amit Kumar Jha says

    I am new to the wordpress. I just pasted the above-mentioned code in the custom-functions.php file. I entered the following content into the wordpress text editor in page section. lorem ipsum dolor sit amet

    <h4>Column title</h4>
    lorem ipsum dolor sit amet

    But it did not yield any changes. I am completely new to the wordpress. So I am quite confused.Please help me. Thanks in advance.

  6. says

    My guess is that it's creating the div's but you haven't provided any styling to those div's. Add this to the custom.css:

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

  7. says

    Great idea. As a designer, multiple columns in the content area has always been my biggest challenge with WordPress. I've been working on a mulit-column css framework for the content area in Thesis. I'll have to show you when it's done.

  8. says

    this looks really promising. I am currently working for a client, who wants 3 columns on all of his pages, so this might be the solution to that. gonna try it out immediately! great work.

    • says

      If you're asking if this allows you to have a three-column blog post, then yes. If you're asking if this solution allows you to have three columns across which blog posts appear (different posts in each column), then no. For the latter, you'll need to create a custom page template.

  9. says

    Bill,
    Thanks so much for this! This is a KILLER way to break up content on a page quickly and easily. I have a question…I am making a landing page for a client and I am using your methodology and it looks great in chrome, safari and firefox..but son of a gun if it doesn't look weird in IE–am I missing something?? Here is a link to the page: http://specialoffers.stopsnoringbrez.com/

    Any help you could give me would be appreciated. Take care

    • Dee says

      Here is the link http://www.compitenthosting.com
      BTW I tried with just 2 <h4> content topics thinking the code you gave would just work with 2 columns but still it only shows 1 column in the diaplay. Please take a look and let me know how to get 3 colums showing . Thanks for your help.

  10. Dee says

    I tried what you recommended and its sort of works. BTW I added a fourth block using a <h4> tag since the 3 colums didnt look so good. besides a 2x2colum display would give a better balance to the page.
    Here is what I have in the custom.css as recommended.

    /* Added for custom content layout on front page */
    .custom .column {width: 300px; float: left;}
    .custom .format_text {clear:both;}

    It doesnt all look well. Could you please take a look at it and guide me what to do.
    Also where do I go make the changes within theseis so that the <h3> tags look similar to <h4> tags.

    I was reading your other posts and came across this bit of code:

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

    which I has earlier put in the custom.css.

    Shouldnt i be putting something that just gets this for the index page to look etc Since I do not want <h4> tags across the whole site to be effected.

    Look forward to your reply and Thanks a Ton for helping out. Cheers!

  11. Dee says

    Great!… Worked out swell. Now its looking good. Thanks a bunch for the help and showing me how its done. Been seeing some of your sites that you done line Harvest Eating and other … great job. BTW I do get your point about 4 columns being a booboo. Sorry maybe I was'nt able to express myself clearly, but luckily you got what i meant exactly… the way it is now.

    Just for my knowledge should I need to do one with a 3 column anytime what should be changed in the code thats now working – Or will it work right off the bat.

    Once again thanks for your help and time and I look forward to you educating me about the 3 column issue I just mentioned.

    Have a Fantastic Day, Cheers!

  12. says

    Thanks Bill, I will test this out. I have been experimenting with different plugins to get this "multiple block" effect on pages.

  13. says

    Bill, I am VERY new to WordPress and Thesis and I can't seem to get this to work. Can you help? I have a page within my site called "Brokerage". I edited the page and in the content section I have this (from the HTML view so you can see it):

    <p style="text-align: left;">Column 1
    <p style="text-align: left;">Test column 1.

    <h4 style="text-align: left;">Column 2</h4>
    <p style="text-align: left;">Test Column 2

    I pasted your above code in the customfunctions.php file. I also pasted the following into the custom.css file:

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

    I had hoped that this would break up my test columns and put column 1 on the left and column 2 on the right. What do I have wrong? Any help is appreciated. Thanks.

  14. Sonal khunt says

    Hello Sir

    I already develop one theme in wordpress. and i try to make content area using your above code and tips. so i make one file called custom-functions.php and put above code in it and i have style.css file in that i write that css code
    and add one post with but it not working what mistake i made can u please give me the solution..

    thank you…
    in advance.

    • Bill Erickson says

      If you’re not using the Thesis theme, you’ll need to create a file named functions.php and put it in there. Make sure you begin the file with < ?php and end the file with ?>.

  15. says

    I have paste the code in custom_function. then I edit post and change adding h4 tag. but still not work. you can see on my site. can you tell me why it not work in my site?

    thank you

    • Bill Erickson says

      It’s working just fine, you now need to write CSS to display it the way you want. For three columns you’ll want something like:

      .column {width: 30%; float: left; padding-right: 10px;}

      View the source of your page to see what you have and work from there.

  16. says

    Hi,
    Do you know how to tell Thesis to have teasers on the homepage, but have one column dedicated to one category and a second column dedicated to another category?
    What I would like to do is post MANY news articles per day, but not let this drown out my other types of posts on the homepage (posted only twice a week).
    Thanks for any help you can offer.

    • Bill Erickson says

      You’ll need to build a custom page template for the homepage that simulates the look and feel of the teasers but does what you want. The problem is teasers are in rows, not columns (one on left, one on right, then one below on left…). You’ll need to rebuild it as columns if you want each column to show posts from a separate category. Alternatively, you could make each row of the teasers show two posts from a specific category.

      This tutorial should help: http://www.berchman.com/thesis-tutorial-multiple-custom-page-templates/

  17. Don says

    Hi.

    I can’t get this to work on my site (WP 3.1 and newest Thesis version)

    I have setup things exactly as described and I can see that the correct ‘s are inserted in the code.

    In the custom.css file I have inserted the lines below but nothing changes on my pages. (I have double checked that custom css is enabled in Thesis!).

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

    I hope someone can help me out.

  18. Tom says

    Thanks for code! But I found mistake. At the 7th line of code it should be ” if ($i > 0) $return .= “”;” instead of what is now. Of course I you use only columns in your content.

  19. says

    I would like to use this for a page template – maybe using if ( is_page_template(’3coltemplate.php’)) {

    I am having some problems – how would I incorporate this if I only want it executed if I use a certain page template?

    Thank you so much!

    • Bill Erickson says

      Modify this line:

      if(isset($columns[1]))

      To this:

      if( isset( $columns[1] ) && is_page_template( '3coltemplate.php' ) )

    • Bill Erickson says

      Either way should work. Your way is probably best since it keeps all that template’s code in a single file, but my approach would work regardless of your template structure (I can’t advise on how to modify your code without seeing it, so I had to modify mine)

  20. robert says

    Fantastic solution to WP columns.
    But I’m having problems, could you have a look?

    WP 3.2.1 / Thesis 1.8

    In custom.css
    .a-test-columns .column {width: 30%; float: left; padding-right: 10px;}
    .a-test-columns #content-1 {width: 175px;}
    .a-test-columns #content-2 {width: 175px;}
    .a-test-columns #content-3 {width: 175px;}

    In custom_functions.php
    add_filter(‘the_content’, ‘multi_content’);
    function multi_content($content){
    $columns = explode(”, $content);
    $i = 0;
    foreach ($columns as $column){
    $return .= “” . “\n”;
    if ($i > 1) $return .= “”;
    $return .= $column;
    $return .= ”;
    $i++;
    }
    if(isset($columns[1]))
    $content = wpautop($return);
    else
    $content = wpautop($content);
    return $content;
    }

    http://www.graphics-i-design.com/a-test-columns/
    Column 1
    Test column 1Test column 1Test column 1Test column 1Test column 1Test column 1Test column 1Test column 1Test column 1Test column 1Test column 1.

    Column 2
    Test Column 2Test Column 2Test Column 2Test Column 2Test Column 2Test Column 2Test Column 2Test Column 2Test Column 2Test Column 2Test Column 2Test Column 2Test Column 2Test Column 2

    Column 3
    Test Column 2Test Column 2Test Column 2Test Column 2Test Column 2Test Column 2Test Column 2Test Column 2Test Column 2Test Column 2Test Column 2Test Column 2Test Column 2Test Column 2

    Any comments very appreciated, I like your solution to WP columns.
    -robert

  21. says

    The teaser options apply to post listings on the homepage. The actual content in the teasers is in individual posts, and aggregated on one page.

    This solution is like adding a "teaser look" to single pages, except all the content is within that single page (so if you go to Pages > Edit, you can change all of it).

  22. Andrew says

    I am having the same issue. I am new to php and I am not sure what is the right format of the custom functions page.

    Would it be possible to post the actual content of the custom functions page including any headers or <?php tags, etc?

  23. says

    You can just paste the function at the very bottom of custom_functions.php. If you haven't edited it before, you will paste it below this:

    <?php
    }

    (That brace is closing the custom_bookmark_links() function ).

  24. says

    If you want to style them at a sitewide level, simply use the id or class of the div's. If you want to style them at a page level, add the page's slug as a class to a containing div ("content", "wrapper"…), then use them in combination:

    .[page slug] .column { [style] } provides style for all the columns on a page

    .about #column1 {width: 500px; float left;} provides style for just column1

    From iPhone


    Bill Erickson
    Wordpress Consultant
    <a href="http://www.billerickson.net” target=”_blank”>http://www.billerickson.net

  25. says

    Well I originally designed it with the plan that each column would have header text (an h4) describing it. The client then wanted some columns to have it and other columns to not, which is why I added the display:none.

    Even when you're hiding the h4, including a relevant description of the content is recommended for SEO purposes and screen readers. If I'm using display:none and have a title in the div, then I usually use \”column 2\” or \”right column\” as the h4 as it describes the content. This won't hurt SEO, as it's descriptive.

    From iPhone


    Bill Erickson
    WordPress Consultant
    http://www.billerickson.net