Styling Chat Transcript with WordPress Custom Post Format

Some people are confused about the Post Formats feature that introduced with Version 3.1, especially how it differs from Custom Post Types. Have you ever known about Tumblr? The Post Format function emulates Tumblr style posts. It all depends on what you want that particular post format to display.
I know that when post formats first came out, the “Chat” format was always one I didn’t really know how to handle. How does the user input the chat into the content of the post? How do we display it?

chat – A chat transcript, like so:

John: foo
Mary: bar
John: foo 2

That’s pretty simple. As theme developers, we should expect the chat text to be entered into the post content editor in that manner. Let’s see what you get in browser when you view a source code of chat transcript with WordPress Custom Post Format:

<p> John: foo</p> 
<p> Mary: bar</p> 
<p> John: foo 2</p> 

The forming of a solution

• Write a function that filter all the chat transcript content as you want then you can styling that like standard post.
• Using CSS & JavaScript to alternating paragraph colors and text style.

What’s best solution? I don’t know! It depends on your goals which you working on. In this post, I will show you how to styling chat transcript with two solution above.

Using CSS & JavaScript to alternating paragraph colors and text style

The following is the CSS code that you can copying to a theme’s style.css file.

/* Chat Posts */
.format-chat .entry-content p{
	background: #e0f1f3; /* The background color of first paragraph */
	border-left: 7px solid #2ba6cb; /* The setting for border of first paragraph */
	margin-bottom: 2px;
	padding-left: 13px;
}
.format-chat .entry-content p:nth-child(odd) {
	background: #e9e9e9; /* The background color of next paragraph */
	border-left-color: #5da423; /* The setting for border of next paragraph */
}

Next, you can using JavaScript to apply more style to first word per paragraphs – it’s often show as name. I’m using jQuery

$(document).ready(function() {

  // Select first word of every paragraph in post format chat
  $('.format-chat .entry-content p').each(function(){
    var text_splited = $(this).text().split(" ");
   $(this).html(""+text_splited.shift()+" "+text_splited.join(" "));
  });

})

As you see, I’m using <strong> to styling the name, you can change it to whatever you want. If it’s not a complete solution for you, read on.

Filter chat post format like standard post to styling it easier

Fortunately, WordPress allow you write custom function to filter post content without edit or change the original text. It’s help you styling chat post format as you want.

function narga_styling_chat_post($content) {
    global $post;
    if (has_post_format('chat')) {
        remove_filter ('the_content',  'wpautop');
        $chatoutput = "
n";
        $split = preg_split("/(r?n)+|(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 . "
$who
$what
n";
            } else {
                $chatoutput = $chatoutput . $haystack . "n";
            }
        }
  
        // print our new formated chat post
        $content = $chatoutput . "
n";
        return $content;
     } else {
         return $content;
     }
 }
add_filter("the_content", "narga_styling_chat_post", 9);

Just add this function to your theme’s functions.php and view the HTML source code:

<ul class="chat">
John <p> foo</p>
Mary <p>bar</p> 
John <p> foo 2</p> 

After filed chat transcript content like above, it’s look more attractive with your style.
Here is an example:

Conclusion

This is a fairly simple example on how to use WordPress hooks and simple condition 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, something that is just not suited very well or meant for for these type of tasks.
There’ve been no great solutions in the past, so I hope this helps in implementing something that’s useable for you in theme development.
Please feel free to write your own custom functions with this code, break it, and send me fixes/enhancements you’d like to see thrown in.