Message-Id: <20100402061635.BCD2D30701C3@node2.byetcluster.com> Date: Fri, 2 Apr 2010 02:16:35 -0400 (EDT) From: root@admin2.byetcluster.com (root) Welcome to photo Art:

Advanced WordPress Comment Styles

Comments are gold. There’s little a blogger loves more than to wager a whole itemize of comments posted on his/her article. It’s enthusiastic to know people poverty to engage with you, and they crapper add a aggregation to an article.

However, if comments are not ended well, they crapper be difficult to read and follow, or even meet downright boring.

What we’re feat to do first is create a bespoken interpret asking that allows us to take the artefact the comments are output, then lay discover the scheme for the interpret itemize and state form, add extra functionality much as author-only styles, compel interpret subscription options a nd spam protection, and, finally, we’ll add pleasant CSS styling to everything we’ve done.

We module be employed with the default WordPress theme in order to attain everything easy to follow, and to secure everyone crapper study along. We module also be ignoring every styling elements until the rattling end, so if it looks bad, meet be patient!

An important note to advert is that anytime I refer to distinction numbers, I’m referring to the distinction numbers of the cipher I posted, not the distinction numbers in your files.

1 – Create Custom Comment Callback

The interpret asking is meet a artefact of informing WordPress what HTML to ness discover for your comments.

Rather than disagreeable to add the choice theme’s existing interpret callback, we’re feat to create our own, by adding this to functions.php:

1234567891011121314151617181920212223242526 <?php //this duty module be called in the incoming sectionfunction advanced_comment($comment, $args, $depth) { $GLOBALS['comment'] = $comment; ?> <li <?php comment_class(); ?> id="li-comment-<?php comment_ID() ?>"> <div class="comment-author vcard"> <?php echo get_avatar($comment,$size='48',$default='<path_to_url>' ); ?> <div class="comment-meta"<a href="<?php the_author_meta( 'user_url'); ?>"><?php printf(__('%s'), get_comment_author_link()) ?></a></div> <small><?php printf(__('%1$s at %2$s'), get_comment_date(), get_comment_time()) ?><?php edit_comment_link(__('(Edit)'),' ','') < span>?></small> </div> <div class="clear"></div>  <?php if ($comment->comment_approved == '0') : ?> <em><?php _e('Your interpret is awaiting moderation.') ?></em> <br /> <?php endif; ?>  <div class="comment-text"> <?php comment_text() ?> </div>  <div class="reply"> <?php comment_reply_link(array_merge( $args, array('depth' => $depth, 'max_depth' => $args['max_depth']))) ?> </div> <div class="clear"></div><?php } ?>

What this cipher does is take exactly how we poverty each, individualist interpret to be displayed. This allows us to delimitate bespoken class/id settings for apiece surroundings as well, rather than existence bound to the choice theme’s settings.

2 – Lay Out Your Template File

The cipher in the previous section created the scheme for individualist comments, now we requirement to lay discover the scheme for the actual comments page, on which every of the comments module be displayed (Including the interpret form).

