First of, this is pretty much an exact duplicate of: Split columns into three+ divs?

But the given solution does not work (returns blank). I'm guessing it collides with qTranslate which adds some really weird comments to the html, but i'm not sure.

I found a great code snippet that simply splits the content into pieces by the more tag. The problem is it seems to only split into two columns. It ignores the rest of the more tags. I am not actually dividing the content into columns, but rather into horisontal sections (with a divider inbetween).

The current code:

function split_content() {
    global $more;
    $more = true;
    $content = preg_split('/<span id="more-\d+"><\/span>/i', get_the_content('more'));
    for($c = 0, $csize = count($content); $c < $csize; $c++) {
        $content[$c] = apply_filters('the_content', $content[$c]);
    return $content;

The suggested solution in the linked thread does not work, and i have searched for other solutions but haven't found anything working.

It is important that the content is returned in an array of "columns". Like $content[0] is column 1, $content[1] is column2 etc.

Any ideas?

  • If you were the one who down-voted the shortcodes, you should explain why that won't work. That would probably include an explanation of why you need the "columns" in an array. Hacking a core feature to do something it's not intended to isn't always the greatest solution, but it's hard to think of anything better without knowing what your actual goal is rather than just how you think you want to solve it.
    – mrwweb
    Oct 29, 2012 at 18:34
  • I didn't downvote it. I would prefer to have it as an array, that way i have more control over where i want to display it on the page, and how i want to wrap the specific segment/colummn. Shortcodes is probably not the best option for me though, because it has to be as simple as possible for the end user; they shouldn't have to edit any code. It's too easy to mess it up.
    – qwerty
    Oct 30, 2012 at 8:06
  • Note that in modern WP this can be done trivially using a column block or CSS
    – Tom J Nowell
    Sep 1, 2021 at 12:11

1 Answer 1


Why not just create a few shortcodes for what you need?

you can create columns for all kind of uses,,

add this to your themes function.php file..

function yourtheme_one_third( $atts, $content = null ) {
   return '<div class="one_third">' . do_shortcode($content) . '</div>';
add_shortcode('one_third', 'yourtheme_one_third');

function yourtheme_one_third_last( $atts, $content = null ) {
   return '<div class="one_third last">' . do_shortcode($content) . '</div><div class="clearboth"></div>';
add_shortcode('one_third_last', 'yourtheme_one_third_last');

function yourtheme_two_third( $atts, $content = null ) {
   return '<div class="two_third">' . do_shortcode($content) . '</div>';
add_shortcode('two_third', 'yourtheme_two_third');

function yourtheme_two_third_last( $atts, $content = null ) {
   return '<div class="two_third last">' . do_shortcode($content) . '</div><div class="clearboth"></div>';
add_shortcode('two_third_last', 'yourtheme_two_third_last');

function yourtheme_one_half( $atts, $content = null ) {
   return '<div class="one_half">' . do_shortcode($content) . '</div>';
add_shortcode('one_half', 'yourtheme_one_half');

function yourtheme_one_half_last( $atts, $content = null ) {
   return '<div class="one_half last">' . do_shortcode($content) . '</div><div class="clearboth"></div>';
add_shortcode('one_half_last', 'yourtheme_one_half_last');

function yourtheme_one_fourth( $atts, $content = null ) {
   return '<div class="one_fourth">' . do_shortcode($content) . '</div>';
add_shortcode('one_fourth', 'yourtheme_one_fourth');

function yourtheme_one_fourth_last( $atts, $content = null ) {
   return '<div class="one_fourth last">' . do_shortcode($content) . '</div><div class="clearboth"></div>';
add_shortcode('one_fourth_last', 'yourtheme_one_fourth_last');

function yourtheme_three_fourth( $atts, $content = null ) {
   return '<div class="three_fourth">' . do_shortcode($content) . '</div>';
add_shortcode('three_fourth', 'yourtheme_three_fourth');

function yourtheme_three_fourth_last( $atts, $content = null ) {
   return '<div class="three_fourth last">' . do_shortcode($content) . '</div><div class="clearboth"></div>';
add_shortcode('three_fourth_last', 'yourtheme_three_fourth_last');

function yourtheme_one_fifth( $atts, $content = null ) {
   return '<div class="one_fifth">' . do_shortcode($content) . '</div>';
add_shortcode('one_fifth', 'yourtheme_one_fifth');

function yourtheme_one_fifth_last( $atts, $content = null ) {
   return '<div class="one_fifth last">' . do_shortcode($content) . '</div><div class="clearboth"></div>';
add_shortcode('one_fifth_last', 'yourtheme_one_fifth_last');

function yourtheme_two_fifth( $atts, $content = null ) {
   return '<div class="two_fifth">' . do_shortcode($content) . '</div>';
add_shortcode('two_fifth', 'yourtheme_two_fifth');

function yourtheme_two_fifth_last( $atts, $content = null ) {
   return '<div class="two_fifth last">' . do_shortcode($content) . '</div><div class="clearboth"></div>';
add_shortcode('two_fifth_last', 'yourtheme_two_fifth_last');

function yourtheme_three_fifth( $atts, $content = null ) {
   return '<div class="three_fifth">' . do_shortcode($content) . '</div>';
add_shortcode('three_fifth', 'yourtheme_three_fifth');

function yourtheme_three_fifth_last( $atts, $content = null ) {
   return '<div class="three_fifth last">' . do_shortcode($content) . '</div><div class="clearboth"></div>';
add_shortcode('three_fifth_last', 'yourtheme_three_fifth_last');

function yourtheme_four_fifth( $atts, $content = null ) {
   return '<div class="four_fifth">' . do_shortcode($content) . '</div>';
add_shortcode('four_fifth', 'yourtheme_four_fifth');

function yourtheme_four_fifth_last( $atts, $content = null ) {
   return '<div class="four_fifth last">' . do_shortcode($content) . '</div><div class="clearboth"></div>';
add_shortcode('four_fifth_last', 'yourtheme_four_fifth_last');

function yourtheme_one_sixth( $atts, $content = null ) {
   return '<div class="one_sixth">' . do_shortcode($content) . '</div>';
add_shortcode('one_sixth', 'yourtheme_one_sixth');

function yourtheme_one_sixth_last( $atts, $content = null ) {
   return '<div class="one_sixth last">' . do_shortcode($content) . '</div><div class="clearboth"></div>';
add_shortcode('one_sixth_last', 'yourtheme_one_sixth_last');

function yourtheme_five_sixth( $atts, $content = null ) {
   return '<div class="five_sixth">' . do_shortcode($content) . '</div>';
add_shortcode('five_sixth', 'yourtheme_five_sixth');

function yourtheme_five_sixth_last( $atts, $content = null ) {
   return '<div class="five_sixth last">' . do_shortcode($content) . '</div><div class="clearboth"></div>';
add_shortcode('five_sixth_last', 'yourtheme_five_sixth_last');

Then add some css to your themes style.css file

.one_half{ width:48%; }
.one_third{ width:30.66%; }
.two_third{ width:65.33%; }
.one_fourth{ width:22%; }
.three_fourth{ width:74%; }
.one_fifth{ width:16.8%; }
.two_fifth{ width:37.6%; }
.three_fifth{ width:58.4%; }
.four_fifth{ width:67.2%; }
.one_sixth{ width:13.33%; }
.five_sixth{ width:82.67%; }
.one_half,.one_third,.two_third,.three_fourth,.one_fourth,.one_fifth,.two_fifth,.three_fifth,.four_fifth,.one_sixth,.five_sixth{ position:relative; margin-right:4%; float:left; }
.last{ margin-right:0 !important; clear:right; }
.clearboth {clear:both;display:block;font-size:0;height:0;line-height:0;width:100%;}

then when writing a post use your new shortcodes to create areas for specific text etc..

[one_third]text here[/one_third]
[one_third_last]text here[/one_third_last]
[two_third]text here[/two_third]
[two_third_last]text here[/two_third_last]
[one_half]text here[/one_half]
[one_half_last]text here[/one_half_last]

change all the function names to suit your theme, and edit any css to match your theme settings etc..

full source here http://tutorials.mysitemyway.com/adding-column-layout-shortcodes-to-a-wordpress-theme/


  • Wrapping segments in shortcodes is unfortunately not an option for me, because it's to messy for the end-user to use. It has to be as simple as possible, and short codes are pretty easy to mess up if you don't know how to use them. The problem i have is i need to divide the content into horizontal segments with a line inbetween, that's it. I wish it was possible to add a <hr> tag in the editor, but i haven't found that. Would it be possible to just add one shortcode inbetween segments called [divider] and just replace it with a <hr> tag?
    – qwerty
    Oct 30, 2012 at 8:12
  • The plugin TinyMCEAdvanced allowed me to add the <hr> tag to the editor, problem solved!
    – qwerty
    Oct 30, 2012 at 8:15

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.