Textpattern Comments Tutorial

When I set out to redesign wilshire|one, the first area I concentrated on was the display and entry of comments. With some recent changes in RC3, several plugins have been introduced that allow you to customize the display of comments with no code hacking involved. I’ll attempt to run through my entire comment system setup detailing all of the pieces and parts including the plugins I used and code examples.

And let me put this out there up front, this may not be the only way, or even the right way to accomplish this. I prefer to call it the “it worked so I stopped playing around with it” way. If you know of a better way to accomplish this, by all means, chime in.

Site Preferences

The first thing you’ll want to do is make sure that comments are not displayed as a numbered list. Check the admin -> preferences tab to confirm that this is set correctly.

Plugins

Your next step is to download a handful of plugins that will be used to create both the comments listing and the comment entry form.

• ajw_if_comment_owner
• ajw_comment_num
• ajw_comment_alt
• ptv_if
• czg_if_comment_cookies
• glx_gravatar

The Forms

Textpattern comes with 2 standard forms called comments and comment_form with the first being your comment list form and the latter being your entry form. These forms cannot be removed so be sure to copy the contents of the forms and save them off as a backup before editing them.

Comment Entry

I had 2 main goals in redoing the standard comment form. The first was to change the table based layout and the second was to present new and returning visitors a different comment entry form since a returning user only needs to enter their comment as their name, email and web address are stored in a cookie. In removing the table I wanted to use <label> tags for my input fields labels but this causes some validation problem since Textpattern does not give the comment entry fields IDs. I ended up replacing some of the standard Textpattern tags with a combination of HTML and PHP to get where I wanted. Here’s the form.

1. <div id="commentform">
2. <h3>Add Your Comment</h3>
3. <p>Comment form disclaimer. Or not.</p>
4. <txp:if_cookie>
5. <strong>Welcome back, <?php echo pcs('name'); ?>.</strong>
6. <input type="hidden" id="name" name="name" value="<?php echo pcs('name'); ?>" size="25" tabindex="1" />
7. <input type="hidden" id="email" name="email" value="<?php echo pcs('email'); ?>" size="25" tabindex="2" />
8. <input type="hidden" id="web" name="web" value="<?php echo pcs('web'); ?>" size="25" tabindex="3" />
9. </txp:if_cookie>
10. <txp:if_no_cookie>
11. <span><label for="name">Your Name:</label><input type="text" id="name" name="name" value="<?php echo pcs('name'); ?>" size="25" tabindex="1" /></span>
12. <span><label for="email">Your Email:</label><input type="text" id="email" name="email" value="<?php echo pcs('email'); ?>" size="25" tabindex="2" /></span>
13. <span><label for="web">Your http://</label><input type="text" id="web" name="web" value="<?php echo pcs('web'); ?>" size="25" tabindex="3" /></span>
14. </txp:if_no_cookie>
15. <span><label for="message">Your Comment:</label><textarea id="message" name="message" cols="30" rows="12" style="width:300px;height:250px" tabindex="4"><?php echo pcs('message'); ?></textarea></span>
16. <span><txp:comment_remember /></span>
17. <txp:comment_preview />
18. <txp:comment_submit />
19. </div>
20. Download this code: /code/commentform.txt

So what do we have here? It don’t look too pretty, but you can see the result on the comment form below. When a user has a cookie set, the only thing that will be displayed is “Welcome back…” Their name, email and web address will be saved in hidden fields. The pcs() function will grab those values from the cookie.

If the user does not have a cookie set, the standard form will all fields will be shown. I replace the Textpattern tag for the comment input fields on the form in order to add an id=”” to match my label for=”” tags. This is necessary if you want your page to validate. And thats it. All thats left for you to do is style your form appropriately.

Comment Listing

For my comments listing I wanted to implement many of the same things originally described in Jon Hicks’ well known Comments Hacks. Alternating classes for comments, a special class for the site owner, a div instead of list based output, comment numbering and the user of gravatars are all taken care of in the following example. Five plugins are used in this one form to get the job done, but in the end your source code stays intact. Now on to the form.

1. <div class="comment <txp:ptv_condition><txp:ptv_if plugin="ajw_if_comment_owner" web="www.yoursite.com">mycomment</txp:ptv_if> <txp:ptv_else><txp:ajw_comment_alt /></txp:ptv_else> </txp:ptv_condition>">
2. <txp:glx_gravatar />
3. <txp:comment_permlink><txp:ajw_comment_num /> </txp:comment_permlink>
4. <txp:comment_name /> - <txp:comment_time />
5. <txp:message />
6. </div>
7. Download this code: /code/commentlist.txt

A nice batch of tag soup, but quite effective. I’ll break down the form to get into more detail.

The first line is where the bulk of the work is done. I’ve assigned a class called “comment” to each comment so that I can assign styles that will be common to all comments, whether by myself, others, odd numbered or even. After the “comment” class is assigned, the ptv_if plugin is employed to do some conditional testing. If the comment is my own, it receives an additional class of “mycomment”. Otherwise, the comment will receive the appropriate class depending on whether its an odd or even numbered comment.

In the end, this will produce one common style for all comments, alternating styles for every comment, and a special style for your own comments. Depending on what you’re trying to do this might be overkill but my use of Nifty Corners made it necessary for me.

The rest of the form is a bit simpler. The first line here displays the users gravatar if applicable. The second line will create a permlink on the comment number, rather than the standard # sign. The third line will display the name of the commenter and the time the comment was posted.

The final lines display the actual comment and close the div element. And thats it! All that’s left again is adding some style to your comments. It might be necessary for you to add some extra block level elements to get the look you’re going for but this should give you the general idea.

Wrapping it Up

I spent a considerable amount of time getting this to work exactly how I wanted so in all likelihood you’ll need to do some tweaking here and there. But hopefully this will give you a good start in the right direction. Enjoy and happy commenting.

Comments

Commenting is closed for this article.