10 Checks to the Perfect WordPress theme

WP Logo

This is the title of Joost de Valk post, which I don't agree completely, some points are too stiff and should be considered and well thought through by the author ahead of the actual coding.

I made some thoughts and wrote down how I would start programming a perfect theme. Please don't hesitate to comment and put in your thoughts on this article, which enhance the value of this post.

Checklist; check your work

  1. Thought about template files?
  2. style.css including comments?
  3. Added hooks?
  4. Search necessary, if so - does it exist?
  5. Widgetized?
  6. Plugin integration?
  7. Readable & valid code?
  8. Tested in different browser?
  9. Trackbacks?
  10. Title?

Background & Information to the checklist

  1. Which template files in theme?

    WordPress supports a lot templates in a theme and additionally you can add more functionality to it.
    Especially because you can use WordPress for many different purposes, it's essential to think about the necessary templates in advance. Really mandatory is only index.php. But I would recommend use at least:

    • index.php
    • header.php
    • footer.php - if you have a footer area.
    • sidebar.php - only if you have an extra area for a sidebar.
    • single.php - should there be an alternative style compare to the home page, it is advisable to have this template.
    • page.php - if there will exist static pages and look different to index.php.
  2. Stylesheet incl. comment assignment?

    WordPress needs a style.css. Without this file, including following comments, WordPress won't be able to recognize the theme and cannot use it.
    This file can also refer to other stylesheet files.

    @charset 'UTF-8';
    
    /*
    Theme Name: Basis
    Theme URI: http://bueltge.de/basis-theme-fuer-wordpress/411/
    Description: Basis style to start a new theme
    Version: 0.1
    Author: Frank Bueltge
    Author URI: http://bueltge.de/
    */
    
    @import url(css/style.css);
    
  3. Hooks in your theme?

    Many Plugins and WordPress too is using the hooks in a theme. There is a minimum of 3 hooks in a theme

    • In the header.php or index.php, depends on the structure of the theme: wp_head();. This hook has to be in the header, preferable directly above the closing head tag.
      	<?php wp_head(); ?>
      </head>
      <body>
      
    • Also should be a hook in the footer area of the website. Implement footer.php or index.php, if a footer.php doesn't exist.
      Depends on what is implemented in a hook, I would recommend to have the hook inside the layout. This is just a recommendation, but it can't be generalized.

      		<?php wp_footer(); ?>
      	</div>
      
      </body>
      </html>
      
    • The 3rd hook is necessary inside the comment area, but only if there is a possibility to comment. This can be realized by implementing comments.php. Just a hint, if the theme refers to the possibility to comment (comments_template();) but comments.php doesn't exist, the default theme will be used!
      Is there a possibility to comment, you have to use the hook do_action('comment_form', $post->ID);. Generally I use it under the textarea. Important, it has to be inside form.

      <textarea name="comment" id="comment" cols="60" rows="5" tabindex="4"></textarea>
      
      <?php do_action('comment_form', $post->ID); ?>
      
      <input name="submit" type="submit" id="submit" tabindex="6" value="<?php _e('Submit comment', 'basis'); ?>" />
      <input type="hidden" name="comment_post_ID" value="<?php echo $id; ?>" />
      		
      </form>
      

    There can be more hooks, but they are provided by plugins and documented by the plugin author.

  4. Search exists?

    Users are used to a search function on a website. But not always it's useful to have a search functionality.

    Therefore you should think about if it has an extra value for your customer. If yes, integrate it into your theme.

    I recommend to use an own template, search.php.

    Alternatively you can offer Open Search, which is available via Add-on in some browsers and helpful for some „Powerusers“. How that works? You can read the tutorial „OpenSearch - Searchfield for Mozilla and Internet Explorer with WordPress

  5. Is your theme widgetized?

    There are many possibilities to integrate new functions in WordPress without changing code in your template files. With widgets you can make changes in your sidebar easily.

    I differentiate in two parts, does the user like to do the changes or should a function integrated without widget functionality.

    if you need to widgetize your theme, you should read the tutorial of Automattic.
    You just have to put in your sidebar.php:

    <div id="sidebar">
    <ul>
    	<?php 	/* Widgetized sidebar, if you have the plugin installed. */
    		if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar() ) : ?>
    
    ...
    
    	<?php }
    		endif; // End Widgets
    	?>
    </ul>
    </div>
    

    Additionally you have to put in functions.php of the theme:

    // widget function
    if ( function_exists('register_sidebars') )
    	register_sidebars(0);
    
    function my_widget_register() {
    	if ( function_exists('register_sidebar') ) {
    		register_sidebar(array(
    			'name' => 'Sidebar',
    		'before_widget' => "\n\t\t" . '
    <li id="%1$s" class="widget %2$s">',
    			'after_widget' => '</li>
    
    ',
    			'before_title' => "\n\t" . '
    <h3 class=\"widgettitle\">',
    			'after_title' => '</h3>
    
    ',
    		));
    	}
    }
    
    add_action('widgets_init', 'my_widget_register', 1);
    

    There are many more possibilities and solutions to adjust widgets to your design, but this is another subject on its own.

  6. Integrated plugin functionality?

    Many functions become realized by plugins. If you use plugins, it's essential that the theme checks if the respective plugin exists. If it doesn't exist, is not active or because of an update it changed a function name, you might get some error messages.
    It's easy to implement a check, depends if you include a function or class.

    if ( function_exists('FUNKTIONS_NAME') ) 
    
    if ( class_exists('KLASSEN_NAME') )
    

    More information are available in my post „Secure include Plugin in WordPress“.

  7. Valid, readable markup and CSS?

    Web standards starts with valid code.
    Good design is very important, but clean markup is not less important. Not only the Validator shouldn't show any errors, the theme has to be well structured and readable too. Everybody should be able to understand your code.
    If you offer the theme as download to public, it's even more important to have a clear structure and a valid, readable markup and CSS.
    If you don't know what web standards are, I recommend to check out the web and learn.

  8. Tested in different browser?

    Testing your theme in different browsers is essential. Everybody has another opinion about supporting some specific browsers, but a minimum of browsers should be supported.

    Are you using the theme for an intranet, then it's necessary to check it only on some specific browsers. But if you write the theme for a community or client, it is necessary to check the theme on different browsers.
    If you write the theme by the rules of the web standard, it will be enough for the most part. Unfortunately some browsers don't understand all web standards.

    Useful tool is the web service browsershots.org and the installation of different browsers on your computer. I also recommend IETester.

  9. Support for trackbacks?

    A trackback is one of three types of linkbacks, methods for Web authors to request notification when somebody links to one of their documents. This enables authors to keep track of who is linking, and so referring, to their articles.
    Wikipedia

    If you like to have a trackback support in your theme, you have to put a WordPress template tag inside the loop, before endwhile, comment out for HTML.

    <!-- <?php trackback_rdf(); ?> -->

    Accordingly it belongs into the template, it can be in index.php, single.php or page.php .

  10. User friendly title?

    The title of the blog and of the respective pages is an important element not only for SEO purpose. Sometimes I wish, that websites are more optimized for the reader than for search engines.

    The same for tittle tag, which will be used if it gets bookmarked as favorite. More information is available at „The perfect title-tag“.

    A solution for example:

    <title><?php if ( is_archive() ) { _e('categorie'); } wp_title('-', true, 'right'); bloginfo('name'); ?></title>
    

