Porting your website design to Wordpress Theme #2

This tutorial is a continuation of the Porting your website design into a WordPress theme, if you haven’t already read that post, or isn’t looking for specifically the things we will include in this post (listed below), we strongly recommend to check out that post first.
Today, we are going to talk about:

• Single.php
• Category.php
• Comments.php
• And other tips when you design.

We have already handled the four most important flies in the previous article, and so today’s tutorial is going to be relatively easier =)

If you like this post, Digg it here: http://digg.com/programming/Porting_your_website_design_into_a_WordPress_theme

Single.php

Single.php is used when only a single post is displayed. The structure is extremely similar to index.php. So, to start, copy whatever you have in index.php to this new file, named single.php.
This is what your single.php should look like. Only some minor changes need to be done to the code:

<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>
<div class="post">
<h1 id="332__1" id="post-<?php the_ID(); ?>"><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>"><?php the_title(); ?></a></h1>
<small><?php the_time('l, F jS, Y') ?> by <?php the_author() ?></small>
<div class="content">
<?php the_content('Read the rest of this entry &amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;raquo;'); ?>
</div>
<div class="footer">
<div class="category left">Posted in <?php the_category(', ') ?> | <?php edit_post_link('Edit'); ?></div>
<div class="comments right"><?php comments_popup_link('No Comments »', '1 Comment »', '% Comments »'); ?></div>
</div>
<div class="clear"></div>
</div>
<?php endwhile; ?>
<?php } ?>
<?php else : ?>
<?php endif; ?>

Since it is a view of a single post, you will need to leave space for comments. To display the comment box, simply put the following code before <?php endwhile; ?>:

<?php comments_teamplte(); ?>

Posts navigation links are different from the index’s. On index, you have “older entries” and “newer entries”, but here, you are going to have “previous entries” and “next entries”.
So, put the following code after <?php endwhile; ?>

<div class="navigation">
<div class="alignleft"><?php posts_nav_link('','','&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;laquo; Previous Entries') ?></div>
<div class="alignright"><?php posts_nav_link('','Next Entries &amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;raquo;','') ?></div>
</div>

Then add a custom message after <?php else : ?> that will be display if a certain post cannot be found.
Believe it or not, that’s it for single.php. We are going to handle the comments page later.

Category.php

Believe it or not, this page is the easiest of all. Simply copy what you have in index to these files (no, the changes are actually less than single.php’s).
You may choose to put some messages such as “You are viewing this category” on the top. You usually want to put these messages before <?php if (have_posts()) : ?>
For Category, you might want to put something like this:

<h2 id="332_techcube_1" >Techcube: <?php single_cat_title(); ?></h2>

Save the file and category.php is done.

Comments.php

This is the hard part. Comments.php has its own loop, different from index.php and such. We are only going to cover the basic here, and you may explore the rest of comment.php yourself.
Before anything in comments.php, this code is needed:

<?php
if (!empty($_SERVER['SCRIPT_FILENAME']) &amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp; '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 >This post is password protected. Enter the password to view comments.</p>

<?php
return;
}
}

/* This variable is for alternating comment background */
$oddcomment = 'class="alt" ';
?>

These codes above cannot be changed. After these codes, there will be a comment loop. You might want to start by putting a comments title first, and perhaps link your users to the Comment RSS at <?php post_comments_feed_link(’RSS 2.0′); ?>
The comment loop looks similar to The Loop, but in different syntax. This is what it looks like:

<!-- Display Comments -->
<?php If ($comments) : ?>
<?php foreach ($comments as $comment) :  ?>
<!-- Repeats this code for each comment -->
<?php $oddcomment = ( empty( $oddcomment ) ) ? 'class="alt" ' : ''; ?>
<?php endforeach; ?>
<?php else :  ?>
<!-- The following codes run if there are no comments -->
<?php if ( ‘open' == $post->comment_status) : ?>
<!-- Displays if there are no comments -->
<?php else : ?>
<!-- Displays if commenting is closed -->
<?php endif; ?>
<?php endif; ?>

<!-- Display Comment Form -->
<?php if ( ‘open' == $post->comment_status) : ?>
<?php  if ( get_option('comment_registration') &amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp; !$user_ID ) : ?>
<!-- Displays if registration is required to comment -->
<?php else : ?>
<form action="<?php echo get_option('siteurl'); ?>/wp-comments-post.php" method="post" id="commentform">
<!-- Displays if registration is not required -->
<?php If ($user_ID) : ?>
<!-- Displays if use is logged in, usually displays "you are logged in" -->
<?php Else : ?>
<!-- Displays if not, usually displays info boxes (name, email, etc.) -->
<?php Endif; ?>
<!-- Usually displays comment box &amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp; Submit button -->
<?php do_action('comment_form', $post->ID);  //So that WP may run code end the end of comment form ?>
</form>
<?php Endif; ?>
<!-- If registration is required and not logged in. Usually blank-->
<?php Endif; ?>

Although the code seems to be long, but don’t worry, we will guide you step by step. Basicaly, you only need to put stuff in where we have commented, (or added a note). Now, copy the codes above under what you have just pasted

<!– Repeats this code for each comment –>

Here is where the comments display. It is recommended that each comment is displayed with lists. You might want to put an <ul> or an <ol> before foreach and after foreach as well.These two lines will be your starting and end, replace it with the comment:

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

Notice that ther is an “oddcomment” variable in that line. If the comment number of the number Is odd, $oddcomment will return class=”alt”. So, in your CSS you might want to set a different attribute with the other elements in the list to create a cool effect by having different colors at each other comment.

There are a few template tags that you can use here to enhance the looks of the comment:

Get_avatar
o Default Usage: <?php echo get_avatar ($comment, 32); ?>
o $comment is usually unchangeable, and 32 means size
Comment_author_link
o Default Usage: <?php comment_author_link() ?>
Comment_ID
o Deafult Usage: <?php comment_ID() ?>
Comment_date
o Default Usage: <?php comment_date(’F jS, Y’) ?>
o Argument changeable. Refer to PHP date
Comment_time
o Default Usage: <?php comment_time() ?>
Edit_comment link
o Default Usage: <?php edit_comment_link(’edit’,'&nbsp;&nbsp;’,”); ?>
o The first argument specifies the text it displays to the link, the second one specifies what code to display before the link, and the third specifies what codes to display after the link
Comment_text
o Default Usage: <?php comment_text() ?>
$comment->comment_approved == ‘0′
o Default Usage: <?php if ($comment->comment_approved == ‘0′) : ?>, <?php endif; ?>
o Between these two lines are what will be displayed if the comment is not approved.

You may play with these tags and sort them out in your comment box. An example of a comment box would look like this:

<li <?php echo $oddcomment; ?>id="comment-<?php comment_ID() ?>">
<?php echo get_avatar( $comment, 32 ); ?>
<div class="author"><?php comment_author_link() ?></div>
<br />
<small><a href="#comment-<?php comment_ID() ?>" title=""><?php comment_date('F jS, Y') ?> at <?php comment_time() ?></a> <?php edit_comment_link('edit','&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;nbsp;&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;nbsp;',''); ?></small>
<div class="comment"><?php comment_text() ?></div>
<?php if ($comment->comment_approved == '0') : ?>
<p><strong><em>Your comment is awaiting moderation.</em></strong></p>
<?php endif; ?>
<div class="clear"></div>
</li>

<!– Displays if there are no comments –>/<!– Displays if commenting is closed –>/<!– Displays if registration is required to comment –>

Replace these lines each with your custom message. Such as, “There are no comments, be the first one to comment”, “Sorry, you are not allowed to comment here”, or “You need to registered to comment”, etc.

<!– Displays if use is logged in, usually displays “you are logged in” –>

Put your custom message for this as well. You might want to include the user’s current username, by putting this In your code: <?php echo $user_identity; ?>

<!– Displays if not, usually displays info boxes (name, email, etc.) –>

You will have the input boxes to display here. Usually these codes are pretty standardized, but some minor changes to the labels of each box can still be mixed:

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

<!– Usually displays comment box & Submit button –>

Yup, the comment box is equally easy. Simply put in this code in replace of the comment:

<label for="comment"><small>Post your comment:</small></label><br />
<p><textarea name="comment" rows="10" cols="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>

You may choose to display some tags for the user to use by putting this code before the comment box:

<p><small><strong>XHTML:</strong> You can use these tags: <code><?php echo allowed_tags(); ?></code></small></p>

And this is it for comments.php! Easy, wasn’t it?

Tips for porting to Wordpress Design

• When you use PHP, you should only open and close php for specifically that line of code. If you plan to have multiple lines of code, it is the best that you separate them, even if/else statements.
• Read this post on how to make your designer neater and smaller.

Save all the files and upload to your server. Test it, and if it is fine, you are basically done!

At last, take a screenshot of your design and save it as screenshot.png, put it in your folder, and you are ready to distribute it.

If you have any questions at all, JUST ASK! We are here to help you!

Stay tuned at TechCube for more tech-related info, news, and tutorials =)