Make your Own WordPress Theme – Part 4

You are reading Make your Own WordPress Theme – Part 4. To read other parts, click on the link below.

In Part 4, we will learn steps taken to make our comments.php file. First I will show you how to create the layout for the comments and then we will put the tags needed.

This comments.php will be called by our index.php file when we view our entry in single or page. The function that will call the file is

<?php comments_template(); ?>

Note: This part is kinda tricky. So make sure you give 300% of consentration. :d

Comments Layout

What we are going to do now is to create our comments layout. We will make layout like this.

MyOWT---Part-4

Open your text editor and put this html code in and save it as comments.php.

<div id="comments">

<div class="comments_list">
comments list here
</div> <!-- close comments list -->

<div class="comments_form">
comments form here
</div> <!-- close comments form -->

</div> <!-- close comments -->

In comments_list, we will display the comments in ordered way. So we replace “comments list here” with ol and li. In li, we will put the comment author name and his comment.

<div class="comments_list">

<ol>
<li>
<div class="comments_author">
comments author here
</div> <!-- close comments_author -->
<div class="comments_text">
comments text here
</div>
</li>
</ol>

</div> <!-- close comments list -->

We will not touch our comments_form right now because we will just copy and paste the html + php code in it. It is not easy to explain how it works unless you have php background. ๐Ÿ™‚

Now we jump into the WordPress tags needed in our comments.php.

Put this code above our comments id

<?php // Do not delete these lines
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
?>
<p class="nocomments">This post is password protected. Enter the password to view comments.<p>
<?php
return;
}
}
/* This variable is for alternating comment background */
$oddcomment = 'alt';
?>

like this

<?php // Do not delete these lines
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
?>
<p class="nocomments">This post is password protected. Enter the password to view comments.<p>
<?php
return;
}
}
/* This variable is for alternating comment background */
$oddcomment = 'alt';
?>

<div id="comments">

Above <div class=”comments_list”>, we put the if function. If it is comment, WordPress will display the comment.

<?php if ($comments) : ?>

Put the above if function like this

<?php if ($comments) : ?>
<div class="comments_list">

The next thing that we will do is to loop the comments. We start looping after the <ol>. Put this loop, after the <ol> tag

<?php foreach ($comments as $comment) : ?>

and with this function

<?php endforeach; ?>

like this

<ol>
<?php foreach ($comments as $comment) : ?>

the <li> and </li> here. see below.

<?php endforeach; ?>
</ol>

Now we will focus in our loop. Put your eyes and mind on it. Ok? Good… :p Ok here is our comments list start with <li> and end with </li>.

  <li>
<div class="comments_author">
comments author here
</div> <!-- close comments_author -->
<div class="comments_text">
comments text here
</div> <!-- close comments_text -->
</li>

We replace our <li> with this

<li class=”<?php echo $oddcomment; ?>” id=”comment-<?php comment_ID() ?>”>

What it do is, the class will change to odd if the comment is odd number. So you can stylish your comments list with CSS.

Then for the comment author, we replace with this

<?php comment_author_link() ?>

This will display the author name with link to his website.

Next is we replace “comments text here” with

<?php comment_text() ?>

It will display the comment in our website.

Some of you might use the comments moderation option. So we need to tell the commentator that we need to moderate the comments first. To do this, we put this if function before our <?php comment_text() ?>

<?php if ($comment->comment_approved == '0') : ?>
<em>Your comment is awaiting moderation.</em>
<?php endif; ?>

Lastly, put this before the <?php endforeach; ?>

<?php /* Changes every other comment to a different class */
if ('alt' == $oddcomment) $oddcomment = '';
else $oddcomment = 'alt';
?>

Hopefully, your comments_list will be like this.

<?php if ($comments) : ?>
<div class="comments_list">

<ol>
<?php foreach ($comments as $comment) : ?>

<li class="<?php echo $oddcomment; ?>" id="comment-<?php comment_ID() ?>">
<div class="comments_author">
<?php comment_author_link() ?>
</div> <!-- close comments_author -->
<div class="comments_text">

<?php if ($comment->comment_approved == '0') : ?>
<em>Your comment is awaiting moderation.</em>
<?php endif; ?>
<?php comment_text() ?>

</div> <!-- close comments_text -->

</li>

<?php /* Changes every other comment to a different class */
if ('alt' == $oddcomment) $oddcomment = '';
else $oddcomment = 'alt';
?>

<?php endforeach; ?>
</ol>

</div> <!-- close comments_list -->

But it is not finish yet. We need to end our if that we declare previous with this. Just put this code after the comments_list div.

 <?php else : // this is displayed if there are no comments so far ?>

<?php if ('open' == $post->comment_status) : ?>
<!-- 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; ?>

The Comments Form

