Cappelen Art & Design

Let’s get this straight, WordPress is one of the best CMS-s out there, if not the best. I may be biased since I’m a WordPress fanatic, but the statement still stands. WordPress has loads of features, a good administration GUI for creating, editing and managing several types of posts, supports user permission levels, presents a vast repertoire of plugins and themes, is free, can be both hosted and self-hosted, and has multisite-support for handling several blogs in the same implementation.

I’ve had private self-hosted WordPress blogs for around four years, and the last year at my job I’ve been responsible for TV 2‘s WordPress blogs at blogg.tv2.no and the politics blog, politisk.tv2.no. At blogg.tv2.no we have a WordPress multisite implementation consisting of at the moment more than 60 blogs. Since I can’t possibly create a theme for each new blog, I’ve developed a single theme that is so versatile and heavily controlled by theme options that our blogs can look very different from each other even though they use the same theme. While developing this theme and from reading pieces from here and there, I learned a lot about WordPress themeing.

But why write a WordPress tutorial when there’s so many out there? I read most of these tutorials when I first began to learn WordPress themeing, but I felt that they all stopped at the point where it got interesting. Some explained how to set up a local WordPress implementation for testing purposes, some gave an excellent introduction to the basics, and some focused on particular pieces only. Many tutorials also base their themeing process on copying an existing theme and modifying it, by doing so losing the true understanding of how WordPress themes worked. I felt many lacked explanations of what they were doing and why, or they simply stopped before the theme was fully developed enough to actually take it in use. I missed good tutorials of more advanced WordPress themeing which were truly hands-on with the code, explained how to implement WordPress features, and the right and wrong way to do certain things.

So I thought I could gather the pieces up in a WordPress themeing tutorial going further than the most basic things, getting really hands-on with code, and explaining how and why we do such things as well as providing links to further investigation. One great source of documention is the WordPress Codex, which I will link to as much as possible so that you can get a deeper explanation, and take a look at possible arguments and examples. The Codex lessons is also worth a read if you are new to themeing.

What You Will Learn

The tutorial is divided up in 14 lessons, each in its own post. The lessons contains logical sequential steps in the themeing process. We will write a theme from scratch, progressively developing the theme by adding support for different kind of content and features. I’m providing a theme design defining the look of the pages we’re going to build, but will not go into detail in how I created this design. My primary focus has been on the coding. You are obviously free to modify or create your own design and adapt it to my code samples if you want to.

At the end of these lessons you’ll hopefully be able to write your very own themes and further develop your skills. You will also have this finished theme which you can refer to if you have forgotten how to do something or are just too lazy to rewrite pieces of the code. The main features we will go through is:

• Setting up a valid and logical semantic markup structure that can be used and modified to create any layout you wish.
• Separating styling and structure, giving you the possibility to create a different design without neccessarily changing the structure files.
• Writing a well-working WordPress themes with templates for every type of request, such as single posts, comments, archives and search results.
• Adding support for post thumbnails, as well as adding your own image sizes for whenever the user is uploading a photo.
• Adding multiple widget areas in sidebar and footer and customizing the widget’s default wrappings.
• Adding support for the new custom navigation menu, which can be managed in WordPress Admin.
• Writing custom codes for fetching posts related to a single post, or to list posts in a certain category.
• Adding a jQuery slider of featured posts.
• Making your theme search-engine friendly.

Please note that some of the features I’m going through are supported in WordPress version 3 and newer. It’s fully possible to complete the tutorial with an older WordPress version by simply skipping the lessons covering the newest WordPress features. But it’s still highly recommended to keep your WordPress updated, especially for security purposes.

What You Need to Know Beforehand

So far I’ve explained what you can expect from these lesson, but what do I expect of you? These lesson require basic knowledge of HTML, CSS and PHP. You don’t need to be an expert in PHP, but you should know how it works in combination with HTML. Keep in mind that all communication with WordPress is in PHP. I won’t explain any of the CSS used in this theme either, I expect you to understand how to generally style a web page and position elements.

I will also not explain how to install WordPress or set up a local WordPress implementation, as there are plenty of other tutorials for that. For the record I’ve set up a local WordPress implementation filled with posts, categories, tags, and content of all kinds for testing purposes, using WAMP for Windows. I also strongly recommend Firebug for Firefox when styling your theme.

Table of Contents

1. Introduction to WordPress Themes
   We will start by learning the basics how WordPress themes work, and what hooks are. Then we’ll take a look at the design I’ve created, and prepare the HTML structure.
2. Creating Files and Activating the Theme
   Starting the actual coding, we write the basic HTML structure divided into the header, sidebar, footer and index files. Finally we give the theme a name and activate it in WordPress so we can see it in action.
3. The Loop and Basic CSS
   First we add some very basic layout CSS so it’s easier to separate the different parts when previewing the code as we write it. We will then get to know with the Loop for fetching recent posts and displaying them on the front page.
4. Defining a Widget Area and Creating Our Functions File
   We will add widget support for a single widget area in our sidebar and add our functions file.
5. Creating WordPress Templates
   We create multiple different types of views, called WordPress templates, determining what e.g. individual posts, search results, comments and archives should display.
6. Styling Our Theme With CSS
   Now that we’ve added some meaningful content, it’s time to style and make it look better. We expand the basic CSS into styling posts, comments, sidebar and footer elements.
7. Defining Multiple Widget Areas and Default Wrappings
   Whereas we earlier added a single widget area, we define a few more in both our sidebar and footer. At the same time we tell WordPress which HTML elements and class names we want widgets be wrapped in, making it easier for styling purposes.
8. Post Thumbnails
   We look into the post thumbnail (featured image) feature in WordPress, in which the writer can assign a single image that represents the post. We add support for post thumbnails, tell WordPress to create more copies of uploaded images and resize them in the sizes we need.
9. Adding Support for Custom Menu
   Utilizing WordPress’s new custom menu feature introduced in 3.0, we replace our static and not user-friendly theme’s menu, thus providing the WordPress user an easy and better way to edit the site’s menu.
10. Related Posts, Dealing With Nested Loops
    We write our first custom query code to fetch related posts, diving closer into the Loop and learning how to deal with nested loops.
11. Including Javascripts the Right Way
    As it’s time to add some Javascripts to our theme, we look into WordPress’s available script libraries, and the right way to include scripts in a theme.
12. Featured Posts, Dealing With Multiple Loops
    We look further into the Loop and at another way to write a custom loop, learning how to manage multiple Loops in one and the same page when WordPress really only supports one.
13. Page Templates
    By creating page templates which pages can be assigned to, we give way for a much more customized way of displaying content in WordPress. We create a better archive page, and a front page template making your WordPress implementation work more like a CMS rather than the typical blog.
14. Finalizing Your Theme
    In the last lesson we polish our theme by improving small details such as adding a favicon, a theme screenshot, a better pagination system, and more. Closing off with tips to excellent plugins and ways to improve your theme.

If you haven’t already, start by clicking on Lesson 1: Introduction to WordPress Themes and let’s get started!