01-17

2010

WordPress: Copy My Comments Page

I’ve gotten a lot of comments about how I do my comments page and figured I would share how I do it! Granted not all of the styles are in my style sheet, that is due to pure laziness on my part when I was writing it up.

I use the following WordPress plugins specifically for the comments page:

For the rounded edges I use the following CSS3:

border-radius:6px;
-webkit-border-radius:6px;
-moz-border-radius:6px;

This chunk of code enables you to have alternating colors in the comments but also let’s you define in your CSS, a class to specifically customize the author (your) comments.

Place at the very top of the page, this defines the CSS class you will use for the alternating color row in your comments.

$oddcomment = 'alt';

This also starts the comment loop.

<?php if ( have_comments() ) : ?>
<?php $i = 0; ?>
<?php foreach ($comments as $comment) : ?>
<?php $i  ; ?>
<?php
//Test for author comment
if($comment->user_id == "1") {
$authorcomment ='me';
$commentclass = $oddcomment . ' ' . $authorcomment;
}else{
$authorcomment = '';
$commentclass = $oddcomment;
}//endif
?>
<?php $comment_type = get_comment_type(); ?>
<?php if($comment_type == 'comment') { ?>

I offer my comments page in its entirety. If you have any questions about it or if you want to use any part of it (such as the comment guidelines) just comment!

{Download comments.txt}

{21 comments}

Stay up to Date

1020 tweeps are following me on Twitter, you should too!

Add my RSS feed to your favorite reader, 317 have subscribed so far!

Click to skip down and add your comment

Carrie twitter: @carrieactually

thanks. i really like how your comment form includes a box for twitter id and i had downloaded the plugin but couldn’t figure out how to make it look nice. being able to see your code i’ll be able to get it worked out.
{shared blog entry — Free iTunes Awesomeness: Nothing Suits Me Like a Suit}

FB @ FabulouslyBroke.com twitter: @brokeinthecity

Thanks so much for the tip on how your comments page is formatted with the Twitter ID!

What a great idea
{shared blog entry — One Dollar Bill Y’all…}

Damita twitter: @damita

Wow thanks for sharing hun :)
{shared blog entry — Yet more snow…}

Damita twitter: @damita

Can I use it at digital-damita.net?? Also I can’t seem to get cufon keeps saving that I haven’t choose a font when I have any ideas?
{shared blog entry — Yet more snow…}

Sarah twitter: @starrymom

@Carrie also remember that you can style your form elements to make it look even better! I like the twitter field since twitter is so prevalent these days.

@FB you are so very welcome! I like to think I do things slightly differently around here, at least enough so that when I do posts like this, it helps someone out!

@Damita with Cufon 1. are you converting the font properly 2. putting the font.js file in the proper place

Of course I would prefer you customize it a bit/link back for credit, remove my img link lol but of course you can use it!

Carrie twitter: @carrieactually

any ideas how to get it to save the twitter id if it’s been previously entered so that it already shows up as filled in?
{shared blog entry — Free iTunes Awesomeness: Nothing Suits Me Like a Suit}

Sarah twitter: @starrymom

@Carrie you would manually have to do that via say PHPmyAdmin or enable cookies OR if you use firefox for your browser, I like the easyComment addon.

Generally most browsers should save entered form information so that it shows up automatically.

Carrie twitter: @carrieactually

i use firefox and it saves all the other fields but not the twitter id
{shared blog entry — Free iTunes Awesomeness: Nothing Suits Me Like a Suit}

Caitlin twitter: @caityliz

I love this, thank you! I only have one question — how do you get your comments to be a different color than everyone else?

Caity twitter: @caitysparkles

THANK YOU SO MUCH!!! <3

Sarah twitter: @starrymom

@Carrie I tried to duplicate the issue you’re having with the twitter id on my box and sure enough firefox saved the field for me. I wonder if it’s a cookie issue or something perhaps?

@Caitlin I explained in the entry on how to have it set a special CSS class for the author of the entry, it’s all contained as well, in the comments.txt file.

@Caity you are very welcome!

Caitlin twitter: @caityliz

Thanks Sarah, I think I missed it. That’s what happens when you try to play around late at night ;)

Tom twitter: @codenamepapa

Comments. Jeesh. This section alone has taken up most of my attention during the last 3 days of my theming time.

I looked at your comments.txt (is this your comments.php renamed for viewing?) and I don’t recognize a bit of it.