Ok here we will put the form for visitors to give comment to our post. But we need to make sure that the visitors can see the comments form if the comment status is open. To do so, we need this function to check it.

<?php if (‘open’ == $post->comment_status) : ?>

We put that function above our comments_form class like this.

<?php if ('open' == $post->comment_status) : ?>
<div class="comments_form">

But maybe you like people has to login first before they can give comment. So we need to put this code after check the comment status.

<?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 : ?>

And they will look like this

<?php if ('open' == $post->comment_status) : ?>

<?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 : ?>

<div class="comments_form">

This is the easiet part. Just copy and paste all of this into your comments_form class.

<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 &raquo;</a></p>
<?php else : ?>
<p><input type="text" name="author" id="author" value="<?php echo $comment_author; ?>" size="22" tabindex="1" />
<label for="author"><small>Name <?php if ($req) echo "(required)"; ?></small></label></p>
<p><input type="text" name="email" id="email" value="<?php echo $comment_author_email; ?>" size="22" tabindex="2" />
<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 $comment_author_url; ?>" size="22" tabindex="3" />
<label for="url"><small>Website</small></label></p>
<?php endif; ?>
<?php smilies_clickable(); ?>
<p><textarea name="comment" id="comment" cols="50" rows="10" tabindex="4"></textarea></p>
<p><input name="submit" type="submit" id="submit" tabindex="5" value="Submit Comment" />
<input type="hidden" name="comment_post_ID" value="<?php echo $id; ?>" /></p>
<?php do_action('comment_form', $post->ID); ?>
</form>
<div class="comment_meta">
<?php if ($post-> comment_status == "open" && $post->ping_status == "open") { ?>
<p>
<a href="<?php trackback_url(display); ?>">Trackback this post</a> &nbsp;|&nbsp; <?php comments_rss_link('Subscribe to the comments via RSS Feed'); ?>
</p>
<?php } elseif ($post-> comment_status == "open") {?>
<p>
<?php comments_rss_link('Subscribe to the comments via RSS Feed'); ?>
</p>
<?php } elseif ($post->ping_status == "open") {?>
<p>
<a href="<?php trackback_url(display); ?>">Trackback this post</a>
</p>
<?php } ?>
</div>
<?php endif; // If registration required and not logged in ?>

After the comments_form, make sure to end our if.

<?php endif; // if you delete this the sky will fall on your head ?>

Finally, our comments.php will be like this.

<?php // Do not delete these lines
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
?>
<p class="nocomments">This post is password protected. Enter the password to view comments.<p>
<?php
return;
}
}
/* This variable is for alternating comment background */
$oddcomment = 'alt';
?>

<div id="comments">

<?php if ($comments) : ?>
<div class="comments_list">

<ol>
<?php foreach ($comments as $comment) : ?>

<li class="<?php echo $oddcomment; ?>" id="comment-<?php comment_ID() ?>">
<div class="comments_author">
<?php comment_author_link() ?>
</div> <!-- close comments_author -->
<div class="comments_text">

<?php if ($comment->comment_approved == '0') : ?>
<em>Your comment is awaiting moderation.</em>
<?php endif; ?>
<?php comment_text() ?>

</div> <!-- close comments_text -->

</li>

<?php /* Changes every other comment to a different class */
if ('alt' == $oddcomment) $oddcomment = '';
else $oddcomment = 'alt';
?>

<?php endforeach; ?>
</ol>

</div> <!-- close comments_list -->

<?php else : // this is displayed if there are no comments so far ?>
<?php if ('open' == $post->comment_status) : ?>
<!-- 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 ('open' == $post->comment_status) : ?>

<?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 : ?>

<div class="comments_form">


<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 &raquo;</a></p>
<?php else : ?>
<p><input type="text" name="author" id="author" value="<?php echo $comment_author; ?>" size="22" tabindex="1" />
<label for="author"><small>Name <?php if ($req) echo "(required)"; ?></small></label></p>
<p><input type="text" name="email" id="email" value="<?php echo $comment_author_email; ?>" size="22" tabindex="2" />
<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 $comment_author_url; ?>" size="22" tabindex="3" />
<label for="url"><small>Website</small></label></p>
<?php endif; ?>
<?php smilies_clickable(); ?>
<p><textarea name="comment" id="comment" cols="50" rows="10" tabindex="4"></textarea></p>
<p><input name="submit" type="submit" id="submit" tabindex="5" value="Submit Comment" />
<input type="hidden" name="comment_post_ID" value="<?php echo $id; ?>" /></p>
<?php do_action('comment_form', $post->ID); ?>
</form>
<div class="comment_meta">
<?php if ($post-> comment_status == "open" && $post->ping_status == "open") { ?>
<p>
<a href="<?php trackback_url(display); ?>">Trackback this post</a> &nbsp;|&nbsp; <?php comments_rss_link('Subscribe to the comments via RSS Feed'); ?>
</p>
<?php } elseif ($post-> comment_status == "open") {?>
<p>
<?php comments_rss_link('Subscribe to the comments via RSS Feed'); ?>
</p>
<?php } elseif ($post->ping_status == "open") {?>
<p>
<a href="<?php trackback_url(display); ?>">Trackback this post</a>
</p>
<?php } ?>
</div>
<?php endif; // If registration required and not logged in ?>

