home > support > web design > wordpress plugin > theme development

WordPress theme development

If you are an experienced WordPress theme designer / developer you can probably skip this page, you may find the links in the "WP Plugin reference" section of the menu to the right more useful.

The basics

Template Hierarchy

Any existing WordPress theme will be - at least partially - compatable with the TourCMS WordPress Plugin, this is due to an inherent feature of WordPress called Template hierarchy. Template hierarchy means that WordPress will use as specific a template file as it can find for a particular page, the Template hierarchy diagram shows the full extent of this.

For example when viewing a Tour/Hotel we would like WordPress to use a special template so that the page appears differently to blog posts or regular pages; perhaps hiding the ability to comment, or adding a standard area for price & duration information. The important section of the hierarchy diagram for this is as follows:

single-posttype.php --> single.php --> index.php

Specifically, as we are building a page for Tour/Hotel type posts the hierarchy will be:

single-tour.php --> single.php --> index.php

So, we probably want to create a template named single-tour.php for displaying our Tours/Hotels, otherwise WordPress will default to single.php (if it exists) or index.php.

We would also want to display lists of Tours/Hotels differently to lists of blog posts or other pages, the important section of the hierarchy diagram for this is as follows:

taxonomy-taxonomy.php --> taxonomy.php --> archive.php --> index.php

There are two custom taxonomies incuded with the TourCMS WordPress Plugin, so the following hierarchy will be used when listing products by "Product type" (e.g. "Hiking tours" or "All tours"):

taxonomy-product-type.php --> taxonomy.php --> archive.php --> index.php

And the following when listing products by "Location" (e.g. "All tours in Scotland" or "All tours in the UK"):

taxonomy-location.php --> taxonomy.php --> archive.php --> index.php

If you are planning to use an exisiting WordPress theme, then unless a theme has been specifically developed for TourCMS then these templates will not exist. However, all is not lost and we can use another feature of WordPress called Child themes to build them.

Child Themes

A WordPress child theme is a theme that inherits the functionality of another theme, called the parent theme, and allows you to modify, or add to, the functionality of that parent theme.

So if we have an existing (non TourCMS Plugin optomised) WordPress Theme we can build a new child theme for it containing just the TourCMS Plugin specific templates and CSS changes, leaving the existing theme intact.

Step by step example

WordPress 3.0 introduced a great default theme called Twenty Ten. Twenty Ten is a nice and simple theme that is easy to build on, so we will build a child theme on top of that for this tutorial. If you have an another theme you wish to develop on top of the process is the same.

Basic setup for a child theme

A child theme resides in its own directory in wp-content/themes. The scheme below shows the location of a child theme along with its parent theme (Twenty Ten) in a typical WordPress directory structure:

This directory can contain as little as a style.css file, and as much as any full-fledged WordPress theme contains. Here's an example style.css:

/*
Theme Name: TourCMS Twenty Ten
Description: Child theme for the Twenty Ten theme 
Author: Your name here
Template: twentyten
*/

@import url("../twentyten/style.css");

#site-title a {
    color: #009900;
}

What the above code does is give our child theme a name (TourCMS Twenty Ten), a description, defines which parent theme to use (twentyten), imports the parent themes stylesheet and then sets a new link colour.

If you save this as style.css in your child theme folder you can then go into WordPress admin and choose your new child theme, you should see the links on your WordPress site change colour (you can remove the three lines for that, it's just a nice simple way to test that we have a working child theme). Any custom CSS required in the child theme can be added to style.css.

We can now progress to building our template files.

Deciding which template files to create

Template file for displaying individual Tours/Hotels

Lets take another look at the template hierarchy for the Tour/Hotel single page:

single-tour.php --> single.php --> index.php

Our parent theme "Twenty Ten" already has an index.php and a single.php, what we will do is build a single-tour.php in our child theme and WordPress will automatically use that for our Tour/Hotel pages. What we need to do is:

1. Take a copy of single.php from the twentyten theme directory and place it into our tourcms-twentyten directory
2. Rename our copy to single-tour.php

Template file(s) for displaying lists of Tours/Hotels

Lets take another look at the hierarchy for pages with lists of Tours/Hotels:

taxonomy-taxonomy.php --> taxonomy.php --> archive.php --> index.php

Our parent theme "Twenty Ten" already has an index.php and an archive.php, what we will do is build a taxonomy.php in our child theme and WordPress will automatically use that for our Tour/Hotel listing pages (If we wanted to could instead create separate taxonomy-product-types.php and taxonomy-location.php templates). What we need to do is:

1. Take a copy of archive.php from the twentyten theme directory and place it into our tourcms-twentyten directory
2. Rename our copy to taxonomy.php

When you are done your theme directory should look like this: