How to Organize Multiple Content Areas on a Website

I’m closing the comments on this because this is an older technique I no longer use or recommend. A better approach is to define column classes in your CSS and use a shortcode or a Div Shortcode plugin to insert columns in page content more easily.

WordPress is ideal for a single title and a block of content, but when you use it as a CMS you often need multiple content areas on the same page: homepage boxes, several columns on an interior page, or other distinct sections that are unique to each page.

There are several common approaches to handle multiple content areas:

• Embedding
  elements directly in the post content. This works for developers, but non-technical users editing in Visual mode can accidentally remove or break the code.
• Using sidebars and widgets. Useful for site-wide or one-off boxes, but it doesn’t scale well and separates the content from the page editor.
• Using shortcodes to create columns (for example, [column id=”1″]…[/column]). Shortcodes are a strong option and keep content inside the editor, but may require users to learn shortcode syntax.
• Adding extra WYSIWYG meta boxes in the editor for each additional content area. This can work, but it ties the number of areas to a per-site implementation rather than letting editors decide per page.

For a recent project we needed two or three columns of unique content on every page. The approach below, inspired by a few community posts and adapted to be flexible, lets editors create as many columns as needed directly within the main content editor by using a chosen heading tag as a divider.

The Content

When you author content, separate each content block with an

heading (or another heading level of your choice). Heading 4 is convenient because it’s easy to choose from the editor toolbar. Each

marks the start of a new column of content; the text before the first

becomes the first column.

The Code

Place the following code in your theme’s functions.php (or the equivalent custom functions file). It splits the_content() output into multiple

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 does, step by step:

• explode(‘
  

  ‘, $content) breaks the post content into pieces whenever it finds an

  .

• A counter ($i) tracks the column index, starting at 0.
• Each content piece is wrapped in a
  so you can target all columns via the .column class or specific columns via #content-0, #content-1, etc.
• The code re-inserts the
  

  for all columns except the first, because the first segment represents the content before the initial

  .

• If no
  

  is present (only a single block), the function leaves the content as-is. If multiple blocks exist, it replaces the_content() output with the generated column markup.

• The add_filter call ensures this runs whenever WordPress renders the main content for a post or page.

After adding the PHP, add CSS to control layout and appearance. Use the .column class for shared styles and the #content-N IDs for column-specific rules. A simple example:

.column { float: left; margin-right: 20px; }
#content-0 { width: 400px; }
#content-1 { width: 300px; }
#content-2 { width: 250px; }

Adjust widths, margins, and responsive behavior as needed. You can also clear floats or switch to a flexbox/grid approach for more robust, responsive layouts.

This method keeps all editable content inside the main editor, so clients can manage every section in one place without learning new interfaces. It’s flexible, lets you determine the number of columns per page, and is easy to style with CSS.

I hope this technique is helpful for projects where multiple, page-specific content areas are required. For modern implementations, consider combining it with CSS grid/flexbox or using established column classes and a shortcode plugin for even easier content creation by non-technical users.