Blog

How to create a two column page of content in WordPress

two-columnsManage two columns of content, on one page, from within the WordPress admin.

I realize that this post is going to be a little technical for most – actually most people won’t need to read it – but I thought it might be useful for those who are seeking advice on this subject around the web.

I had a need for a WordPress client site where we needed to actively manage two columns of content on the same page but we needed to do it from within the WordPress admin. (No modification of the HTML directly or direct customization of your theme like you normally do in a sidebar, etc.) In addition to this requiring a low tech, no programming/ftp knowledge solution, I needed it to be completely code based. There may or may not be good plug-ins available around the web to accomplish this task but I’m a WordPress plug-in phobic. I don’t like to use plug-ins if I don’t have to because you have no idea about how well they’re written or exactly how well they’ll work in the future as you update to newer versions of WordPress.

I originally saw some posts within the WordPress forums and one in particular provided an easy hack to this problem. Why WordPress has not integrated this into the standard software is way beyond my understanding. The solution got me 90% of the way and it was dirt simple. Well, it’s now dirt simple after I spent an hour trying to hack the solution myself and then brought in my programmer for a final consultation. For the life of me I can’t seem to find the original post again to update everyone on my solution so I apologize now profusely. But I will provide the solution below for anyone that needs it.

1) Create your page template

Basically all you need to do is create a new template file for your page. If you’d like to apply this code to your entire blog or site that’s obviously fine as well. Simply duplicate the page.php file and put the following at the top if you’d like to keep things flexible and retain the standard one column default template:

<?php
/*
Template Name: Custom-Template
*/
?>

This will ensure that the template you are building shows up as an option when you’re building a new page. All you have to do is select it before publishing your page.

2) Paste this snippet of code

Second, to create the second column of content, simply paste the following into your post content BEFORE the second column of content starts: ”[–column–]“

Below is the code that you need to put on your page. Feel free to modify as needed. Enjoy!

<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>
<div id=”post-<?php the_ID(); ?>”>

<h1><?php the_title(); ?></h1>

<?php endwhile; ?>

<?php
if (have_posts()) : while (have_posts()) : the_post();
$page_columns = explode(“[–column–]”, $post->post_content);
endwhile; endif;

print ‘<table width=”950″ border=”0″><tr><td width=”650″ valign=”top”>’;
print apply_filters(‘the_content’, $page_columns[0]);
print ‘</td><td width=”40″>’;
print ‘&nbsp;’;
print ‘</td><td valign=”top”>’;
print apply_filters(‘the_content’, $page_columns[1]);
print ‘</td></tr></table>’;

?>
</div>
<?php else : ?>

avatar

Chris Auman is a veteran Internet marketer, website developer, and designer with over 20 years of experience in the trenches. As President and Senior Strategist at Sanctuary, Chris has successfully guided the online marketing efforts for companies large and small. Chris’ clients range from family owned & operated retail operations with a local footprint of 1-10 stores to multinational Fortune 500 companies.

FacebookTwitterLinkedInGoogle+christopherauman.com

Bear