Part 1: Neat Little Snippets of Code That Are Useful for WordPress

So, as an introduction, I’m going to tell you that there will be no real rhyme or reason to this series. Over the past few weeks, I’ve had several paying clients (and one pro-bono, who really pushed my limits) who have forced me to learn new things, and pull out some creative thinking. As I said in this post, I’m not a programmer, I just know enough to get around. So I’m absolutely positive some of these could be written in some other cleaner way - I just don’t know how. So by all means, if you know of a better way to accomplish these things, share it.

So, our first trick will be something basic, something simple. Blockquotes.

People like to use the style of a big background image of quotes when designing a layout for blockquotes. It’s a very nice method, and makes it obvious as to what you are reading. However, it’s hard to get the quotes all around the blockquote without extra markup. Some sites just open with the left-side quotes and never close. Some sites use the method of the quotes smooshed together in the upper left-hand corner. Some sites get them at the beginning and the end, but they rely on a background image for the upper left-hand corner in the blockquote area, and the closing <p> tag to put the finishing touch in the bottom right-hand corner. Some even do it without images.

One of the sites I was working on this past week needed the blockquote images before and after the quote. I didn’t want to rely on using the <p> tags, because what if the blockquote was a long one, and span two, or even three paragraphs? Then you’d have the opening at the beginning, and one at the end of each paragraph. Butt ugly. You could add a class to the last one, though and it would work.

But the dealbreaker was that this client was using WordPress MU, and was getting ready to start a community portal where many people would be using this theme I was designing. You couldn’t count on the end user to put in the class at the last paragraph. Hell, half the time they’re lost without the WYSIWYG editor (PITA that the thing is). So I needed something that used the KISS principle - let them write a blockquote and have the formatting just appear - without the end user having to do anything other than use the <blockquote> tag.

In comes the idea for the code. I liked this method the best - it seemed sensible to me (i wanted to replace the <div> tags with <span>tags, though - personal preference). But, as said before, I didn’t want the end user to have to enter in any extra markup themselves, because it was unreliable. So how to do it?

I thought…“what if there was a way to search the_content() for the closing <blockquote> tag, and replace it with my own?”

By God, you can. Thanks to a post I saw by HandySolo on the forums, you can interject your own stuff into the_content(), then return it to its normal state of being. So I took it a step further - could I do a search and replace?

Well, yes, Shelly, you can. Here’s what it looks like:


<?php
// fix blockquote display
function fix_bquote ($content) {
$bquote = "</blockquote>";
$rep_bquote = "<span class=\"bquote\"></span></blockquote>";
$content = str_replace($bquote, $rep_bquote, $content);
return ($content);
}
add_filter('the_content', 'fix_bquote');
?>


What this does is, it’ll pull out the_content() and search for the closing </blockquote> tag, then replace it with the addition of a <span> tag, assigned a particular class. So instead of </blockquote>, you see <span class="bquote"></span></blockquote>. Then you simply assign that class a background image (the closing “) and set it’s background in the stylesheet, like so:


span.bquote {
display:block;
text-align:right;
background:url("images/end-bquote.gif") no-repeat right bottom;
}


It’s pretty cool, and very nice so you don’t have to hand-code this in every single time to get it to work right. It just *does* it for you.

Up Next: Send to a Friend

Posted by admin
November 13th, 2007