How to create wordpress theme from scratch, lesson -13-: the comments template
July
10
C
omments template is the last lesson of this tutorial. I will add later some more lessons about wordpress them but they are optional. mostly all blogs allow readers to add comments and in my opinion it is important for both readers and the writer in every blog. Most of the designers use the default theme of wordpress or modify it as they want, I will post my modified comments template from wordpress them. Now, let’s begin…
Step *1: create a new php file using any editor and name it comments.php.
Copy this code and past it in it and save.
<?php //don't change anything in here
if ('comments.php' == basename($_SERVER['SCRIPT_FILENAME'])) die ('Please do not load this page directly. Thanks!');
if (!empty($post->post_password)) { // if there's a password
if ($_COOKIE['wp-postpass_' . COOKIEHASH] != $post->post_password) { // and it doesn't match the cookie
?>
<h2><?php _e('Password Protected'); ?></h2>
<p><?php _e('Enter the password to view comments.'); ?></p>
<?php return;
}
}
$oddcomment = 'alt';
?>
<!-- You edit from here. -->
<?php if ($comments) : ?>
<h3 id="comments"><?php comments_number('No Responses', 'One Response', '% Responses' );?> to “<?php the_title(); ?>”</h3>
<ol>
<?php foreach ($comments as $comment) : ?>
<li class="<?php
/* Only use the authcomment class from style.css if the user_id is 1 (admin) */
if (1 == $comment->user_id)
$oddcomment = "authcomment";
echo $oddcomment;
?>"id="comment-<?php comment_ID() ?>">
<div class="commentmetadata">
<strong><?php comment_author_link() ?></strong>, <?php _e('on'); ?> <a href="#comment-<?php comment_ID() ?>" title=""><?php comment_date('F jS, Y') ?> <?php _e('at');?> <?php comment_time() ?></a> <?php _e('Said:'); ?> <?php edit_comment_link('Edit Comment','',''); ?>
<?php if ($comment->comment_approved == '0') : ?>
<em><?php _e('Your comment is awaiting moderation.'); ?></em>
<?php endif; ?>
</div>
<?php comment_text() ?>
</li>
<?php
if ('alt' == $oddcomment) $oddcomment = '';
else $oddcomment = 'alt';
?>
<?php endforeach; ?>
</ol>
<?php else : ?>
<?php if ('open' == $post->comment_status) : ?>
<?php else : ?>
<p>Comments are closed.</p>
<?php endif; ?>
<?php endif; ?>
<?php if ('open' == $post->comment_status) : ?>
<div id="comment-back">
<h3 id="respond" style="text-align:center">Leave a Reply</h3><br />
<?php if ( get_option('comment_registration') && !$user_ID ) : ?>
<p>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">
<?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 : ?>
<label for="author" class="form-author"><small>Name <?php if ($req) echo "(required)"; ?></small></label>
<p align="left" style="padding-left:10px"><input name="author" value="<?php echo $comment_author; ?>" size="40" tabindex="1" /></p>
<label for="email" class="form-email"><small>Mail (will not be published) <?php if ($req) echo "(required)"; ?></small></label>
<p align="left" style=" padding-left:10px"><input id="email" value="<?php echo $comment_author_email; ?>" size="40" tabindex="2" /></p>
<label for="url" class="form-url"><small>Website</small></label>
<p align="left" style="padding-left:10px"><input name="url" value="<?php echo $comment_author_url; ?>" size="40" tabindex="3" /></p>
<?php endif; ?>
<!--<p><small><strong>XHTML:</strong> <?php _e('You can use these tags:'); ?> <?php echo allowed_tags(); ?></small></p>-->
<p><textarea name="comment" cols="57" rows="10" tabindex="4"></textarea></p>
<br />
<p align="center"><input name="submit" tabindex="5" value="Submit Comment" />
<input name="comment_post_ID" value="<?php echo $id; ?>" />
</p>
<br />
<?php do_action('comment_form', $post->ID); ?>
</form>
<?php endif; ?>
<?php endif; ?>
</div>
Step *2: now I will style the comment area using CSS, so add this CSS code to style.css, and save.
/* comments */
.comments-template{
margin: 10px 0 0;
border-top: 1px solid #ccc;
padding: 10px 0 0;
}
.comments-template ol{
margin: 0;
padding: 0 0 15px;
list-style: none;
}
.comments-template ol li{
margin: 10px 0 0;
line-height: 18px;
padding: 0 0 10px;
border:thin;
border-style:inset;
border-color:#ecfbbe;
background-color:#faefbf;
}
.comments-template h2, .comments-template h3{
font-family: Georgia, Sans-serif;
font-size: 16px;
}
.commentmetadata{
font-size: 12px;
background-color:#fae394;
border:medium;
border-style:groove;
border-color:#ecfbbe;
}
.comments-template p.nocomments{
padding: 0;
}
.comments-template textarea{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
}
I won’t talk much about the comment template, but since it is modified from the default theme in wordpress so you can find all the information you want from http://codex.wordpress.org/Main_Page
Step *3: in single.php file, type this code under the entry div, and save.
<div class=”comments-template”> <?php comments_template(); ?> </div>
This function is used to call the comments template.
Now we finished from the main parts that allow you to create your own wordpress theme, good luck with your own theme and keep passing by my blog for more info, seeya.
Hey! Nice tutorial again! And i absolutely love the ‘by Web Designer…’ picture… it gives it a unique and personal look! And im looking forward to your next tutorial. Can you give a sneak peek about what’s it about?
hey, deadmad, welcome here in my blog…glade you passed me by…
my next tutorial is mostly about php…
keep in touch friend and
“thank you for sharing”
hahaha… aren’t you the one who is sharing?
anyways, I’ll be glad to know some php!
thank you. Worked like a charm
thanks for your nice comment…keep on visiting…
Thanks a good deal! I truly enjoyed reading this.Looking through these posts and the information you’ve provided I can appreciate that I still have a lot of things to learn. I will keep reading and keep re-visiting.
thanks a lot…you are welcomed here…
…
i hope you like my new tutorial too..and just remember as long as you are keep on learning, everything gonna look easier by time…keep on visiting
You made a number of nice points there. I did a search on the matter and found nearly all persons will go along with with your blog. Btw I love your style
I found your website while stumbuling. It helped me do my research on this topic. I have read most of them and got a lot from them. To me, you are doing the great work.
I’ve gone through your blog. Happy I returned another time. Good reading, thanks.
My husband just told me about your site. He saved it on the computer so I could look at it and I must say you’ve got some awesome stuff here. Sorry I don’t have much more to contribute, but I just wanted to offer up some encouragement.
This is best blog.
I used to be very happy to find this net-site.I needed to thanks for your time for this wonderful read!! I definitely having fun with every little bit of it and I’ve you bookmarked to take a look at new stuff you blog post.
I love the way you sound so passionate about what you are writing. Keep up the great work!
I am extremely impressed with your writing skills and also with the layout on your blog. Is this a paid theme or did you customize it yourself? Either way keep up the nice quality writing, it’s rare to see a nice blog like this one these days..
Thanks a lot for that extremely cool post.
Dude this blog rules i cant believe i finally found what i was looking for, thanks bro.
I just StumbledUpon this. Not bad. I’ll give it a thumbs up.
I can see that you put allot of time and effort into your blog and I admire the detailed information that you posted. I will bookmark your blog and come back to read for more! Thanks for a great read!
I can see that you put allot of time and effort into your blog and I admire the detailed information that you posted. I will bookmark your blog and come back to read for more! Thanks for a great read!
Hey very nice blog!! Man .. Beautiful .. Amazing .. I will bookmark your blog and take the feeds also…
Your blog is breathtaking. Most of the stuff on your page are my consent about. Thank you for sharing.
Great post! Also your website loads up fast! What web host are you using? I wish my site loaded up as fast as yours lol
have an excellent day all of you ! the information in that blog is awesome
*:’ I am really thankful to this topic because it really gives great information ~-,
thanks a lot…it is my goal, to spread knowledge…:)
You actually put a different spin at a topic thats been written about frequent. Great stuff, just great!
obviously like your web-site but you have to check the spelling on several of your posts. Several of them are rife with spelling problems and I find it very troublesome to inform the truth on the other hand I’ll surely come back again.
Great items from you, man. I have consider your stuff previous to and you are just extremely wonderful. I really like what you’ve obtained right here, really like what you are saying and the way in which during which you are saying it. You are making it entertaining and you still take care of to keep it smart. I can’t wait to read much more from you. That is really a tremendous site.
Certainly using your thoughts here and I like your blog! I’ve bookmarked it to ensure that I can keep coming back & read more later on.
thanks please do so…
thank you for your nice words …i promise to do my best…
and by the way i am a female web designer not a man …
sorry about that…but my first language is not english..:) i will try to do my best and watch my spelling more.. keep in touch and you will see that yourself…
I really enjoy examining on this site, it has got great content . “We find comfort among those who agree with us–growth among those who don’t.” by Frank A. Clark.
this theme is made by me from scratch, and if you need a one like this just send me an email and i can make you a one.