If your comments.php< /strong> has anything in it already, replace it with the cipher below. I hit included comments throughout the cipher to vindicate a some essential details.

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192<?php/** * @package WordPress * @subpackage Default_Theme */ // Do not withdraw these linesif (!empty($_SERVER['SCRIPT_FILENAME']) && 'comments.php' == basename($_SERVER['SCRIPT_FILENAME']))die ('Please do not alluviation this page d irectly. Thanks!'); if ( post_password_required() ) { ?><p class="nocomments">This locate is countersign protected. Enter the countersign to view comments.</p><?phpreturn;}?> <!-- You crapper start editing here. --> <?php if ( have_comments() ) : ?><h3 id="comments"><?php comments_number('No Responses', 'One Response', '% Responses' );?> to &#8220;<?php the_title(); ?>&#8221;</h3> <ol class="commentlist"><?php wp_list_comments('type=comment&callback=advanced_comment'); //this is the essential conception that ensures we call our bespoken interpret layout circumscribed above ?></ol><div class="clear"></div><div class="comment-navigation"><div class="older"><?php previous_comments_link() ?></div><div class="newer"><?php next_comments_link() ?></div></div> <?php else : // this is displayed if there are no comments so far ?> <?php if ( comments_open() ) : ?><!-- If comments are open, but there are no comments. -->  <?php else : // comments are closed ?><!-- If comments are closed. --><p class="nocomments">Comments are closed.</p> <?php endif; ?><?php endif; ?>  <?php if ( comments_open() ) : ?> <div id="respond"> <h3><?php comment_form_title( 'Leave a Reply', 'Leave a Reply to %s' ); ?></h3> <div class="cancel-comment-reply"><small><?php cancel_comment_reply_link(); ?></small></div> <?php if ( get_option('comment_registration') && !is_user_logged_in() ) : ?><p>You must be <a href="<?php echo wp_login_url( get_permalink() ); ?>">logged in</a> to locate a comment.</p><?php else : ?> <form action="<?php echo get_option('siteurl' ); ?>/wp-comments-post.php" method="post" id="commentform"> <?php if ( is_user_logged_in() ) : ?> <p>Logged in as <a href="<?php echo get_option('siteurl'); ?>/wp-admin/profile.php"><?php echo $user_identity; ?></a>. <a href="<?php echo wp_logout_url(get_permalink()); ?>" title="Log discover of this account">Log discover &raquo;</a></p> <?php else : //this is where we setup the interpret signaling forums ?> <p><input type="text" name="author" id="author" value="<?php echo esc_attr($comment_author); ?>" size="22" tabindex="1" <?php if ($req) echo "aria-required='true'"; ?> /><label for="author"><small>Name <?php if ($req) echo "(required)"; ?></small></label></p> <p><input type="text" name="email" id="email" value="<?php echo esc_attr($comment_author_email); ?>" size="22" tabindex="2" <?php if ($req) echo "aria-required='true'"; ?> /><label for="email"><small>Mail (will not be published) <?php if ($req) echo "(required)"; ?></small></label></p> <p><input type="text" name="url" id="url" value="<?php echo esc_attr($comment_author_url); ?>" size="22" tabindex="3" /><label for="url"> 0;small>Website</small></label></p> <?php endif; ?> <!--<p><small><strong>XHTML:</strong> You crapper use these tags: <code><?php echo allowed_tags(); ?></code></small></p>--> <p><textarea name="comment" id="comment" cols="100%" rows="10" tabindex="4"></textarea></p> <p><input name="submit" type="submit" id="submit" tabindex="5" value="Post" /><?php comment_id_fields(); ?></p><?php do_action('comment_form', $post-&# 62;ID); ?> </form> <?php endif; // If entrance required and not logged in ?></div> <?php endif; // if you withdraw this the sky module fall on your head ?>

If you requirement support discernment the determine of anything in comments.php, analyse discover the article on Net Tuts about unraveling comments.php.

3 – Enable Nested Comments

People hit integrated feelings about threaded comments, but they crapper be quite multipurpose in organizing the discussion flow. This travel is entirely optional and won’t break anything if you opt not to enable nested comments.

Assuming you do desire to enable them, you requirement to go to your WordPress Dashboard and click on Settings > Discussion > Enable thr eaded (nested) comments # levels deep (i.e. how many nowadays crapper you state to a reply).

4 – Make the Author Stand Out

Particularly multipurpose for people who write tutorials and requirement to answer questions from their readers, this bit of cipher module attain any interpret left by the author of the article stand discover from the community’s comments.

Newer WordPress versions attain this rattling easy. They module automatically add destined CSS classes to comments (Assuming that you used the <php comment_class(); ?> tag that we mentioned in travel 1).

To call the comments, meet add CSS rules for the following classes:

  • byuser - For comments left by any registered individual on the site.
  • < li>bypostauthor – For comments left by the author of the underway locate (Very multipurpose for styling comments by temporary authors on their own posts, but not on any other posts)
  • comment-author-name – Where “name” is the user’s name. This crapper be good for styling comments from an individualist user, e.g. comment-author-admin

For an senior method of doing this manually (Allowing you to call comments based on specific emails existence used), analyse discover this post.

5 – Disable Comments on Old Posts

This crapper be ended finished the WordPress settings, under Discussion, but in case you’d same to do this automatically from within the theme, locate this cipher in your functions.php:

1234567891011<?php function close_comments( $posts ) {if ( !is_single() ) { return $posts; }if ( time() - strtotime( $posts[0]->post_date_gmt ) > ( 30 * 24 * 60 * 60 ) ) {$posts[0]->comment_status = 'closed';$posts[0]->ping_status = 'closed';}return $posts;}add_filter( 'the_posts', 'close_comments' ); ?>

This piece was originally posted by Jeff Star at Perishable Press.

The essential conception is the “30 * 24 * 60 * 60.” That effectuation 60 seconds, time 60 minutes, nowadays 24 hours, nowadays 30 days. So if you desired to attain it happen after 3 months, you could change the first 30 to a 90.

This could be multipurpose for thought developers who would same to attain “Commenting on Old Posts Disabled” a feature of their theme.

6 – Subscribe to Comments

Often nowadays a reader module ask a support question via locate comments. Receiving an email whenever another interpret is posted is a much easier artefact for that reader to know an answer has been posted than manually check ing every now and then (if they even advert to do that).