What I’m working on (just for styling the comment area) is the setup from here:
http://cdharrison.com/2008/12/03/threaded-comments/

Q1 — how/where do YOU classes to the php/html for your comment area?

Q2 — “how do I style the twitter id field once it’s displayed in the comments area?” — and/or “how do I tell WP ‘the info from this twitter form should be given this styling class’?”

Your id’s and classes in your comments section (I checked them out with firebug :) are basic and descriptive — the ones I’m working with suck. And I can’t really “see” what info it’s getting from the db, I just have to crap around w/Firebug and “reverse engineer” my styling.

wp_list_comments is what I have in my comments.php that actually “brings” the HTML output — and I can’t find any other location in my WP install that contains the rest of the mystery — do you use wp_list_comments or are you “rolling your own” comments page via php commands you’ve specified?

PS — not going to make my Feb 1 deadline. bah. it’s not for lack of effort, though.
{shared blog entry — Rag Quilt}

Tom twitter: @codenamepapa

…and now that I’ve spent ~1 hour searching for the answer and typing the above comment, I seem to have figured it out for myself by just tinkering w/ the plugin settings. jeesh.

Sorry if you got excited about the chance to answer all those questions, you may proceed if you’d like (I am curious how you’ve done the back-end class designations) but it’s no emergency, I can continue to live in ignorance — it’s not like I don’t have more to sort out. ha.
{shared blog entry — Rag Quilt}

Sarah twitter: @starrymom

@Tom yep that is my comments.php! I think mine are more “descriptive” because I coded from ground up. Everything for the most part is in my CSS, with the exception of lazy coding when it comes to areas like the “stay up to date” for example.

I do NOT use wp_list_comments but have each section broken down. So author here, avatar there, comment over there… etc.

Penny twitter: @iCouldbeFake

I’m glad I read thru all the comments here. I thought I was the only person left in the blogosphere NOT using wp_list_comments.
{shared blog entry — How NOT to comment on blogs}

Sarah twitter: @starrymom

I actually made a custom function now so technically I NOW use wp_list_comments but with the same stuff as in that text file up for grabs.

So in my CURRENT comments.php I pull it as such

<?php wp_list_comments('style=div&
callback=osn_comment'); ?>

Tom twitter: @codenamepapa

ONE more question — how do you get the ” t ” twitter icon in front of the commenter’s twitter id link?

I tried setting it up on the twitterlink plugin page, and I keep getting the message “Some HTML tags were stripped (not in list of allowed tags)”

Sarah twitter: @starrymom

@Tom, I actually edited the plugin to do that.

Nadia twitter: @funwithmama

I love your comments page, its gorgeous! I’d love to know how to have the same set up except with different colors.… or maybe the colors do go with my site i dont know..
the only change I would make is that I wouldn’t want the postcard part, i would just want a white box. Your site is such a valuable resource and i am so glad i found it! (from the problogger sitsgirl challenge).

My wordpress site isn’t live, its still in the test stage.. I’d love your help though! :)
{shared blog entry — Toddler Racket Ball}

Sarah twitter: @starrymom

Thank you! Well this entry basically offers a download to “copy” what I’ve done with my comments page.

Feel free to ask any questions and if you need help with anything, I am available for hire!

Commenting Guidelines

Basics

Once your comment is posted it then is the property of OSN. I can edit, format, reuse or delete the comment as I wish, or display it for as long as I wish. I will not necessarily offer reasons or any warning why I have altered or deleted a comment.

Occasionally your comment may be held for moderation, it's not done on purpose, but sometimes WordPress may be confused, I will manually approve your comment as soon as I can, and apologize for the delay.

Email Addresses

Correct email addresses are required. Email addresses will never be published. Email addresses will not be shown in comments. Please leave your correct email address (as in youNOSPAM@domain.com or youREMOVE@domain.com are not correct) it is so I have the ability to reply to your comment via email. I will edit out the NOSPAM or REMOVE in the email field.

What is not acceptable

Profanity, poor spelling and grammar, personal attacks, and off-topic comments.

Avatars

The avatars that are shown are via Gravatar. If you do not have one associated with your email address it will show a default image, however I suggest you sign up to get one since many blogs use this feature!

Commenting Additions You may use the following mark-up within your comments. I only permit XHTML mark-up at this time. Line breaks are converted automatically.
(<em> <del> <strong> <pre> <code> <blockquote>)