How to Make Own WordPress Theme Part III

By the time you read this, you should already have archive.php, header.php, index.php and page.php completed. Now we will move to a single post and a comments template.

Singe Post

Open single.php file. Should be still empty. Copy and paste there:

<?php get_header(); ?>
<div id=”main”>
<?php if(have_posts()) : ?><?php while(have_posts()) : the_post(); ?>
<div class=”post” id=”post-<?php the_ID(); ?>”>
<h2><a href=”<?php the_permalink(); ?>” title=”<?php the_title(); ?>”><?php the_title(); ?></a></h2>
<div class=”entry”>
<div style=”padding-bottom:5px;border-bottom:1px dotted #000;”>
<p class=”postmetadata”>
<?php the_time(’l, F jS, Y’) ?> | <?php _e(’Filed under:’); ?> <?php the_category(’, ‘) ?> <?php _e(’by’); ?> <?php the_author(); ?> <?php edit_post_link(’Edit’, ‘ | ‘, ‘ ‘); ?>
</p>
</div>
<br />
<?php the_content(); ?><br />
<?php link_pages(‘<p><strong>Pages:</strong> ‘, ‘</p>’, ‘number’); ?>
</div><!– close entry –>
<div class=”comments-template”>
<?php comments_template(); ?>
</div>
</div><!– close post –>
<?php endwhile; ?>
<?php else : ?>
<div class=”post” id=”post-<?php the_ID(); ?>”>
Not Found
</div><!– close post –>
<?php endif; ?>
</div><!– close main –>
<?php get_sidebar(); ?>
<?php get_footer(); ?>

Alright. Again, the code is very similar to the previous ones so you should already be familiar with almost everything. However there are few new lines so let’s go through them.

First off, in postmetadata section the comments information is missing. It really isn’t needed as the actual comments are located few lines bellow.

Right after the end of the entry, there is a function used to call the comments template. All comments are closed inside the specific div so it will be easier to work with them in the stylesheet.

<div class=”comments-template”>
<?php comments_template(); ?>
</div>

Rest of the code is the same as in other templates. I have explained it in th two previous parts of this guide.

Comments

Now open the comments.php file and fill in:

<?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
?>
<h2><?php _e(‘Password Protected’); ?></h2>
<p><?php _e(‘Enter the password to view comments.’); ?></p>
<?php return;
}
}
/* This variable is for alternating comment background */
$oddcomment = ‘alt’;
?>
<!– You can start editing here. –>
<?php if ($comments) : ?>
<h3 id=”comments”><?php comments_number(‘No Responses’, ‘One Response’, ‘% Responses’ );?> to “<?php the_title(); ?>”</h3>
<ol class=”commentlist”>
<?php foreach ($comments as $comment) : ?>
<li class=”<?php echo $oddcomment; ?>” id=”comment-<?php comment_ID() ?>” style=”padding:0;”>
<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 edit_comment_link(‘Edit Comment’,’ ‘,’ ‘); ?> <?php _e(‘Said:’); ?>
<?php if ($comment->comment_approved == ’0′) : ?>
<em><?php _e(‘Your comment is awaiting moderation.’); ?></em>
<?php endif; ?>
</div><div style=”border-bottom:1px solid #fff;”></div>
<div style=”padding:10px;”><?php comment_text() ?></div>
</li>
<?php /* Changes every other comment to a different class */
if (‘alt’ == $oddcomment) $oddcomment = ‘ ‘;
else $oddcomment = ‘alt’;
?>
<?php endforeach; /* end for each comment */ ?>
</ol>
<?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) : ?>
<h3 id=”respond”>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” 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><input type=”text” name=”author” id=”author” value=”<?php echo $comment_author; ?>” size=”40″ tabindex=”1″ style=”font-family:tahoma,sans-serif;” />
<label for=”author”><small>Name <?php if ($req) echo “(required)”; ?></small></label></p><br />
<p><input type=”text” name=”email” id=”email” value=”<?php echo $comment_author_email; ?>” size=”40″ tabindex=”2″ style=”font-family:tahoma,sans-serif;” />
<label for=”email”><small>Mail (will not be published) <?php if ($req) echo “(required)”; ?></small></label></p><br />
<p><input type=”text” name=”url” id=”url” value=”<?php echo $comment_author_url; ?>” size=”40″ tabindex=”3″ style=”font-family:tahoma,sans-serif;” />
<label for=”url”><small>Website</small></label></p><br />
<?php endif; ?>
<!–<p><small><strong>XHTML:</strong> <?php _e(‘You can use these tags:’); ?> <?php echo allowed_tags(); ?></small></p>–>
<p><textarea name=”comment” id=”comment” cols=”60″ rows=”10″ tabindex=”4″ style=”font-family:tahoma,sans-serif;”></textarea></p><br />
<p><input name=”submit” type=”submit” id=”submit” tabindex=”5″ value=”Submit Comment” style=”font-family:tahoma,sans-serif;” />
<input type=”hidden” name=”comment_post_ID” value=”<?php echo $id; ?>” />
</p><br />
<?php do_action(‘comment_form’, $post->ID); ?>
</form>