</div> <!-- close comments form -->

<?php endif; // if you delete this the sky will fall on your head ?>

</div> <!-- close comments -->

Next, Part 5 – Sidebar . [tags]diy, how to, skin, theme[/tags]

Comments

  1. Thank you for setting up this tutorial. I dont know any other tutorial which makes learning themes this easy

  2. thank you very much. hope you can announce it to your visitors about this tutorial. ๐Ÿ™‚

  3. haha, figures I take the break on the step that requires 300% concentration, comeback the next day and have no idea where I left off.

  4. Even this is kind a tricky. You gave your 100% effort so that people will learn. GOD BLESS ALWAYS!

  5. i don’t know what to say man
    look i have a little background about both html and css and and only 1,2 about php ๐Ÿ˜€
    but u can say i can understand what you are talking about and i can create this !
    thank you very mush
    in Arabic
    ุดูƒุฑุง ุฌุฒูŠู„ุง ู„ูƒ

    Ismaeel Mohamed
    Alexandria , Egypt

  6. Awesome tutorial!! easy to follow and very informative! BTW in line 10 you forgot to close the paragraph tag

  7. I wonder if it’s possible to list directly in the index.php the comments. For example, in front of each post (the post content on the left and the dedicated comments on the right).

    My idea is to supress the clic on the “comments” link and show them directly on the index.php

    I tried some code but it seams impossible with the wordpress function.

  8. Nice patience man! You’ve tried hard for the learners. Keep going…

  9. ROAPYAGETEDAP says:

    fix viagra joining

  10. I just get up that “coments are closed” :S

  11. Immotsfus says:

    Hello Everbody

    I just joined this forum.

    Great job by the admin, mods and seriously every member around.

    A few days ago I read that there is a treatment for diabetes on http://www.healthcaredaily.org
    Can diabetes seriously be cured? The source looks like a reliable healthcare news website

    Could you someone tell me if this healthcare information is for real?

    Thanks a lot

    Immotsfus

  12. I think there is an error from line nr.116.

    should be:

  13. the previous comment was cutted due an error.

    I think the right code is the following (from line 116)

    (close div “comment form”)
    (close if)
    (close if)
    (close div “comments”)

  14. Thanks a lot! Very good post!

  15. hurm…

    aku start lost bile jumpe ayat ni…

    We will not touch our comments_form right now because we will just copy and paste the html + php code in it. It is not easy to explain how it works unless you have php background. ๐Ÿ™‚

    Now we jump into the WordPress tags needed in our comments.php.

    Put this code above our comments id

    P/s cyperhackz.net:

    tolong aku part yg tu please…

  16. Hi, i must say fantastic website you have, i stumbled across it in Google. Does you get much traffic?

  17. I like the layout of your blog and I’m going to do the same thing for mine. Do you have any tips? Please PM ME on yahoo @ AmandaLovesYou702

  18. Could you go into more detail on this? Btw, the advice you gave me is really good.

  19. Your blog is awesome. I m gonna bookmark, gracias. Keep working on blog.

  20. Again, a thoughtful comment, Great stuff. I’ve read your earlier posts you made and I enjoyed it. Cheers.

  21. Great tutorial!!!
    Thanks!!!

    I have a question, my text editor marks a problem on the code, it says “There is a syntax error on line 69″ What is that mean?

    You must be <a href="/wp-login.php?redirect_to=”>logged in to post a comment.

    this is the code where the error is marked!

    Again great tutorial!!!!

  22. Thanks , awesome tutorial …

  23. What qualifications have you got? Art Nude Preteen Models
    :-(((

  24. An envelope http://inaocodiog.de.tl bbs biz dark The same thing that is going through that redneck dude’s (not doods) mind is the same thing going through that ghetto thug watching a black chick getting slammed by some cracker

  25. We’d like to invite you for an interview http://oukedogi.de.tl little boys pix both of them, the guy and girl are very hot. the guy has that dorky cuteness, yet the girl has the girl next door who’s virginity you take.he has a nice cock and body and she is hot too.

  26. Would you like to leave a message? generic bupropion xl manufacturers Rodriguez heard thunderous boos when he walked up to the plate, but he then smoked a 2-2 fastball into the seats. Heรขย€ย™s eight homers away from tying Willie Mays and cashing in on a $6 million bonus.