WordPress themes are typically built using a handful of PHP files and a single CSS file. To beginners, it can be a little confusing to know what’s what and how they all work together and I hope to give you the basics in this tutorial.
Where the files are kept
From the root of your installation, you can navigate to /wp-content/themes/ to see all of the themes that are installed on your site. Unless there are any errors, each folder represents a unique theme, though you could also have some child themes, which can be considered duplicates depending on how much editing you did.
The required files
There are just two files that are absolutely required by WordPress to create a theme. These are index.php and style.css:
The index.php file is the default file that is used to display the latest posts. It will also be used to display archives, tags, search results and categories if those specific files are not in place.
The style.css file takes care of how your theme looks for the most part. It is where you specify things like background colors and images, font sizes and colors, widgets colors and styles, image borders and margins, and your different font styles (such as h1, h2, h3, links etc.).
Front page / Home Page
This is a special file that supersedes page.php if you are using a static page as the front page of your site (you can set this in Settings > Reading). If you don’t have a front-page.php and you’ve set a static page for your front page, page.php will be used (unless you’ve set a specific template for the page).
The home.php file sets how your home page will look if you are using it to display your latest posts (as opposed to a static page). In its absence, index.php will be used.
Adding functionality with functions.php
The functions.php file is an optional file, which serves several purposes: it can be used to define functions that can be used in several places throughout your theme (removing the need to paste the whole function in several places), to create additional menus in the admin area, or to enable theme features like post thumbnails. If your theme doesn’t yet have a functions.php file, you can create one yourself and start adding in your own functions – just make sure that you start your file with an opening PHP tag and then paste your functions on the next line.
Posts and pages
Probably the next most important theme files are page.php and single.php. Predictably, page.php is used to display your static pages and single.php is used to display individual posts.
If you are using custom post types, you can set a different single.php template for every custom post type you are using. For example, for the custom post type gallery, the template file for individual posts using this custom type is single-gallery.php. If a specific template for the custom post type doesn’t exist, the default single.php will be used instead.
WordPress pages typically consist of a few key elements: a header, a footer and one or more sidebars. You can code these right into your individual theme files, but it is better to create new files for them and call them from individual theme files, since these elements rarely change from page to page.
The header.php file typically is used to define any HTML head declarations, such as specifying stylesheets or favicons and for displaying a header image and/or navigation bar. If your theme has a header.php, you can load the header in your other theme files by using the following call:
Sidebars are where you can use widgets and display information on numerous pages. If you have a single sidebar, you will use the following call to display it in other theme files:
However, if you have two sidebars, you will need to create sidebar-1.php and sidebar-2.php for instance and then use the following calls to display them in your theme files:
This file is used to both display the comments at the end of a post and create a form so that your readers can leave a comment. You can tweak how comments and the comments form are displayed by modifying this file.
Your front page isn’t the be all and end all of your site. Hopefully, through internal linking, you’re encouraging your readers to look through your old material. WordPress uses a few different files to display your archives, depending on what kind of archive you’re needing to display.
This file displays all the posts written by a particular author. You can take it a step further and use different templates for different authors by adding the author ID or ‘nice name’ to the filename, like author-5.php or author-dave.php.
This file will display all the posts in a category. Again, you can create specific category templates by adding the category ID or slug to the filename, like category-12.php or category-books.php.
This file will be used when displaying posts from a given time period, such as a year or date.
Tags are an excellent way of categorizing posts and this file will set how posts are displayed when a particular tag is queried. Tag slugs or IDs can be appended to the file name to create specific templates for particular tags, e.g. tag-wordpress.php or tag-83.php
This is the default archive template that is used if date.php, tag.php, archive.php or category.php don’t exist. So if you only have archive.php and author.php in your theme, category.php will be used when displaying posts from a particular category, but archive.php will be used when querying a date, tag or an author’s posts.
This file is used to display the results of a search, believe it or not. In its absence, index.php will be used.
Using WordPress’ built-in document uploading system, you can link images and attachments to an attachment page, or directly to the file.
attachment.php will be used to display attachments when you upload attachments and specify that they be linked to an attachment page, rather than the source file. This allows you to keep your site branding and display ads for instance, while still providing access to the attachment.
If you want to display attached images differently to other attached files, you can use image.php to dictate how they should be shown. All other attachments will continue to be displayed using attachment.php
Miscellaneous theme files
Files which don’t fall under any of the previous categories include:
Hopefully, it’s fairly obvious what this file does: when someone requests a page on your site that doesn’t exist, the server kicks up a 404 error and this template is used to display the error page. You can use this to your advantage to display a search form so that the reader doesn’t give up and go elsewhere looking for the information. Use the search form call shown below in 404.php:
Is there anything that you’re not sure about? Not sure which file to use where and when? Leave a comment and I’d be happy to help you out.