<?php endif; // If registration required and not logged in ?>
<?php endif; // Do not delet this!! ?>

I’m really not going into details here. There’s much of PHP code. It would require you to know the basic syntax of PHP in order for me to explain it. And honestly you won’t need to change this file very often. Most of the time it’ll be enough to just copy and paste this. However let’s go through few important lines you should be aware of.

Firstly, pay attention to the bold part of the code. That’s the formular for posting comments. You’ll probably want to change fonts, colors and such to fit the design of your theme.

The line bellow is pretty useful. It enables you to style the odd and the even comments in different way. You must have already seen it on other blogs. It visually separates the comments It looks smooth and professional.

$oddcomment = ‘alt’;

Later in the code we will change the class of odd comments so we’ll be able to style them with CSS:

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

I have included a white line between each comment’s metadata and the actual comment to visually divide them. That’s because I assumed you’d like to change the background of the comments. Don’t be afraid to delete this line if you don’t want it that way:

<div style=”border-bottom:1px solid #fff;”></div>

If you look closer at the code, you migth notice that every part of the comment has its own class assigned. We will use those classes to style the comments. Open your style.css file and add to the bottom:

/* Comments */
.comments-template {text-align:left;}
.comments-template ol {margin:0;padding:0 0 15px;list-style:none;}
.comments-template ol li {margin:10px 0 0 0;padding:0;color:#111;background:#e8e8e8;font-size:10pt;}
.commentlist li.alt {background:#c7c7c7;}
.comments-template h2, .comments-template h3 {font-family:tahoma,sans-serif;}
.commentmetadata {padding:5px 10px 5px 10px;font-size:8pt;}
.comments-template p.nocomments {padding:0;}
.comments-template textarea {font-family:tahoma,sans-serif;font-size:10pt;}
/* End of comments */

Use this line to style every even comment:

.comments-template ol li {margin:10px 0 0 0;padding:0;color:#111;background:#e8e8e8;font-size:10pt;}

And this line to style every odd comment:

.commentlist li.alt {background:#c7c7c7;}

Remember that the odd comments inherit all attributes of the even comments so change only what is needed. In the example above I have changed only background color.

Use the first line to style the whole comments and the second to style the list of the comments:

.comments-template {text-align:left;}
.comments-template ol {margin:0;padding:0 0 15px;list-style:none;}

You can also change the head-lines:

.comments-template h2, .comments-template h3 {font-family:tahoma,sans-serif;}

Here you can style comments’ metadata:

.commentmetadata {padding:5px 10px 5px 10px;font-size:8pt;}

In addition, you can decide how will the comments template look when there are no comments yet:

.comments-template p.nocomments {padding:0;}

And finally, you can style the textarea, too:

.comments-template textarea {font-family:tahoma,sans-serif;font-size:10pt;}

That’s all for now folks. The fourth part will teach you how to make an elegant sidebar and footer. So keep an eye on my blog…

Related articles: Part I, Part II Part IV

This entry was posted in Wordpress and tagged . Bookmark the permalink.

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>