I’ve been busy making a new WordPress tumblog theme. This theme comes with 8 different post format. I thought to make a different layout of chat format was such a great idea. I search how to deal this problem and got some results, but there’s only one which solving my problem, with some modification of the code.

function daoon_chat_post($content) {
    global $post;
    if (has_post_format('chat')) {
        remove_filter ('the_content',  'wpautop');
        $chatoutput = "<ul class=\"chat\">\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 . "<li><strong>$who</strong><p>$what</p></li>\n";
            } else {
                $chatoutput = $chatoutput . $haystack . "\n";
            }
        }
 
        // print our new formated chat post
        $content = $chatoutput . "</ul>\n";
        return $content;
     } else {
         return $content;
     }
 }
 add_filter('the_content', 'daoon_chat_post', 9);

Line 3, if (has_post_format('chat')), check whether the post has chat post format or not, then filter the content for re-layouting. The output then has a <li> element for each person and message inside an <ul> element.

Reference

1. Tumblr Style Chat Posts for WordPress