How to Organize Multiple Content Areas for Websites

I’m closing the comments on this post because it describes an older technique I no longer recommend. A more modern and maintainable approach is to define column classes in your stylesheet and use a shortcode plugin (or a simple custom shortcode) to insert columned blocks. That said, the method below can still be useful for sites where editors prefer to write all page content in the main editor and separate sections using a heading.

WordPress is excellent at presenting a single title and a block of content, but when using it as a CMS you often need multiple content regions on a single page. Examples include multiple boxes on a homepage or three columns of text on an internal page, with each block of content unique to that page.

There are several ways to achieve multiple content areas:

• Embedding

  elements directly in post content. This approach works well for developers but is risky for non-technical editors who typically use the Visual editor and may accidentally remove or break markup.

• Using sidebars and widgets. Good for site-wide or one-off widget areas, but this approach can fragment content and doesn’t scale if you need many distinct areas. It also separates content from the page editor, making it harder for editors to manage everything in one place.
• Using a shortcode to divide content into columns (for example: [column id="1"]…[/column] [column id="2"]…[/column]). Shortcodes are flexible and powerful, but some editors find them less intuitive.
• Adding extra WYSIWYG meta boxes to the page editor. This keeps content separate by field, but creates per-site structure rather than per-page flexibility and can complicate the editor UI if you need a variable number of regions.

On a recent project we needed two or three columns of unique content on every page. The approach below was inspired by an older tutorial and adjusted to allow any number of content areas using a specific heading tag as a separator. This method keeps all content editable in the main editor while generating separate column containers when the page is displayed.

The Content

When writing a page, separate each content block by inserting a specific heading tag where you want a column break. In the example here, a Heading 4 (

) is used because it is easy to apply from the editor toolbar. You can use any heading level you prefer; just be consistent. The content before the first

becomes the first column, the content after the first

and before the second becomes the second column, and so on.

The Code

Place the following function in your theme’s functions.php (or your custom functions file). It detects

headings in the post content, splits the content into sections, and wraps each section in a

that receives a unique id.

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

What this function does:

• Explodes the post content on each
  

  , creating an array of content blocks.

• Loops through each block and wraps it in a

  , where N is the zero-based index of that block.

• Reinserts the
  

  for all blocks except the first (because the first block is the content before the first heading).

• If no
  

  is present (only one block of content), the function returns the original content untouched.

• The filter is applied to the_content so the transformation happens when WordPress outputs the post or page content.

After adding the function, add CSS to control layout and appearance. The shared class .column lets you apply styles to all columns; the IDs (#content-0, #content-1, etc.) let you target individual columns if needed. Example CSS:

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

Adjust widths, margins, and responsive behavior to suit your design. You may also prefer to use a flexible grid or flexbox to manage varying numbers of columns and better handle smaller screens.

This approach keeps all page content centralized in the main editor, while automatically generating separate content containers for styling. It’s simple to set up, straightforward for editors who are comfortable using heading styles, and flexible enough to create as many regions as you need per page. If you prefer a more robust or editor-friendly solution, consider using CSS column classes with a shortcode or a content-block plugin that exposes dedicated visual controls for columns.