WordPress is great, but sometimes, when you’re writing a blog post, the WSIWYG is just lacking certain features. Say you want to format your content and make things a little cleaner. Like this:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel urna ut elit faucibus semper. Morbi dignissim ex enim, et consectetur justo blandit vel. Etiam lobortis nulla vel tellus dictum dignissim. Fusce purus lectus, luctus vitae imperdiet ac, lobortis quis urna. Integer id venenatis quam. Cras ac neque sit amet urna consequat pellentesque.
Nunc vitae laoreet purus. Ut egestas, metus eget accumsan fringilla, erat justo congue tellus, pulvinar vehicula nunc enim nec augue. Praesent gravida blandit risus dapibus pharetra. Proin consequat et nisl quis tincidunt. Proin at massa odio. Cras malesuada porta ultricies. Fusce tristique blandit leo at tempus. Curabitur tincidunt ex quis lacus sodales ornare.
By the way, you can get copy/paste lorem ipsum from http://www.lipsum.com/feed/html
Well, if this is something you’d like to be able to do, you can make a couple quick edits in functions.php and style.css of your theme. The CSS code looks like this:
/*
* Fluid Columns
* ----------------------------------------------------------------------------
*/
.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:79.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:2%; padding-right:2%; float:left; }
.last{ margin-right:0 !important; padding-right:0 !important; clear:right; }
.clearboth {clear:both;display:block;font-size:0;height:0;line-height:0;width:100%;}
And this is what you will put in the functions.php:
function columns_one_third( $atts, $content = null ) { return '<div class="one_third">' . do_shortcode($content) . '</div>'; } add_shortcode('one_third', 'columns_one_third');
function columns_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', 'columns_one_third_last');
function columns_two_third( $atts, $content = null ) { return '<div class="two_third">' . do_shortcode($content) . '</div>'; } add_shortcode('two_third', 'columns_two_third');
function columns_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', 'columns_two_third_last');
function columns_one_half( $atts, $content = null ) { return '<div class="one_half">' . do_shortcode($content) . '</div>'; } add_shortcode('one_half', 'columns_one_half');
function columns_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', 'columns_one_half_last');
function columns_one_fourth( $atts, $content = null ) { return '<div class="one_fourth">' . do_shortcode($content) . '</div>'; } add_shortcode('one_fourth', 'columns_one_fourth');
function columns_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', 'columns_one_fourth_last');
function columns_three_fourth( $atts, $content = null ) { return '<div class="three_fourth">' . do_shortcode($content) . '</div>'; } add_shortcode('three_fourth', 'columns_three_fourth');
function columns_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', 'columns_three_fourth_last');
function columns_one_fifth( $atts, $content = null ) { return '<div class="one_fifth">' . do_shortcode($content) . '</div>'; } add_shortcode('one_fifth', 'columns_one_fifth');
function columns_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', 'columns_one_fifth_last');
function columns_two_fifth( $atts, $content = null ) { return '<div class="two_fifth">' . do_shortcode($content) . '</div>'; } add_shortcode('two_fifth', 'columns_two_fifth');
function columns_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', 'columns_two_fifth_last');
function columns_three_fifth( $atts, $content = null ) { return '<div class="three_fifth">' . do_shortcode($content) . '</div>'; } add_shortcode('three_fifth', 'columns_three_fifth');
function columns_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', 'columns_three_fifth_last');
function columns_four_fifth( $atts, $content = null ) { return '<div class="four_fifth">' . do_shortcode($content) . '</div>'; } add_shortcode('four_fifth', 'columns_four_fifth');
function columns_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', 'columns_four_fifth_last');
function columns_one_sixth( $atts, $content = null ) { return '<div class="one_sixth">' . do_shortcode($content) . '</div>'; } add_shortcode('one_sixth', 'columns_one_sixth');
function columns_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', 'columns_one_sixth_last');
function columns_five_sixth( $atts, $content = null ) { return '<div class="five_sixth">' . do_shortcode($content) . '</div>'; } add_shortcode('five_sixth', 'columns_five_sixth');
function columns_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', 'columns_five_sixth_last');
function columns_formatter($content) {
$new_content = '';
/* Matches the contents and the open and closing tags */
$pattern_full = '{(\[raw\].*?\[/raw\])}is';
/* Matches just the contents */
$pattern_contents = '{\[raw\](.*?)\[/raw\]}is';
/* Divide content into pieces */
$pieces = preg_split($pattern_full, $content, -1, PREG_SPLIT_DELIM_CAPTURE);
/* Loop over pieces */
foreach ($pieces as $piece) {
/* Look for presence of the shortcode */
if (preg_match($pattern_contents, $piece, $matches)) {
/* Append to content (no formatting) */
$new_content .= $matches[1];
} else {
/* Format and append to content */
$new_content .= wptexturize(wpautop($piece));
}
}
return $new_content;
}
// Remove the 2 main auto-formatters
remove_filter('the_content', 'wpautop');
remove_filter('the_content', 'wptexturize');
// Before displaying for viewing, apply this function
add_filter('the_content', 'columns_formatter', 99);
add_filter('widget_text', 'columns_formatter', 99);
Now to use this handy feature, you basically say:
Your content goes here.....Your content goes here.....
If you wanted three columns, you’d replace ‘one_half’ with ‘one_third’, four columns, you’d replace ‘one_half’ with ‘one_fourth, and so on. Just make sure your last column has the ‘_last’ appended to both opening and closing tags.
Mobile
This is a pretty great feature, but it does break down on mobile devices. So in the media queries of the theme, I find it best to simple break the columns, and set each section to full width. The .clearboth class in the CSS code has pretty much everything you need (but also some extra) so we’ll take a piece out of that and do this in our media queries.
@media screen and (max-width: 758px) {
.one_half,.one_third,.two_third,.three_fourth,.one_fourth,.one_fifth,.two_fifth,.three_fifth,.four_fifth,.one_sixth,.five_sixth {
clear:both;
display:block;
width:100%;
}
}
This way, when the device screen gets to a smaller size, your columns will break into full width divs.