Subscribe to Comments by Mark Jaquith is a enthusiastic plugin that adds a unification to subscribe to further comments meet below the communication box of the comments page. It also includes a subscription manager that is placed under Tools in your WordPress Dashboard, allowing users to unsubscribe from posts at any time.

We module call this button in the last section.

7 – Add Extra Moderation Links

Even with anti-spam protection, you module occasionally hit comments that you requirement to mark as spam or withdraw entirely, so lets add links that allow us to do so. This module allow us to moderate comments from the website itself, not meet the dashboard.

First add this to your functions.php

1234567<?php function delete_comment_link($id) { if (current_user_can('edit_post')) { echo '<a href="'.admin_url("comment.php?action=cdc&c=$id").'">del</a> '; echo '<a href="'.admin_url("comment.php?action=cdc&dt=spam&c=$id").'">spam</a>'; }}?>

Next, put this cipher in functions.php after line 24 of the bespoken asking duty we created in section 1.

1 <?php delete_comment_link(get_comment_ID()); ?>

like so:

1234<div class="reply"> <?php comment_reply_link(array_merge( $args, array('depth' => $depth, 'max_depth' => $args['max_depth']))) ?> <?php delete_comment_link(get_comment_ID()); ?></div>

Your outcome should countenance something same this:

extra teenager links

Thanks goes to Joost de Valk for this enthusiastic snippet.

8 – Add an Extra Layer of Spam Protection

Spammers are ever a problem, even though there are a whole slew of plugins to protect against them. This example of cipher module add an extra barrier that they hit to break through. Essentially what it does is block any interpret that does not hit a referrer (i.e. where the individual came from previously) in the posting request, which is usually indicative of bots.

Paste this into your functions.php

12345678<?php function check_referrer() { if (!isset($_SERVER['HTTP_REFERER']) || $_SERVER['HTTP_REFERER'] == ) { wp_die( __('Please enable referrers in your browser, or, if you\'re a spammer, get discover of here!') ); }} add_action('check_comment_flood', 'check_referrer'); ?>

This snipped was also from From Joost de Valk. There is a quantity you could block some lawful users though, but if spam is decent a major issue, it’s worth considering.

9 – Add Comment Feed Link

To pass a unification to your comments RSS feed, paste this somewhere in your comments.php file:

1<?php comments_rss_link('Subscribe to Comments via RSS'); ?>

One of the best places would be immediately after the interpret signaling forums.

12345678910<p><textarea name="comment" id="comment" cols="100%" rows="10" tabindex="4"></textarea></p><small>Allowed tags: <?php echo allowed_tags(); ?></small> <p><input name="submit" type="submit" id="submit" tabindex="5" value="Post" /><?php comment_id_fields(); ?></p><?php do_action('comment_form', $post->ID); ?> </form> <div class="comment-rss"><?php co mments_rss_link('Subscribe to Comments via RSS'); ?></div>

10 – Display Allowed Tags

Bold text crapper really support people’s points stand out in their comments, meet as italics crapper be enthusiastic for things same addresses and nonachievement messages (404: Not Found). Letting your readers know they are allowed to use destined HTML tags in their messages crapper be a real help.

Paste this:

1Allowed tags: <?php echo allowed_tags(); ?>

in your comments.php. I hit put it meet above the textarea and placed “small” tags around it.

123<p><textarea name="comment" id="comment" cols="100%" rows="10" tabindex="4"></textarea></p> < small>Allowed tags: <?php echo allowed_tags(); ?></small> <p><input name="submit" type="submit" id="submit" tabindex="5" value="Post" />

It should become discover looking something same this:

allowed tags

This piece comes from Net Tuts.

11 – Show Total Number of Comments

If you’d same to pass the amount sort of comments posted sitewide, put this piece anywhere in your theme’s template files, much as header.php

12<?php $numcomms = $wpdb->get_var("SELE CT COUNT(*) FROM $wpdb->comments WHERE comment_approved = '1'"); if (0 < $numcomms) $numcomms = number_format($numcomms); echo "There's <span>".$numcomms."</span> amount comments on "; bloginfo('name'); ?>

It module be displayed as something same There’s 1534 amount comments on your website name. The “span” tags around “.$numcomms.” are there so we crapper emphasize the sort of comments with CSS later. I hit also wrapped the cipher in div tags same so:

1234<div class="comment-total"> <?php $numcomms = $wpdb->get_var("SELECT COUNT(*) FROM $wpdb->comments WHERE comment_approved = '1'"); if (0 < $numcomms) $numcomms = number_format($numcomms); echo "There's <span>".$numcomms."</span> amount comments on "; bloginfo('name');?></div>

This piece comes from Hiroshi at PHP Magic Book

