Hostinicon
GET HOSTING FROM $3.95/MO PLUS A FREE YEAR ON TUTS+ (RRP $180). HURRY OFFER LIMITED. Check it out
Advertisement

WordPress: Beginner to Master, Part 5

by
Gift

Get a free year on Tuts+ this month when you purchase a Siteground hosting plan from $3.95/mo

Throughout this six-part beginner-to-master series, we'll be using the advanced features of WordPress to create our own portfolio & blog, complete with an options page, multiple styles and support for the new WordPress 2.7 features. Today, we'll deal with the comments, the search, and the archive.

This part is mainly about fixing up the extra parts we haven't yet got to. In the first section, we create the Comments template – with support for the new features in WP 2.7, while also accomodating for older versions.

In the second section, we create the archive and search templates.


Also available in this series:

  1. WordPress: Beginner to Master, Part 1
  2. WordPress: Beginner to Master, Part 2
  3. WordPress: Beginner to Master, Part 3
  4. WordPress: Beginner to Master, Part 4
  5. WordPress: Beginner to Master, Part 5
  6. WordPress: Beginner to Master, Part 6

Jump to a Section


Comments

WordPress 2.7 introduced several new features for the comments section, including threaded comments, paged comments, alternating styles and streamlined code. However these functions won't work correctly in older versions of WordPress. To combat this, we will be using a WordPress Filter so that older versions will use one comments file, and newer versions another.


Threaded comments in WP 2.7

Add the following code to the bottom of functions.php:

The wp_list_comments() function is a new addition to WordPress 2.7; so we are checking whether it exists using the function_exists() PHP function. If it doesn't, a WordPress filter is added to redirect to the comments.legacy.php file when the comments template is requested.

All newer WordPress versions will thus continue using comments.php (since they contain the wp_list_comments() function.)

Comments for WP 2.7+

Create a new file named comments.php. Inside, start with:

If the current post has comments assigned to it, the number of comments is output into a title tag using the comments_number() function. The comments are then displayed in an ordered list using the new wp_list_comments() function.

Each comment will be displayed using a built-in template which is easy to style in various ways, however if you need more control over how each comment looks, refer to this page on the WordPress Codex.

The comment navigation tags are also new to 2.7 and allow 'pagination' between a set number of comments (just like you have between blog posts).

In the next code, a message is displayed if comments are closed for the post:

Next task is to display the actual comment form:


If comments are set to open, a 'Leave a Reply' title is displayed using the new comment_form_title() function. If the user is replying to a comment, the %s in 'Leave a Reply to %s' is replaced with the author name of the comment they're replying to.

A cancel reply link is also displayed if this is a reply using cancel_comment_reply_link().

Finally, if only logged-in users can comment (and the user isn't logged in), an error message is displayed pointing to the login page.

If registration isn't required (or if the user is logged in):

The comment form is opened. If the user is logged in, a "Logged in as ... Log out?" message is displayed – otherwise the 'Name', 'Email', and 'Website' fields are displayed.

Finally, the 'Message' textarea and Submit buttons are displayed, the form closed and the if statements closed:

comment_id_fields() outputs the current post's ID in a hidden field. In WP 2.6- you had to make this manually, but now it's required to use this function.

In the Dashboard, go to Settings -> Discussion and tick the 'Enable Threaded Comments' and 'Break Comments into Pages' options. Then preview the comment template by going to any blog post:



Styling Comments

Add to style.css:

And the following into deepblue.css:

Note that 2.7 automatically adds special class names like alt, even, children, bypostauthor, thread-alt, thread-even etc. where necessary to allow for styling every-other comment a different colour to increase readability in long threads. See the WordPress Codex for more information on this.

Inside header.php, directly before <?php wp_head(); ?> insert:

This loads a built-in Javascript file which can 'move' the comment form when you click a Reply link – thus the page doesn't need to reload:


Click 'Reply' and the form moves to your current position:


Comments for WP 2.6

I'm not going to explain any of this code, due to it being out-dated and is only being included for the few people not using WP 2.7. But I have added in a $counter so alternating comments can be styled differently, as they are in 2.7.

Create a new file named comments.legacy.php and copy in the following code. If you are using WP 2.6, the layout will be exactly the same as it is in 2.7 if threaded-comments is disabled.

Download the source files for this post if you want this file properly spaced & formatted to make it easier for editing.


Comments display in WP 2.6 or below

Note: If you would like to learn more about the old comments loop, check out "Unraveling the Secrets of WordPress' Comments.php File" by Gilles Maes.


The Archive

The archive.php template is used to display any sort of archive for the blog – eg. categories, months, tags etc.


Create a new file named archive.php and start with the following:

As you can see, if the archive is for the Portfolio category, the page will load the page-portfolio.php template. exit; ensures that no more code is executed after that line if the portfolio template is used.

Next:

Each section will display a slightly different title depending on what the archive is for. For example, if it is an archive for the 'General' category the title would say "Archive for the ‘General’ Category"; or a monthly archive for January 2009 would be "Archive for January, 2008".

On the last line, the loop is opened.

Next:

The above code is the normal code for a blog post (as we've used several times on the blog page, single pages etc.) On the last line, the loop is closed.

If the archive doesn't exist:

A simple 'Not Found' header is displayed, and the searchform.php file is included (which we'll create next). You should probably include more information on this page to make it more user-friendly.

Finally, include the pagination links, the sidebar & footer:

Now try out your archive page by clicking one of the links in a Category/Archives/Tags widgets. But if you go to an archive which doesn't exist (eg. a category ID which doesn't exist), you will be greeted with the following error page because the searchform.php file doesn't exist.


Search Form

This file really couldn't get any simpler – just a search form. Add the following into a new file named searchform.php:

Try going to an inexistent archive again, and the search form will appear. It uses the same styling as we used on the sidebar search form so no additional styling is required.



Search Results page

The final template file required is search.php which displays the results from a search. For the most part, this is an ordinary loop, however since Portfolio items can show up in the results, they need to be displayed differently from blog posts.


Create the search.php file and start with the following:

The loop is opened, and then is an if statement to display a portfolio item:

If the retrieved post is from the portfolio category, the post will be displayed using the layout above – to appear the same as the portfolio items. Otherwise…

The normal blog post layout is used.

Finally, an error message with a search form is displayed if no results were returned, the pagination tags are used and the sidebar & footer files included:

Just add the following CSS into style.css and we're done here:


Summary

Tomorrow is the final day of the series. (Part 6) We'll be ironing out some bugs with the devil (IE6), and finishing the series by creating the RedSpace colour scheme for Innovation!!

Advertisement