Jason G. Designs

WordPress Themes, Design Tutorials, Linux Themes and more…

How to Bring Your WordPress Theme up to Current Standards

checkboxes.gif

What I thought

As I had finished creating my newest theme, Mixin’ Styles, I thought it was complete and ready to go. In the midst of reading articles, I read about the Theme Check plugin. This plugin checks your theme against the current WordPress coding standards for themes that are submitted to the WordPress theme directory. This is a good tool for theme developers, even if they don’t plan to submit their themes to the theme directory.

The real deal

After clicking “Check It”, Theme Check listed things that were required to change in my theme and things that were recommended to change. I chose to update all of the required changes and most of the recommended changes. As to which version of WordPress the current standard is, I do not know. But, it looks like many of these changes were around since about version 2.7 or so. In this article, I will explain what Theme Check found that needed to be brought up to current standards, complete with code. Note: most of this code can be found in the WordPress Codex.

Let’s work

1. My theme needed it’s own Comments file (required)

In my previous themes, I used to rely on the standard comment form from the default theme. On the Codex’s Theme Review page they state, “Theme is required to include, at a minimum: … comments.php”. So I could no longer fall back on just calling comments_template(); in my theme’s single.php file, and having it implement the default theme’s comments file. Luckily, creating one was fairly simple.

When I created my theme from anew, I didn’t have a comments.php file. To add one to your theme if it does not have one, create a new file and type <?php comment_form(); ?> at the top.

1a. The next step is to open the comments.php file from the default theme in WordPress 2.9 or below. If you are using anything above WP 2.7, your default theme may already include the wp_list_comments() function. Copy this and Paste into a new file. Save this new file as legacy.comments.php in the theme’s main folder.

1c. Now, you must adjust the functions.php file by adding:

<?php 
add_filter('comments_template', 'legacy_comments');
function legacy_comments($file) {
	if( !function_exists('comment_form') ) {
		$file = TEMPLATEPATH . '/legacy.comments.php';
		return $file;
	}
}
?>

1b. Warning: the only way I was able to test this was by emptying the comments.php file and replacing everything with load_template(TEMPLATEPATH . '/legacy.comments.php');. This should be tested in WordPress 2.9 or below before implementing on an actual blog.

None of the above information is needed anymore, as most themes are compatible with the latest version.

If you have a previous comments.php file copied from the Kubrick standard theme and don’t need backward compatibility, open this file and highlight everything in between the opening and closing php tags and type comment_form(); to replace.

This is only part of it; the comment_form() function places the fields that are used for readers to leave a comment, but does not show the already submitted comments list. We will get to that below. *Note: it is probably recommended to put this at the very bottom of the file, beneath the list of comments. In Mixin’ Styles, I placed the reply form above the listed comments. It is up to your discretion as a theme author how you would like to implement this.

Now, to get the list of already submitted comments, just copy and paste the code below:

if ( post_password_required() ) {
	echo '<p class="nocomments">This post is password protected. Enter the password to view comments.</p>';
	return;
}

if ( have_comments() ) : ?>
<h4 id="comments"><?php comments_number( 'No Comments', 'One Comment', '% Comments'); ?></h4>
<ul class="commentlist">
    <?php wp_list_comments(); ?>
</ul>
<div class="navigation">
    <div class="previous-comments"><?php previous_comments_link(); ?></div>
    <div class="next-comments"><?php next_comments_link(); ?></div>
</div>
<?php else : // this is displayed if there are no comments so far ?>
	<?php if ( comments_open() ) :
		// If comments are open, but there are no comments.
	else : // comments are closed
	endif;
endif;

comment_id_fields();

The first bit of code above beginning with if ( post_password_required() ) { … checks to see if the post is password protected and prompts the commenter for a password.

Everything from below the password if statement (the if ( have_comments() ) : ?>... statement) to the closing endif; statement is the comments loop. This lists the comments with wp_list_comments() and adds navigation links for comment pagination.

For the required JavaScript comment popup functionality, you must add a line of code to the functions.php file. Add this code to your theme setup function.

function my_theme_setup() {
    if ( is_singular() && comments_open() && get_option( 'thread_comments' ) ) {
        wp_enqueue_script( 'comment-reply' );
    }
    ...
}
add_action( 'after_setup_theme', 'my_theme_setup' );

A setup function loads scripts in the order written into wp_head.

Finally, the comment_id_fields(); function outputs hidden fields necessary for the Javascript functionality.

Reference: Migrating Plugins and Themes to 2.7/Enhanced Comment Display.
Note: All of the rest of the code listed under the Javascript Comment Functionality section does not have to be adjusted; it is provided by the comment_form() function.

2. Post Pagination (required)

My theme was required to have compatibility for post pagination. When the <!--nextpage--> quicktag is inserted into a post, the post breaks up into more than one page. This one was a very simple to implement and works with all versions of WordPress. In single.php, type the following just below <?php the_content(); ?>:

<?php wp_link_pages(); ?>

Reference: Function Reference/wp link pages.

3. Tags within Posts (required)

Also required of my theme was to display post tags within the loop of the single.php page. In my theme, I placed these at the bottom, but they may be placed anywhere within the loop. I put this just above the wp_link_pages(); function:

<?php the_tags(); ?>

In my theme, I customized the parameters to allow for additional html tags in the function’s output. For more information, see the Codex reference Function Reference/the tags.

Page: 1 2

Leave a Reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.