Aug 15 2010
Posted by: Jason Ferguson
The problem with Tumblr, for me anyway, is the loss of direct control over the code and ability to host my submissions locally. I know tumblr has been around for a while and it doesn’t look like it’s going anywhere, but anyone who has been on the net for a while knows that just because a site is here today, that doesn’t mean it will still be here tomorrow. Tumblr doesn’t have an export option, so needless to say I’m a little wary about posting anything I might want to be able to look at or back reference a few years from now. Does anyone remember scribble.nu, run by Dustin Vannatter of the then OHHELLO network (Swank Army!). It was one of the first blogging platforms, before blog’s were even called blog’s and they were still just called journals. For a time everyone who was anyone had a scribble.nu journal running inline with their current site. The same goes for sites like MODblog, from Mike Pacific and Gorman of DeskMOD fame. I’m sure everyone has sites they have used at one time that just couldn’t handle the traffic or for one reason or another just died a unfortunate death.
I’ve have been toying around with Tumblr a little bit recently though and I am enjoying how it automatically handles different types of content and formats it without any thought on my part. Right now this is something that is still lacking in WordPress, which I touched base in a round-about way on my last post.
Tumblr makes it incredibly easy to post different types of submissions and have them styled automatically without any per-entry coding, not forcing us to remember which posts require what custom fields like we have to do in WordPress. I had thought WordPress 3.0 was going to help solve some of these problems by introducing Custom Post Types, but unfortunately it’s still not quiet there yet and Custom Post Types aren’t quiet what some of us expected them to be (although the new functions are extremely useful if you use them in the way they were designed for).
So, as part of a larger project I have been working on, here is a quick and easy way to implement tumblr-esque “chat” posts into your site. The following code will take any content between the [chat] and [/chat] shortcodes, automatically format it and apply a specific style. Currently it sorts anything that matches into relevant DL and DT html tags, and applies a highlight class to every other row. So very quickly I can turn this:
Fight Club (1999)
Narrator: You’re making a big mistake, fellas!
Police Officer: You said you would say that.
Narrator: I’m not Tyler Durden!
Police Officer: You told us you’d say that, too.
Narrator: All right then, I’m Tyler Durden. Listen to me, I’m giving you a direct order. We’re aborting this mission right now.
Police Officer: You said you would definitely say that.
Into something a little prettier, like this:
Fight Club (1999)
- Narrator:
- You’re making a big mistake, fellas!
- Police Officer:
- You said you would say that.
- Narrator:
- I’m not Tyler Durden!
- Police Officer:
- You told us you’d say that, too.
- Narrator:
- All right then, I’m Tyler Durden. Listen to me, I’m giving you a direct order. We’re aborting this mission right now.
- Police Officer:
- You said you would definitely say that.
function tumblr_chat_post_shortcode($atts, $content=null) {
$chatoutput = "<dl class=\"chat-transcript\">\n";
$split = preg_split("/(\r?\n)+|(<br\s*\/?>\s*)+/", $content);
foreach($split as $haystack) {
if (strpos($haystack, ":")) {
$string = explode(":", trim($haystack), 2);
$who = strip_tags(trim($string[0]));
$what = strip_tags(trim($string[1]));
$row_class = empty($row_class)? " class=\"chat-highlight\"" : "";
$chatoutput = $chatoutput . "<dt$row_class><strong>$who:</strong></dt> <dd>$what</dd>\n";
}
else {
// the string didn't contain a needle. Displaying anyway in case theres anything additional you want to add within the transcript
$chatoutput = $chatoutput . $haystack . "\n";
}
}
// print our new formated chat post
$content = $chatoutput . "</dl>\n";
return $content;
}
add_shortcode("chat", "tumblr_chat_post_shortcode");
If shortcodes just aren’t your style and you want something to work on posts transparently, that’s not very difficult either. All we have to do is create a new category (in this example we are using “chats”), and the code posted below will automatically process and format any submissions. Using the built in add_filter functions wordpress provides, it’s easy to modify content before it gets displayed to the browser, allowing us a way to format posts differently based on the category they are in.
function tumblr_chat_post($content) {
global $post;
//$content = $post->post_content;
if ($post->post_type == 'post') {
$postcats = wp_get_object_terms($post->ID, 'category');
foreach ($postcats as $mycat) {
if ($mycat->name == "chats") {
remove_filter ('the_content', 'wpautop');
$chatoutput = "<dl class=\"chat-transcript\">\n";
$split = preg_split("/(\r?\n)+|(<br\s*\/?>\s*)+/", $content);
foreach($split as $haystack) {
if (strpos($haystack, ":")) {
$string = explode(":", trim($haystack), 2);
//list($who, $what) = explode(":", $haystack, 2);
$who = strip_tags(trim($string[0]));
$what = strip_tags(trim($string[1]));
$row_class = empty($row_class)? " class=\"chat-highlight\"" : "";
$chatoutput = $chatoutput . "<dt$row_class><strong>$who:</strong></dt> <dd>$what</dd>\n";
}
else {
// the string didn't contain a needle. Displaying anyway in case theres anything additional you want to add within the transcript
$chatoutput = $chatoutput . $haystack . "\n";
}
}
// print our new formated chat post
$content = $chatoutput . "</dl>\n";
return $content;
}
else {
add_filter ('the_content', 'wpautop');
// I don't exist in the defined category, so no processing is needed
return $content;
}
}
}
else {
// I'm not a regular post, so no processing is needed.
return $content;
}
}
add_filter( "the_content", "tumblr_chat_post", 9);
Either of these functions can be placed in your themes function.php file and will work automatically as long as your chat transcripts are formatted in a Name: Message structure. This is a fairly simple example on how to use wordpress hooks and shortcodes to modify your post before it gets outputted to the browser, which provides us with some interesting ways to implement specific styled post types without hacking apart the “Custom Post Type” functions WordPress released with version 3.0, something that is just not suited very well or meant for for these type of tasks.
