I’m closing comments on this article because it describes an older WordPress technique that I no longer use or recommend for new projects. A better approach is to define Column Classes in your CSS file and then use the Div Shortcode Plugin to make it easier to create clean, manageable columns inside WordPress pages.

WordPress is excellent when you need to publish a page with a title followed by one main content area. However, when you use WordPress as a content management system, you often need more flexible page layouts. For example, a homepage may require several content boxes, or an interior page may need two or three columns of text. In those cases, the standard editor can feel limiting unless you have a simple way to divide page content into multiple sections.

There are several ways to create multiple content areas in WordPress. Some common options include:

• Adding

  elements directly inside the post or page content. This can work well for developers who are comfortable editing HTML, but it is rarely ideal for clients. Most clients use the Visual editor, where custom markup can be deleted, moved, or broken accidentally. Once that happens, they may not know how to switch to HTML mode and repair the layout.

• Using sidebars and widgets to display different blocks of content. This approach can be useful for items that appear repeatedly across a site, such as a standard sidebar, or for a small number of homepage boxes. However, it does not scale well if every page needs a unique layout. You do not want to create dozens of separate widget areas just to manage different sections of content. It also separates the content from the page where it appears, which can make the site harder for clients to edit.
• Using a shortcode to divide content into multiple columns. For example, you might write something like [column id="1"] text in column 1 [/column] and [column id="2"] text in column 2 [/column]. This is a strong solution and can be very flexible, but it may still feel technical for users who are not familiar with shortcodes.
• Adding an extra WYSIWYG meta box to the page editor for a second column or additional content section. This can also work well, but it usually defines the number of content areas at the site level. The approach below allows the number of sections to vary from page to page, which can be helpful when different pages require different layouts.

For one project, we needed each page to support two or three unique content columns. Each block of content belonged to that specific page, so it made sense to keep everything editable in the same WordPress content editor. This method was inspired by a post at kriesi.at, and it was modified with help from Chris Bratlien so that it could support as many content areas as needed instead of only a left and right column.

The Content

When writing content in WordPress, you can separate sections by using an

heading. The reason for choosing

is that it is easy to access from the WordPress editor toolbar. Select the text you want to use as a heading, open the formatting menu, and choose Heading 4. You could adjust the code to use a different heading level if that fits your theme better. In this project,

,

, and

were already being used elsewhere in the page structure, so

was a convenient marker for splitting the content into columns.

The Code

In your functions.php file, or in custom_functions.php if you are using Thesis, paste the following code:

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;
}

Here is what the code is doing:

• $columns = explode('
  

  ', $content);

  This splits the page content into separate blocks every time an

  tag is found.

• $i = 0; This creates a counter named $i and starts it at zero.
• foreach ($columns as $column){ This loops through each content block created by the split.
• $return .= "
  " . "\n";

  This wraps each block in a

  with the class column and a unique ID such as content-0, content-1, and so on.

• if ($i > 1) $return .= "
  

  ";

  This adds the

  tag back into the content where needed after the content has been split.

• $return .= $column; $return .= ''; $i++; This adds the content block, closes the wrapper

  , increases the counter, and continues to the next block.

• if(isset($columns[1])) $content = wpautop($return); If the page contains more than one content block, WordPress outputs the new column-based markup.
• else $content = wpautop($content); return $content; If no
  

  heading is found, the original page content is displayed normally.

• add_filter('the_content', 'multi_content'); This tells WordPress to run the function whenever it displays the main post or page content.

You will also need to add CSS so the columns display the way you want. To style every column, target the shared class column. To style individual content blocks, target their unique IDs. This gives you control over column widths, spacing, alignment, and layout while still allowing the page content to remain editable from the main WordPress editor.


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

This technique can be useful for maintaining older WordPress sites that already rely on this type of content splitting. For new builds, a cleaner CSS-based column system or a modern block-based layout is usually easier to manage and less fragile for non-technical users.