Over the last couple of weeks we’ve been through the process of creating a stylish blog design in Photoshop, coding it up into a static HTML and CSS concept, and now we’ll put the whole thing together as a fully working WordPress theme. Follow this step by step walkthrough of the various WordPress theme files, and see how the HTML is split up and injected with PHP tags to provide the complete blogging functionality.

At the end of the last tutorial, we were left with a working HTML and CSS concept of the blog homepage. Since then, a generic inner page has been styled up, to give the CSS for page elements such as comments, author description etc that appear when viewing a complete blog post.

WordPress theme anatomy

A WordPress theme consists of multiple PHP files. Each one of these files is called from the index.php, so your header, footer and sidebar are separate files that are inserted into the index to render a full web page. Furthermore, there’s different template files that can be used in place of the index depending which portion of the site the user is viewing, these include archive.php, single.php, and page.php. Inside each one of these template files is a series of WordPress PHP tags which add the special functionality and transform the static HTML and CSS code into a working theme. Be sure to keep the WordPress Codex bookmarked for reference when building your themes, it includes a detailed description of every tag and all its parameters.

The first step when creating any new theme is to create the series of files and copy across any image, Javascript or CSS assets your design uses into a new folder.

/* Theme Name: Chris Spooner V3 Theme URI: http://www.chrisspooner.com/ Description: Chris Spooner WordPress Theme Version 3. Version: 3.0 Author: Chris Spooner Author URI: http://www.blog.spoongraphics.co.uk */ 

At the top of the CSS file, you’ll need to specify some details about your theme in order for it to be detected by WordPress.

.centered { display: block; margin-left: auto; margin-right: auto; }

.alignright { float: right; margin-left: 15px; }

.alignleft { float: left; margin-right: 15px; } 

While you’re editing the CSS, you’ll also want to add some styling for the classes added by the WordPress WYSIWYG editor for aligning text and images to the left, right and center.

Header.php Template File

The header.php includes all the information from the head of your HTML document, as well as the upper portion of your code that remains the same throughout each page (The opening container tag for instance). The HTML right down to before the start of the page content is copied from the static HTML file and pasted into header.php. Then select tags and elements are replaced with PHP tags in order for WordPress to inject the dynamic information. <?php bloginfo('stylesheet_url'); ?> automatically renders a link to /wp-content/themes/*theme-name*/style.css. Where you need to specify the link to the theme directory, you can use <?php bloginfo('template_url'); ?>. Before the closing </head> tag, the WordPress <?php wp_head(); ?> tag tells any plugin files where to insert their own code.

Other tags used in the lower portion of the header file include <?php echo get_option('home'); ?> which renders a link to the blog homepage, and <?php wp_list_pages(); ?> which lists out the WordPress generated page into <li> tags (so don’t forget to wrap it in a <ul>). This pages tag also has some parameters, firstly sort_column=menu_order arranges the pages according to how you specify them as opposed to alphabetically, and title_li= removes the default ‘Pages’ heading from the list. It’s worth noting that this tag could be used elsewhere in the theme, like the sidebar for example. Likewise, you could list out the categories here instead.

Index.php Template File

The index file follows on from the header.php, so the HTML right down to the sidebar from the static file is pasted into the index file. Being the file that is loaded first, the header.php file is called using the <?php get_header(); ?> tag. Inside the HTML content area, the WordPress loop checks for posts then spits out a bunch for code for each post it finds. This is specified between the while and endwhile; PHP tags. Inside this loop we can insert the dynamic post information into the existing HTML elements from our static content, such as <?php the_permalink(); ?> to render the link to the post, <?php the_title(); ?> to render the post title and <?php the_content(''); ?> to render the actual post text.

After the list of posts, pagination tags are inserted using <?php next_posts_link('Older posts'); ?> and <?php previous_posts_link('Newer posts'); ?>. The text inside the parentheses can be altered to any wording you desire. At the bottom of the index file, the sidebar and footer files are called using <?php get_sidebar(); ?> and <?php get_footer(); ?>, which will insert the content from sidebar.php and footer.php wherever the tags appear in the theme file.

Archive.php & Search.php Template Files

The archive.php and search.php template files are basically alternatives to the index.php template file. They do the same job, but are used in different areas of the website. The index file is used on the blog homepage, whereas archive is used when browsing any kind of grouping of posts, whether it’s by category, month or author. The search file is used when viewing search results. Both files use the same structure and tags as the index file, but include some extra elements to provide feedback to the user. The archive file uses a range of conditional tags to check where the posts are coming from, this then allows you to set a page heading with the relevant information (‘Browsing the Tutorials category’, or ‘Browsing posts from August, 2010′).

Similarly, the search template file can include the simple <?php the_search_query(); ?> tag to render a heading such as ‘Search results for WordPress’.

Single.php & Page.php Template Files

While the index, archive and search files display a list of posts, the single.php and page.php template files are used to display the individual posts and pages. They both begin with similar HTML – The header is still called using <?php get_header(); ?> and the WordPress loop displays the post information and content. The main difference is instead of pagination, you might include additional functionality like <?php related_posts(); ?> (plugin specific tag) to render related posts, or <?php comments_template(); ?> to load the comments section, particularly for single blog posts.

Comments.php Template File

The comments template file is called from single.php to insert the comments section at the bottom of your blog post. This file renders out the comments into an <ol> element and is pretty much self-contained in the <?php wp_list_comments(); ?> tag. Elsewhere in the template file, comment pagination is taken care of with the <?php previous_comments_link('Older') ?> and <?php next_comments_link('Newer') ?> tags (if the option is set in the WordPress settings), while the comments form appears underneath, surrounded by a <?php if ( comments_open() ) : ?> statement to check whether comments are open or closed for this particular post.

Sidebar.php & Footer.php Template Files