12 – Add Some CSS

After everything we hit done, your result should countenance pretty similar to the choice thought here.

Obviously this is no good, so we poverty to get a little happy with the CSS.

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152/****************advanced interpret styles****************/ h3#comments,.comment-navigation,.comment-navigation:after,#respond:after,.comment-rss{display:block} ol.commentlist{width:100%} h3#comments,#respond h3{height:25px;text-align:left;background:#4c7faa;color:#fff;padding:5px 0 0 5px} ol.commentlist,li.authorcomment,li.comment,#respond h3,form#commentform,input#submit{margin:0}ol.commentlist,ol.commentlist ul,form#commentform{padding:0} ol.commentlist{border-bottom:1px solid #ccc} ol.commentlist ul{margin:0 0 0 20px} li.authorcomment,li.comment,form#commentform textarea,form#commentform input{border:1px solid #ccc}li.authorcomment,li.comment{padding:10px 0 0 10px;list-style:none;border-bottom:none} li.even{background:#fff} li.odd{background:#efefef} .authorcomment{background:#deebf9} ul.ch ildren ul{margin-left:20px} ul.children li{border-right:none} .vcard img{float:left;background:#c4c4c4} .vcard img,.comment-navigation .newer a,.comment-navigation .older a{padding:5px} .comment-meta,ol.commentlist li small,p.subscribe-to-comments label{position:relative} .comment-meta,ol.commentlist li small{top:10px;left:10px} .comment-text{margin:0 10px 0 0} .reply,.comment-navigation .newer,input#submit{float:right} .reply,.comment-navigation .newer a,.comment-navigation .older a,input#submit{background:#4c7faa} .reply{margin:0 10px 10px 0} a.comment-reply-link,.reply a:link,.comment-navigation .newer a,.comment-navigation .older a,input#submit{display:inline-block;text-align:center;cursor:pointer;color:#fff} a.comment-reply-link,.reply a:link{padding:5px 0} a.comment-reply-link,.reply a:link,input#submit{width:70px} a.comment-reply-link:hover,.reply a:hover,.comment-navigation .newer a:hover,.comment-navigation .older a:hover,input#submit:hover{background:#e7e7e7;text-decoration:none;color:#4c7faa;font-weight:bold} a.comment-reply-link:hover,.reply a:hover,input#submit:hover{width:68px} a.comment-reply-link:hover,.reply a:hover{padding:4px 0} a.comment-reply-link:hover,.re ply a:hover,.comment-navigation .newer a:hover,.comment-navigation .older a:hover{border:1px solid #4c7faa} .comment-navigation{margin:10px 0 10px 0} .comment-navigation:after,#respond:after{content:".";height:0;visibility:hidden} .clear{clear:both} .comment-navigation .newer a:hover ,.comment-navigation .older a:hover{padding:4px} form#commentform textarea,form#commentform input{padding:2px 3px} form#commentform textarea{width:442px} input#submit{padding:5px 0 !important;border:0 !important} input#submit,p.subscribe-to-comments input{outline:0} input#submit:hover{padding:4px 0 !important;border:1px solid #4c7faa !important} p.subscribe-to-comments{background:url('images/email_32.png') no-repeat} p.subscribe-to-comments,.comment-rss{height:32px;text-indent:42px;padding:5px 0 0 0} p.subscribe-to-comments input{margin:5px 3px 3px 3px !important;border:0} p.subscribe-to-comments label{top< span>:-2px;color:#666} .comment-rss{background:url('images/rss_32.png') no-repeat}  /*comment amount stlying*/ .comment-total{text-align: center;font-size: 1.5em;color: #fff;}.comment-total span{font-size: 2em;color: #800000;}

You crapper wager my ended modification of the choice thought comments page here.

Because there are a some things only visible to the place admin, here’s a screenshot o f the logged-in admin view:

admin view of ended choice thought mod

The CSS above is cursive much that this could every be incorporated into almost any, if not all, themes without more than a some small modifications, so don’t see same you’re stuck with the choice theme!

To attain it easier on you, see free to download every the files for my modified choice thought here.

13 – Going Further

We’ve covered a aggregation of ground here, but if you’d same to go even further with your site’s comments, here are some links for further reading:

  • Adding Form Validation to WordPress Comments Using jQuery
  • Numbering Your Comments, Pingbacks, Trackbacks, or All
  • Hack Together a User Contributed Link Feed With WordPress Comments
  • How to Rearrange WordPress Comments: Latest on Top
  • Plugin: AJAX Edit Comments 2.0
  • Separating Trackbacks from Comments

================================================================ Special offer: Free Domain & cPanel Hosting for only $2.99 at https://SecureSignup.net ! ================================================================ Spam Filtered (ID:5365732)