The jQuery plugin that ate the world!

So I was looking at placing a Wordpress pages content flow into columns as I was using the YUI 2 to format the page… I thought about using jQuery and worked up an example using some of Karl Swedberg's work as a basis along with inspiration from Adam Wulf. But… the script worked by looking at each element… each p, each hr and each and every h2. After it counted 'em all it divided 'em by 3 placed that number in each column… which is cool except that a hr is a lot shorter than a paragraph (generally) and the layout broke.

I then started pondering getting the computed style (and don't get me started on how this is a bugger when IE is involved) of an imaginary page with the same width of the columns and then splitting that in 3 and somehow getting that chunk of elements (and perhaps splitting the odd p in the process) and putting them in the place where they're supposed to go… but that get problematic when you start to ignore hrs, you might end up getting the hr, which I was using as an underline to the h2, at the start of one column when it should be at the bottom of the other… or even better, beneath the heading at the top of the next column because the script was smart enough to know where headings - as well as horizontal rules - should properly go. Needless to say, it was getting far too complicated!

I had visions - nay, nightmares - about this plugin. I dreamt it got more and more complex, that I managed to write some weird, otherworldly, algorithm to predict where the breaks should occur, that it began to read the minds of the authors to such an extent that it'd correct the content on the fly, that it became… to all intents and purposes, the jQuery plugin that ate the world!

So I looked at something else before the weird little plan that I had in my head started to develop it's own form of consciousness and looked at the Wordpress Codex again.

I found some stuff on shortcodes (which are a simple set of functions for creating macro codes for use in post content). and so I wrote these:

<?php
function basic_leftcolumn($atts, $content = null) {
  return '<div class="yui-u first">'.$content.'</div>';
}
add_shortcode("leftcolumn", "basic_leftcolumn");

function basic_middlecolumn($atts, $content = null) {
  return '<div class="yui-u">'.$content.'</div>';
}
add_shortcode("middlecolumn", "basic_middlecolumn");

function basic_rightcolumn($atts, $content = null) {
  return '<div class="yui-u">'.$content.'</div>';
}
add_shortcode("rightcolumn", "basic_rightcolumn");
?>

Which, when placed in the functions.php file in my theme worked a treat except that extra brs were introduced... after some research I found this code from Adding Column Layout Shortcodes to Your Wordpress Theme:

<?php
function webtreats_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', 'webtreats_formatter', 99);
add_filter('widget_text', 'webtreats_formatter', 99);
?>

Which also got added to functions.php and everything worked a treat!

Everyone is now happy and they can use a simple mechanism to split the content between the columns and the plugin is safely locked in the back of my head… never to menace the world again!