So, i was recently working on a new wordpress theme which had to be completed within a tight timeframe. I decided to download a comments.php template to save me some time. However, what i was looking for was some styling to go along with the comments.php template. After looking for a little while and not finding anything i decided to write the CSS myself.
So, if you ever run into the same problem here is a nice comments.php template taken from http://www.christianmontoya.com along with some very simple CSS to get you started.
If you already have a comments.php template in place, remember to make a back-up copy before making any changes. It could save you a big head-ache if anything goes wrong!
The end result:
As you can see it’s a very simple but clean result, it should at least be a good starting point for your comments template.
The Code
Save this as ‘comments.php’ into your theme directory.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 |
<?php
/* This is comment.phps by Christian Montoya, http://www.christianmontoya.com
Available to you under the do-whatever-you-want license. If you like it,
you are totally welcome to link back to me.
Use of this code does not grant you the right to use the design or any of the
other files on my site. Beyond this file, all rights are reserved, unless otherwise noted.
Enjoy!
*/
?>
<!-- Comments code provided by christianmontoya.com -->
<?php if (!empty($post->post_password) && $_COOKIE['wp-postpass_'.COOKIEHASH]!=$post->post_password) : ?>
<p id="comments-locked">Enter your password to view comments.</p>
<?php return; endif; ?>
<?php if ($comments) : ?>
<?php
/* Author values for author highlighting */
/* Enter your email and name as they appear in the admin options */
$author = array(
"highlight" => "highlight",
"email" => "YOUR EMAIL HERE",
"name" => "YOUR NAME HERE"
);
/* Count the totals */
$numPingBacks = 0;
$numComments = 0;
/* Loop throught comments to count these totals */
foreach ($comments as $comment) {
if (get_comment_type() != "comment") { $numPingBacks++; }
else { $numComments++; }
}
/* Used to stripe comments */
$thiscomment = 'odd';
?>
<?php
/* This is a loop for printing pingbacks/trackbacks if there are any */
if ($numPingBacks != 0) : ?>
<h2 class="comments-header"><?php _e($numPingBacks); ?> Trackbacks/Pingbacks</h2>
<ol id="trackbacks">
<?php foreach ($comments as $comment) : ?>
<?php if (get_comment_type()!="comment") : ?>
<li id="comment-<?php comment_ID() ?>" class="<?php _e($thiscomment); ?>">
<?php comment_type(__('Comment'), __('Trackback'), __('Pingback')); ?>:
<?php comment_author_link(); ?> on <?php comment_date(); ?>
</li>
<?php if('odd'==$thiscomment) { $thiscomment = 'even'; } else { $thiscomment = 'odd'; } ?>
<?php endif; endforeach; ?>
</ol>
<?php endif; ?>
<?php
/* This is a loop for printing comments */
if ($numComments != 0) : ?>
<h2 class="comments-header"><?php _e($numComments); ?> Comments</h2>
<ol id="comments">
<?php foreach ($comments as $comment) : ?>
<?php if (get_comment_type()=="comment") : ?>
<li id="comment-<?php comment_ID(); ?>" class="<?php
/* Highlighting class for author or regular striping class for others */
/* Get current author name/e-mail */
$this_name = $comment->comment_author;
$this_email = $comment->comment_author_email;
/* Compare to $author array values */
if (strcasecmp($this_name, $author["name"])==0 && strcasecmp($this_email, $author["email"])==0)
_e($author["highlight"]);
else
_e($thiscomment);
?>">
<div class="comment-meta">
<?php /* If you want to use gravatars, they go somewhere around here */ ?>
<span class="comment-author"><?php comment_author_link() ?></span>,
<span class="comment-date"><?php comment_date() ?></span>:
</div>
<div class="comment-text">
<?php /* Or maybe put gravatars here. The typical thing is to float them in the CSS */
/* Typical gravatar call:
<img src="<?php gravatar("R", 80, "YOUR DEFAULT GRAVATAR URL"); ?>"
alt="" class="gravatar" width="80" height="80">
*/ ?>
<?php comment_text(); ?>
</div>
</li>
<?php if('odd'==$thiscomment) { $thiscomment = 'even'; } else { $thiscomment = 'odd'; } ?>
<?php endif; endforeach; ?>
</ol>
<?php endif; ?>
<?php else :
/* No comments at all means a simple message instead */
?>
<h2 class="comments-header">No Comments Yet</h2>
<p>You can be the first to comment!</p>
<?php endif; ?>
<?php if (comments_open()) : ?>
<?php /* This would be a good place for live preview...
<div id="live-preview">
<h2 class="comments-header">Live Preview</h2>
<?php live_preview(); ?>
</div>
*/ ?>
<div id="comments-form">
<h2 id="comments-header">Leave a comment</h2>
<p class="commentsSmall"> Your email address will not be published. Required fields are marked. </p>
<?php if (get_option('comment_registration') && !$user_ID ) : ?>
<p id="comments-blocked">You must be <a href="<?php echo get_option('siteurl'); ?>/wp-login.php?redirect_to=
<?php the_permalink(); ?>">logged in</a> to post a comment.</p>
<?php else : ?>
<form action="<?php echo get_option('siteurl'); ?>/wp-comments-post.php" method="post" id="commentform">
<?php if ($user_ID) : ?>
<p>Logged in as <a href="<?php echo get_option('siteurl'); ?>/wp-admin/profile.php">
<?php echo $user_identity; ?></a>.
<a href="<?php echo get_option('siteurl'); ?>/wp-login.php?action=logout"
title="Log out of this account">Logout</a>
</p>
<?php else : ?>
<p class="commentformlabel"><label for="author">Name<?php if ($req) _e(' (required)'); ?></label></p>
<p><input type="text" class="commentText" name="author" id="author" value="<?php echo $comment_author; ?>" size="22" /></p>
<p class="commentformlabel"><label for="email">E-mail <?php if ($req) _e(' (required)'); ?></label></p>
<p><input type="text" class="commentText" name="email" id="email" value="<?php echo $comment_author_email; ?>" size="22" /></p>
<p class="commentformlabel"><label for="url">Website</label></p>
<p><input type="text" class="commentText" name="url" id="url" value="<?php echo $comment_author_url; ?>" size="22" /></p>
<?php endif; ?>
<?php /* You might want to display this:
<p>XHTML: You can use these tags: <?php echo allowed_tags(); ?></p> */ ?>
<p class="commentformlabel"><label for="comment">Comment</label></p>
<p><textarea name="comment" id="comment" rows="8" cols="70"></textarea></p>
<?php /* Buttons are easier to style than input[type=submit],
but you can replace:
<button type="submit" name="submit" id="sub">Submit</button>
with:
<input type="submit" name="submit" id="sub" value="Submit" />
if you like */
?>
<p><button type="submit" name="submit" id="sub">Submit</button>
<input type="hidden" name="comment_post_ID" value="<?php echo $id; ?>"></p>
<?php do_action('comment_form', $post->ID); ?>
</form>
</div>
<?php endif; // If registration required and not logged in ?>
<?php else : // Comments are closed ?>
<p id="comments-closed">Sorry, comments for this entry are closed at this time.</p>
<?php endif; ?> |
The CSS
Add this to your themes stylesheet (style.css or similar).
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
/*-------------------------------Comments-------------------------------*/
#commentform .commentformlabel {
margin-bottom:-14px;
}
div#comments-form h2#comments-header{
font-size:16px;
font-family:Tahoma, serifSansSerifMonospace;
}
div#comments-form .commentsSmall {
font-size:13px;
}
#comments li{
padding:20px 20px 5px 20px;
border:1px #d0d0d0 solid;
list-style:none;
background:#eeeeee url(images/commentbg.png) repeat-x;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
margin-left:-25px;
margin-top:13px;
margin-bottom:13px;
}
.commentText {
width:350px;
}
/*-------------------------------End Comments-------------------------------*/ |
Background image
As you can see in the CSS a background image is used for the actual comments. You can download that below or simply change it to an image of your preference.
