Hello everyone.
I’ve been asked a couple of times to create a how to on creating WordPress themes, so I thought I better get onto doing one. If you’re not really interested in knowing how a WordPress theme works, feel free to skip this post.
Just as a general overview of how this tutorial will be structured, first I’ll go over the general files required for a theme to even be considered a theme. I will then briefly explain what to put in each file. This tutorial assumes you’ve already got a general design and layout coded (ie. HTML and CSS code for the theme).
Files
For WordPress to recognise your theme, you need to have a minimum of two files:
- style.css – All the styles for your theme; and
- index.php – Theme entry point for (most) pages.
I say most pages for index.php, since you can create other files that WordPress will use for the entry point for certain types of posts or pages. These extra files are:
- header.php – Default HTML header used by your theme;
- footer.php – Default HTML footer used by your theme;
- functions.php – Special functions required by the theme;
- 404.php – For requests resulting in a 404;
- search.php – For search results;
- archive.php – For archive type pages, like author posts list, category posts, or a certain day, month or year;
- single.php – For a single post;
- page.php – For a single static page;
- front-page.php – For the page visitors see when viewing the home page of the blog; and
- home.php – For the list of all posts.
There are other files that a theme can include, but will most likely not be useful for a standard WordPress install. All the (mentioned and unmentioned) files make up the template hierarchy, as shown in this picture (credit to the WordPress developers). To make things simple, in this tutorial I’ll be making archive.php, search.php and home.php include a file called “templates/multiple.php”, and index.php point to a file called “templates/singular.php” within the theme directory. This is how I create my own themes, which I feel simplifies the final result.
Now that you have all these files, your theme is pretty close to being recognised by WordPress. There is just one more thing required for the system to know your theme is even a theme, and all the details about it. This comes in the form of a “header” in your style.css file, like so:
/*
Theme Name: The Dialog
Theme URI: http://blog.thereaper.net.au/wordpress-themes/the-dialog
Description: A very simple, dark 2-column WordPress theme with support for widgets, custom menu and threaded comments. Compatible with WordPress 3.0 and above.
Version: 1.0
Author: The Reaper
Author URI: http://blog.thereaper.net.au/
License: GNU General Public License v2.0
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: dark, two-column, fixed-width, theme-options, threaded-comments, editor-style, right-sidebar, custom-menu
*/ |
This header defines the theme name, a URI/URL for directing site owners to more information about the theme, a description of the theme, its version, theme author information, and tags defining what the theme includes (used by the WordPress installation system). The example above is the one used by my current theme as of the posting of this tutorial.
Code Placement
Alright, you’ve created the files you want to use. Which files do you put what in? For two parts of the HTML, it’s quite simple – all header type stuff, including doctype, html opening tag, the head tag, and the opening of the body tag, should be placed in header.php. Most of the time, you’ll also want to include any visible header elements within this file (including your page “wrapper”, if you use one). My own header.php files usually end up something like the following (before adding template tags):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>PAGE TITLE</title> <link rel="stylesheet" type="text/css" href="style.css" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> </head> <body> <div class="wrap"> <div class="header"> <h1 class="blog-title"><a href="#">NAME</a></h1> <p class="blog-tag">DESCRIPTION</p> <div class="top-nav"> NAVIGATION </div> </div> <div class="main"> <div class="content"> |
It should now be easy to tell what goes into footer.php – all the footer stuff, which is usually just to close all elements opened in header.php. So, the example to go with the above header.php would be:
</div> </div> <div class="footer"> <p>Theme <a href="http://blog.thereaper.net.au/wordpress-themes/the-dialog">The Dialog</a> © Copyright <a href="http://blog.thereaper.net.au/">The Reaper</a> | Powered By <a href="http://wordpress.org/">WordPress</a></p> </div> </div> </body> </html> |
Pretty empty, eh? To be honest, most footer.php files are (if you create your own websites using this technique, you’d know how empty they can get sometimes). These is a way to pad this out a bit more – by including a sidebar in the theme! Doing this will add one extra line of code to this file (which I will discuss in the next section).
Now we have the header and footer parts of the HTML split up, you should be left with basically nothing left from your original design (except for post or page title, content, etc). These remaining parts of your theme go within the main content parts of your code (in the case of this tutorial, within templates/singular.php and templates/multiple.php). This point is usually where you will start adding in WordPress template tags.
Template Tags
Ok, so you’ve created all the files you need and placed all your HTML code in the correct files. Now, how do you show content that goes with the actual site? That’s where template tags come in. We’ll start with our header and footer files.
header.php:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" <?php language_attributes('xhtml'); ?>> <head> <meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" /> <title><?php bloginfo('name'); wp_title('|'); ?></title> <link rel="stylesheet" type="text/css" href="<?php echo get_stylesheet_directory_uri(),'/style.css'; ?>" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <?php wp_head(); ?> </head> <body <?php body_class(); ?>> <div class="wrap"> <div class="header"> <h1 class="blog-title"><a href="<?php echo home_url(),'/'; ?>"><?php bloginfo('name'); ?></a></h1> <p class="blog-tag"><?php bloginfo('description'); ?></p> <div class="top-nav"> <?php $menu_args = array('depth' => 2, 'container' => false, 'theme_location' => 'main-nav', 'show_home' => true); wp_nav_menu($menu_args); ?> </div> </div> <div class="main"> <div class="content"> |
Looks a bit different now, doesn’t it? From the top of the page:
- language_attributes is used to output any required attributes to do with content language and direction, as well as any extra XML namespaces included by plugins. It can take either “xhtml” or “html” as parameters;
- bloginfo is the primary function used for getting information about the blog itself. As you can see, it’s used a few times throughout the page for displaying different types of information;
- wp_title is used to print out the title of the current post or page being viewed;
- get_stylesheet_directory_uri returns the URL to the theme’s directory;
- wp_head is the mechanism used by WordPress for providing a hook to plugins (and the system itself), so they can print out anything they require to function in the head of the page;
- body_class prints the class attribute on the body element, including a list of classes that can be used by your theme in the styles.
- wp_nav_menu creates and prints the navigation bar. In this example, I’m telling WordPress to only print the navigation 2 levels deep, have no container element, and to use the bar called ‘main-nav’ (which is defined in functions.php). If this navigation bar doesn’t exist, or contains no navigation bar in the WordPress admin, it will print out a standard navigation of all top level pages.
footer.php:
</div> <?php get_sidebar(); ?> </div> <div class="footer"> <p>Theme <a href="http://blog.thereaper.net.au/wordpress-themes/the-dialog">The Dialog</a> © Copyright <a href="http://blog.thereaper.net.au/">The Reaper</a> | Powered By <a href="http://wordpress.org/">WordPress</a></p> </div> </div> <?php wp_footer(); ?> </body> </html> |
As you can see, we’ve added the line for printing the sidebar – get_sidebar. The other template tag in this file, wp_footer, is another hook for plugins (and WordPress) to print out anything they require to function. If a user has an account, and is logged in, this will print out the admin bar.
Now for the actual content. The content itself contains a fair few more template tags. As such, it probably deserves its own post. Keep a lookout for the post containing the content part of the theme coming up in the next couple of days.
Thanks for reading, and I hope you stick around for part 2.
Robert
