1000 Miles or Bust!

Floating a rounded corner box inside a WordPress post entry

How to apply div tags from within the WordPress RCE using the content filter in order to get a rounded corners, floated text box

The problems were:

• that I and my client wanted to float a rounded corners pullquote box inside a WordPress post
• but… the WordPress rich content editor TinyMCE strips out div tags and many other html tags, even when entered in the “code” view window
• moreover… my client doesn’t want to type code and I would like the client to be able to write the post entirely by themselves

The solution for the client was to…

• enclose the text to be floated in a curly bracket tag, e.g. {pullquote}display this floated{endpullquote}

The programming and design solution to implement this was to:

• generate the relevant css, html tags and graphics for the rounded corner boxes using http://www.roundedcornr.com/
• upload the images insert the css into the theme style sheet and modify the css if the images are placed inside an images subdirectory
• modify the outermost box css style to float right at (for example) 40% wide with a 15 pixel left margin
• add a content filter to the WordPress functions.php theme file (alternately this could be a plugin)
• use the content filter to replace the tags with the right html markup divs

Here’s the css (note that I modified the style names from the autogenerated ones)

.pullquote_box {
background: #fae48c;
width: 45%;
float: right;
margin-left: 15px;
}
.pullquote_top div {
background: url(images/pullquote_tl.png) no-repeat top left;
}
.pullquote_top {
background: url(images/pullquote_tr.png) no-repeat top right;
}
.pullquote_bottom div {
background: url(images/pullquote_bl.png) no-repeat bottom left;
}
.pullquote_bottom {
background: url(images/pullquote_br.png) no-repeat bottom right;
}

Here’s the code that went into the theme’s functions.php (Note the embedded html in the two variables has been modified to reflect the style names that I modified from the names given by the rounded corners autogenerator):

add_filter('the_content','fix_the_content');

function fix_the_content($content) {
$pullquote='<div class="pullquote_box"><div class="pullquote_top"><div></div></div><div class="pullquote_content">';
$endpullquote='</div><div class="pullquote_bottom"><div></div></div></div>';

$content = str_replace('{pullquote}', $pullquote, $content);
$content = str_replace('{endpullquote}', $endpullquote, $content);
return $content;
}

To produce the quote in a floated box, we now need to just embed this sort of paragraph into the WordPress post:

{pullquote}Lorem ipsum ...{endpullquote}

Notes

Obviously this technique could be extended to allow other embedded tags as well by creating additional {tags}… or even embedding alternate style information into the html such as floating right rather than left… and it would be even nicer to be able to pass a parameter such as ‘{pullquote style=”float:left;”}’ in an even better implementation… that would need to use a more sophisticated regexp string replacement command such as the preg_match routine in my wp_spreadsheet plugin…

Resources

Allowing the WordPress TinyMCE editor to accept <div> tags

another approach to rounded corners inside a WordPress Post - I prefer my solution of attaching it to a theme rather than to a plugin as these are really presentation elements, not program-wide elements. But ease of coding is almost everything.

October 7th, 2007 Posted by Tim | Hacking, Every last post | one comment