WordPress Template Building Resources Part 1

WordPress is an amazing platform for creating blogs and simple brochure style websites. Some may argue that WordPress is even a suitable platform for an e-commerce site or a content managed web application. Personally, as I’m more familiar with ASP.NET I tend to stick to the Microsoft platform for complex sites, this way I’m totally confident that I can produce a solution for any requirements a client may have. Only recently have I become a convert to WordPress, I have discovered that WordPress has become a platform that offers a great deal of functionality for very little investment and thus makes it an ideal candidate for small, low budget sites.

Before you adopt a new framework for building web sites, it’s worth checking out the quality of the documentation and the community that support it. I’m pleased to say that WordPress and the WordPress community resources are some of the best I have seen and are a great place to start when you get down to coding.

Blank Starter Themes

There is nothing wrong with using the default themes that come with WordPress as blank starter themes or even using them to create child themes. There is also nothing wrong with creating a theme from scratch. However, there are a number of free starter themes that you may find more suitable for theme creation as they can save you time and money whist also offering a high degree of flexibility to meet your design requirements. Here are a few blank themes I have tried.

http://html5reset.org/#wordpress
This is a HTML 5 blank template, a style-free theme designed to help get your custom WordPress project off the ground in double quick time.

http://wordpress.org/extend/themes/thematic
Thematic is a highly extensible, WordPress Theme Framework featuring 13 widget-ready areas, drop-down menus, grid-based layout samples, plug-in integration, short codes for your footer, & a whole lot more. Perfect for any blog and the starting point for theme development.

http://starkerstheme.com
Starkers is a bare-bones WordPress theme created to act as a starting point for the theme designer. Free of all style, presentational elements, and non-semantic markup, Starkers is a stripped-back version of the ‘Twenty Ten’ theme that ships with WordPress.

There are many more blank themes available if the themes above don’t have what you need, here’s a good place to start looking: http://www.google.co.uk

Dummy Content

When building your theme it helps if your development site has a good variety of dummy content to make sure your theme can handle all possibilities. You can add your own content however it’s more efficient to use a pre-build solution.

http://codex.wordpress.org/Theme_Unit_Test
downloadable XML file that you use to import dummy content into a WordPress site.

http://wordpress.org/extend/plugins/wp-dummy-content/
WP-Dummy-Content is a WordPress plugin that has a one click install that generates a bunch of pages, sub-pages and posts.

Creating a child theme

A WordPress child theme is a theme that inherits all the attributes of a parent theme but gives you the opportunity to overwrite specific elements to make your own version. Making a child theme is very simple all you need to do is:

  1. Create a new folder for your theme e.g. wp-content/themes/your-theme-name
  2. Add a new text file named style.css
  3. Edit header section of style.css like so:
/*
Theme Name:     Test Child Theme
Theme URI:      http://yourwebsite.com
Description:    Child theme based on the Twenty Eleven theme
Author:         You
Author URI:     http://yourwebsite.com
Template:       twentyeleven
Version:        1
*/
  1. Finally, enable the child theme and restyle the site using your new style.css file.

Further reading: http://codex.wordpress.org/Child_Themes

WordPress Template Files

After you have created you custom or child theme, you may want to override the default page templates. To do this all you need to do is add the relevant php file to your template folder. You will need to know what template does what so below is an excerpt from the WordPress, template hierarchy document that should give you a pointer: http://codex.wordpress.org/Template_Hierarchy

Home Page display

  1. home.php
  2. index.php

Front Page display

  1. front-page.php – Used for both Your latest posts or A static page as set in the Front page displays section of Settings -> Reading
  2. Page display rules – When Front page is set in the Front page displays section of Settings -> Reading
  3. Home Page display rules – When Posts page is set in the Front page displays section of Settings -> Reading

Single Post display

  1. single-{post_type}.php – If the post type were product, WordPress would look for single-product.php.
  2. single.php
  3. index.php

Page display

  1. custom template – Where custom template is the Page Template assigned to the Page.
  2. page-{slug}.php – If the page slug is recent-news, WordPress will look to use page-recent-news.php
  3. page-{id}.php – If the page ID is 6, WordPress will look to use page-6.php
  4. page.php
  5. index.php

Category display

  1. category-{slug}.php – If the category’s slug were news, WordPress would look for category-news.php
  2. category-{id}.php – If the category’s ID were 6, WordPress would look for category-6.php
  3. category.php
  4. archive.php
  5. index.php

Tag display

  1. tag-{slug}.php – If the tag’s slug were sometag, WordPress would look for tag-sometag.php
  2. tag-{id}.php – If the tag’s ID were 6, WordPress would look for tag-6.php
  3. tag.php
  4. archive.php
  5. index.php

Custom Taxonomies display

  1. taxonomy-{taxonomy}-{term}.php – If the taxonomy were sometax, and taxonomy’s slug were someterm WordPress would look for taxonomy-sometax-someterm.php. In the case of Post Formats, the taxonomy is ‘post_format’ and the terms are ‘post-format-{format}. i.e. taxonomy-post_format-post-format-link.php
  2. taxonomy-{taxonomy}.php – If the taxonomy were sometax, WordPress would look for taxonomy-sometax.php
  3. taxonomy.php
  4. archive.php
  5. index.php

Custom Post Types display

  1. archive-{post_type}.php – If the post type were product, WordPress would look for archive-product.php.
  2. archive.php
  3. index.php

(when displaying a single custom post type see the Single Post display section above.)
Author display

  1. author-{nicename}.php – If the author’s nice name were rami, WordPress would look for author-rami.php.
  2. author-{id}.php – If the author’s ID were 6, WordPress would look for author-6.php.
  3. author.php
  4. archive.php
  5. index.php

Date display

  1. date.php
  2. archive.php
  3. index.php

Search Result display

  1. search.php
  2. index.php

404 (Not Found) display

  1. 404.php
  2. index.php

Attachment display

  1. MIME_type.php – it can be any MIME type (image.php, video.php, audio.php, application.php or any other).
  2. attachment.php
  3. single.php
  4. index.php

Published by

Mark Taylor

Web developer, based in Bourne, Lincolnshire, UK. builder of web applications, ASP.NET, Web Standards HTML, CSS & JavaScript. SQL Server & MySQL DB developer.

Leave a Reply

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