Over the past couple of weeks I’ve posted the design process of my latest WordPress theme. We’ve gone through the Photoshop design stage, the HTML5 and CSS3 coding stage and now we’ll go through the templating stage to finish off the Typo design as a fully working WordPress theme.
Revisit last week’s tutorial to see the coded prototype. Since that tutorial I’ve made a couple of little tweaks here and there, including support for Internet Explorer. If you’re new to the series the WordPress theme we’re creating is called Typo. It’s a design that’s entirely based on typography to allow the content to shine. To allow the design to work without the use of any graphical interface elements it is based on a strict grid to balance the design and tie everything together.
The WordPress template files
Being a pretty simple design we’ll be creating the theme with the usual group of template files. Our static HTML5 prototype file will be split up across these template files in order to create the various WordPress page types. All the image and CSS files are also copied over to the WordPress theme folder.
Style.css template file
The CSS styling from the static prototype is pasted into the WordPress style.css file, then a series of theme details are added to allow the theme to be recognised by WordPress.
Header.php template file
The first portion of code from the prototype index.html file is copied into the header.php file. Everything from the Doctype to the end of the <head> is placed in the header.php file, then additional WordPress template tags are added to provide extra functionality or to replace sections of static code that need to be dynamic. Examples include <?php wp_title();?> to render the post or page title and <?php wp_list_pages('title_li=' ); ?> to display a list of all the pages. The title_li parameter removes the default setting that renders a “Pages” heading above the list.
Index.php template file
The HTML code from where we ended with the header.php file is then copied right down to where the sidebar begins, then the WordPress loop is added to check for content. Our static HTML file includes three dummy posts, but these can be removed as WordPress will use the same layout for each post found using the code between the while and endwhile tags. Inside this loop the HTML structure still exists, but elements that need to be dynamic are swapped for the relevant WordPress PHP tag, for instance <?php the_permalink(); ?> will render the URL of the post inside the anchor and<?php the_category(', '); ?> will insert a link to the post’s category. All the dummy content from the HTML file can be swapped with just one tag: <?php the_content(''); ?>. WordPress will insert all the content saved in the database from the online editor in its place.
At the top and bottom of this file are calls to other template files in order to piece together a full page. <?php get_header(); ?> calls and inserts the header.php file while <?php get_sidebar(); ?> calls and inserts the sidebar.php file and so on.
Sidebar.php template file
The next section of content from the HTML file is the sidebar area, between the two <aside> HTML5 tags. The same principle applies where any dummy content is swapped for a WordPress PHP tag to dynamically insert the content from the blog. Examples include <?php wp_list_categories(); ?>, with a series of parameters customising the layout. In this particular theme there’s a lot of custom tags used to allow the end user to personalise their theme using a special settings page. All the tags beginning with omr_ call for custom settings such as the About excerpt and social links. Check out BuildInternet’s handy guide to creating a custom settings page.
Footer.php template file
The remaining code from the HTML file is then placed in the footer area. There’s no real dynamic elements in the footer, but an extra snippet of code that should be added is the <?php wp_footer(); ?> tag. This is where WordPress can insert any additional content from plugins, such as Javascript code.
Archive.php & Search.php template files
The main structure of the page is created using header.php, index.php, sidebar.php and footer.php, but the index.php file is only used on the homepage (if the homepage displays recent posts). Alternatives to the index.php file are used for different features of the blog, such as browsing posts based on a filter such as by category, by date or by author. Or when browsing posts based on a search result. This is where the archive.php and search.php files come into play. Their content is pretty much identical to the index.php file, except they have some additional titles to help describe the content that is being shown.
Page.php & Single.php template files
When a single post or page is viewed the index.php, archive.php or search.php files is switched out for either the page.php or single.php template files. These files are very similar again, but their layout often omits some features such as the anchor on the title, the post info, read more link and the pagination links as these are no longer required when the content is viewed individually. The single.php file also includes the comments section, which is called using the <?php comments_template(); ?> tag.
Comments.php template file
The comments.php file is one of those files that you can re-use over almost every theme you make as it rarely changes. The whole comments list is created with one tag: <?php wp_list_comments(); ?>, then the actual content needs styling with CSS. The file then includes the comments form.
Finishing touches
Once all the template files have been created they can be installed and tested on a live WordPress blog. Now is the time to alter settings and add a range of content to test the theme works under a range of scenarios. I always create a post with a range of headings, blockquotes and lists to style up every potential piece of content.