Getting Started With Wordpress Templates

29th July 2008 - 6 minutes read time

If you are setting up a Wordpress blog the chances are that you will be looking into modifying the default theme to be something a little more customised to your site. Theme development can be as complicated or as simple as you want, or are capable of doing.

Wordpress themes are stored in the folder wp-content/themes/, each theme being stored in it's own directory.

The basic theme must contain two basic files, the main control is done from a file called index.php and a file called styles.css, which is also needed to allow you to display the theme within the admin section of Wordpress. If you don't want to use the styles.css file then this is fine, but it should be present and contain the following lines.

/**
 * Theme Name: Your theme name
 * Theme URI: www.hashbangcode.com
 * Description: A theme designed by the Philip Norton at hashbangcode.com
 * Author: Tech
 * Author URI: www.hashbangcode.com
 * Version: 1.0
 *   
 * General comments can go in this space.
 */

This is all integrated into your Wordpress administration section under themes. If you want a screenshot to appear as well as the description then create a file called screenshot.png, make it 300 pixels wide by 225 pixels high and put it in the same folder as the rest of the files.

There is also a file called functions.php in which you can define custom functions that can be used in your template. This includes, but is certainly not limited to, adding a widget definition. The functions file is loaded right at the start of the template and is looked at when viewing the administration section of your site. Any code kept in the functions.php file is called rather like a plugin and so it is possible to write plugin-like code in this file and have it act accordingly.

Other files can be included very easily.

The header file will contain the HTML at the top of the page (including styles and meta tags) and will get included via the get_header() function like this.

<?php get_header(); ?>

The footer file will contain the HTML at the bottom of the page (including copyright and site tags) and will be included via the get_footer() function like this.

<?php get_footer(); ?>

The sidebar of the site can be included using the get_sidebar() function. This can contain a widget call or some static elements.

<?php get_sidebar(); ?>

If anything else is to be included from the template folder then the TEMPLATEPATH constant can be used in conjunction with a include() function call.

<?php include(TEMPLATEPATH . '/searchform.php'); ?>

Wordpress will automatically recognise certain files depending on what action is being taken. For example, when looking at a single post or page the single.php file is used instead of the index.php file to load the template. If this file doesn't exist then it uses the standard index.php file.

Also, if the user clicks on a link for a category, Wordpress will load the category.php file. If this is not present then Wordpress tries to load a file called archive.php. If both of these files are not present then Wordpress load the main index.php file instead.

A files called 404.php is also used when a 404 response is needed. This file is called automatically during a 404 response and does not require any .htaccess modifications.

A lot of default tags are available for you to use if you don't want to hard code things into your template. For example, to include the name of your blog in your template you can use the following code.

<?php bloginfo('name'); ?>

In addition to the name tag the tags description, url, admin_email and version are also available.

The Loop is used by Wordpress to display each post in turn. The loop takes the following format.

<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
// the contents of the post can be displayed here
<?php endwhile; else: ?>
<p><?php _e('Sorry, no posts matched your criteria.'); ?></p>
<?php endif; ?>

There are a number of different tags that can be placed within the loop to print out different information. For example, to print out the content you just need to call the the_content() function.

<?php the_content(); ?>

The best way to get acquainted with Wordpress templates is to simply make a copy of the default template that comes with Wordpress and edit it to suit your needs. In this way you can figure out how things work, why the template is set up as it is and what files do what.

The following links go to specific pages within the Wordpress documentation and should also help out.

codex.wordpress.org/Stepping_Into_Templates: The Wordpress documentation on getting started on templates.

codex.wordpress.org/Stepping_Into_Template_Tags: A list of the different tags available for both the bloginfo() function and within the loop.

codex.wordpress.org/Template_Hierarchy: This page looks at the files available for a theme and when they are called.

codex.wordpress.org/Theme_Development: The Wordpress documentation on developing themes.

codex.wordpress.org/Site_Architecture_1.5: The different files available for templating. Although this document was written with version 1.5 the content seems valid.

codex.wordpress.org/Function_Reference: A reference document for all of the functions available in Wordpress. Although some don't matter for template development this is still a good resource for template functions.

codex.wordpress.org/The_Loop: Help on The Loop.

codex.wordpress.org/Using_Themes: Help on using themes.

Add new comment

The content of this field is kept private and will not be shown publicly.