There are much more things to talk and think about, but this is something to go on in our comment area. Any comment or additional suggestions are very welcome. If you have questions, I will try to answer them.

Comments are closed.

17 comments

  1. ocean90

    Hello,
    a little mistake
    'Support fo trackbacks?' a r is missing.
    It's a good article, short but informativ!

    ocean

  2. Michael

    Thanks ocean90! fixed

  3. John Joubert

    Nice one! I liked the article. Short but very informative for those who are new to WordPress! Well done :)

  4. Twincascos

    I'd like to see an exhaustive list of all possible files in a theme (without considering custom js, etc.). I've seldom seen themes with author.php, or image.php, or attachment.php. or how about sub-page.php, or child-category.php

  5. www.krembo99.com

    Very nice article...
    bookmarked and sure to use on my next theme !
    thanks

  6. Alex

    Thanks for your compliments, we are glad you like this article. Short and sweet.

    @Twincascos, we might have a more exhaustive list later on.

  7. dimido

    Thanks for the List. I can use it ;)

  8. Brad

    page.php has in my opinion become an anachronism in themes. A well designed theme doesn't need it. Relying on a quality single.php and additional page templates for distinct custom static pages is a much better way to go.

  9. Peter

    I agree Brad - when I put together a theme, page.php is almost always a near duplication of single.php. In the vast majority of themes, the two are nearly interchangeable.

  10. Anoter Flava

    To be quite frank the whole wordpress theme design work flow STINKS... the method of page includes is old and tired.... get_header() get_footer() get_sidebar can be better done if approached diffrently.

    IMO it is time wordpress changed its theme work flow...

  11. Abu Farhan

    Very good tips, Some Theme not put wp_footer so some plugin can’t work because usually they put javascript at the bottom before closing body. And one more thinks some theme add jquery directly at the header it will be conflict if some plugin using different script than jquery.

  12. Dan

    Lots of key suggestions; I agree with what you're saying, except the need for perfect w3c validation (usually content will find a way to break it anyway in practice; your home page at wpengineer.com does not validate right now as it is).

    I would maybe add one thing to the check list--
    11. support for the new WordPress menu system; especially if your theme currently has one of those lame page lists where a new menu-based link list can be placed now with WordPress 3+.

  13. lars

    thx for the checklist ... it's a very usefull list if someone start with a fresh theme. anyway ... i think i will use some of your points for my next theme and try to use less plugins as possible by creating a own flexible sidebar ...

4 pingbacks

  1. 10 Checks to the Perfect WordPress Theme — WPCandy — WordPress Themes, Plugins, Tips, and Tricks
  2. Today’s Delicious links | links | WereWP
  3. Creating the Perfect WordPress Theme | WordPress Hacks Log
  4. WPengineer - fast 1000 Besucher am Tag - dynamicinternet