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.

• Part 1 – The Layout
• Part 2 – Header
• Part 3 – Index
• Part 4 – Comment
• Part 5 – Sidebar
• Part 6 – Footer
• Part 7 – Finish!

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.

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]