Split content into multiple columns using more tag?

by

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?

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..

<?php
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]
etc...etc....

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/

Marty

Leave a Comment