Developing Your First WordPress Theme: Day 1 of 3

Themes are a huge part of what makes WordPress as popular as it is, and in this three-part series we’ll take you through a step-by-step process that results in a completed, functioning WordPress theme. No prior knowledge required, this is the perfect place to start if you’re completely new to WordPress!

WordPress Themes

Welcome to the first instalment in this three part series on how to get started with making themes for WordPress. Themes are one of the best things about WordPress and the ease of finding, installing and modifying them is one of the factors that has helped WordPress become the giant that it is today – over 20 million blogs are hosted on WordPress.com alone.

Of the millions of people that use WordPress, it’s likely that a large majority of those users don’t know how to produce a website template, let alone create a WordPress theme. It’s also quite likely that a lot of WordPress users aren’t familiar with terms such as ‘FTP’ or ‘Uploading’. Thanks to the in-built theme search engine and theme installer, users don’t need to know the technical details or aspects of how themes work or even how to upload them to their hosting account.

It’s this ease-of-use aspect of themes that make WordPress the robust blogging platform it is, powering not only personal blogs and diaries, but some of the largest technology and news blogs on the internet today. There are even entire marketplaces that rely on WordPress themes, such as ThemeForest, who’s authors make millions of dollars every year.

So we’ve established that themes are important, but you probably know all of this already. If you’re reading, then it’s obvious you want to jump on board and start creating your own themes for your own personal use, to share with others, or to sell on a marketplace or similar. In order for your theme to have an impact or become popular, it’s important to understand the make-up of a good theme.

What Makes a Good Theme?

A WordPress theme is easy to knock together, but a good theme takes planning, preparation and a lot of effort. A lot of people make a good living from selling WordPress themes because they know what makes a good theme and they know how to put that knowledge in to practice – a talent that you are hoping to acquire.

This series is focused on taking an existing, coded HTML/CSS design and converting it in to a living, breathing WordPress theme. Obviously this means that you will need to have a design that you can convert, but don’t worry if you don’t have one as we’ll provide a simple one to practice with in part two.

Since you’ll be designing your themes without our helping hand, let’s look at some of the things that distinguish the best selling themes from the standard freebie theme that doesn’t get much air time.

Overall Design

This point is a little difficult to describe, but a theme needs to look well-designed by modern design standards. What I mean by this is that it’s important to know the trends and expectations of a modern web design. Today, font replacement, CSS3 gradients, transparent boxes and ‘noisy backgrounds’ are the online fashion, but 10 years ago it was still commonplace to have cursor trails, animated gifs, and flaming text…

How many of you just shuddered? Of course, all of these tricks and trends are beyond the scope of this series and it’s down to you to decide on the attractiveness of a design. It’s always a good idea to get community feedback from websites such as Dribbble or Forrst as they’re home to many reputable theme designers and developers.

Widget Support

Something common to all of the most popular themes is their support for widgets. For those who have been living under a rock all these years; widgets are small, customizable add-ons that are often displayed in the sidebar or footer of a theme. Widgets are another great extendability option for WordPress that help make it so popular.

A lot of themes come with custom widgets built specifically for that theme, WordPress also comes with a set of in-built standard widgets such as a calendar, search box or archives. Through the dashboard it’s possible to customize in what order widgets are displayed and even in which area (sidebar, footer or anywhere else) they appear.

Widgets are great because they offer users a great way of adding functionality to a theme without having to touch a line of code. Widgets (mostly) use standardized CSS classes, meaning you don’t have to prepare for every single widget made, just provide some simple rules for them all to follow.

Comments and Trackback Support

One of the most common mistakes I see a lot of new WordPress theme developers make is to forget trackbacks, and not properly support the comment system. Although not every blog uses trackbacks, it’s important to realize that it could be a deal breaker for many blogs that do display trackbacks.

For those unfamiliar or not entirely aware of what trackbacks are; they’re a great way to build up incoming links and start networking with other bloggers. But they’re different from comments.

A new developers idea of trackback support might involve simply showing trackbacks mixed with comments – something that should be avoided to avoid comment clutter. A user reading the comments to a post has to scroll through a mix of pings, trackbacks and comments to find what they’re after when it’s easy to prevent this kind of behavior.

Since WordPress 2.7, nested comments have been a core function. Nested comments allow users to not only reply to the post or page, but also reply to a comment, much like on the Tuts+ sites (as shown above). Nested comments are a little tricker to implement than most other features but are a fantastic feature when done correctly and can greatly improve a theme’s value as nested comments promote comment activity – something favored greatly by bloggers.

Gravatars

Globally recognized avatars are a great feature to add to any theme, I’m sure you’re probably all familiar with them, but for those not familiar with the term; a gravatar is an avatar associated with your email – so whenever you comment on a blog it shows an avatar you set.

Gravatars are very easy to implement, so long as they’re properly placed in your design (not as an after-thought). Although some themes work better without, generally gravatars give users a closer connection with a blog as it adds a bit of personality to comments.

Featured Posts and Avatars

If you go to a popular marketplace such as ThemeForest and peruse the most popular themes of the week, you’ll notice that nearly all of them have some form of post avatar in place. Let’s take a look at one of the most popular themes available on ThemeForest — Striking:

Each post has an image with a set width and height that acts as an avatar. By including a post avatar, the images help break up the text and give the page a good flow. Of course avatars don’t have to be like this, here’s a different way of displaying post avatars used on our sister site Nettuts+:

Another great way to display posts is to use a featured posts section. Generally these are more common in magazine style themes (we won’t be using one in our personal theme) but give the theme a great added level of functionality. Here’s an example from a popular theme:

As you can see, at the top of the theme we have a large image overlaid by a title and an excerpt or description of the post/page it leads to. Featured posts can be the most popular posts of the month, or just the latest posts. They’re often a little overpowering for personal blogs, so it’s great to offer them as an option rather than a mandatory part of the design. The more customizable a theme, the higher the chance of it becoming popular.

Custom Post Types

Of course, not everything that gets posted on a blog is just a blog post. Bloggers might also just want to share some form of media, such as a vimeo, YouTube video or audio. A fantastic example of this kind of integration is in a recent theme called Gridlocked:

Gridlocked uses a custom post type (in this case the post type is a Vimeo post) which embeds a vimeo into the theme beautifully. Some of the other options the theme supports are YouTube videos, an audio player and post avatars. All of which (using their respective custom post type) look great at full width with no margin or padding at the top of the layout.

Custom post types are both effective and easy to implement, the blogger simply specifies a piece of meta information, the theme takes this information and decides which code it should display.

The Components of a Theme

As I’m sure you’re probably aware, themes are made up of many different files, each of which play their respective part in the displaying or functionality of a theme. Let’s have a look at some of the most common files WordPress recognizes by default that we’ll be dealing with. Most files are self explanatory by their name alone:

header.php

Usually this file contains our theme up until </head>, it also plays home to the wp_head() function, which is one of the most essential hooks in WordPress.

sidebar.php

An optional file called by the use of get_sidebar(), you can use this file for a sidebar, navigation or anything similar. This is also where you will usually include the code to allow widgets to run, if your theme allows them.

footer.php

An easy part to guess, this is where the theme wraps up and also where you can register a second area for widgets to display. Of course you can display widgets anywhere you want, but sidebar and footer are the most common.

page.php

Used to display a single page – not to be confused with a post.

single.php

The post file, used to display a single blog post but very similar to page.php in code.

index.php

As you can probably guess, index does the chunk of the work for a blog; displaying posts, search results, serving up error messages and so on.

functions.php

The functions file may be new to you. This is where theme specific functions are stored – most commonly the functions to register widget ready areas.

comments.php

Displays a loop similar to index.php which iterates through comments. This is also where trackbacks, nested comments and other related functionality is performed.

A theme can use as many or as few theme files as desired, but these are the files most common to almost every theme. Theme file structure is essentially the decision of the theme developer – for example there could be vimeo.php, youtube.php and audio.php that display their respective post types rather than having all of the code bundled in to one page.php or single.php.

Making Your Theme Customizable With an Options Page

A dashboard options page that allows easy customization of a theme can be a deal maker. A vast majority of popular themes have some sort of options panel that alleviate any need for the blogger to ever have to modify any code or graphics files. This is a great selling point, as not every blogger who uses your new theme will know that #000000 means black.

Options pages can be a simple one page layout with a few checkboxes, text areas and sliders, or they can be an entire admin panel within the dashboard featuring multiple pages to control many different elements of a theme. Typically, options pages allow customization of elements such as:

• Colour scheme
• Logo (plaintext or image)
• Favicon
• Details for social media streams (such as Twitter username)
• Various style options
• Many more

It’s impossible to list all of the options, as each theme is different from the last and requires different optional extras. While a small personal theme may not require a full blown options page, it’s important to remember that a majority of bloggers are not tech-savvy.

Next Week

Next week we will jump straight in to our code editors and start work on a basic, personal WordPress theme. You are more than welcome – encouraged – to use your own layout that you wish to convert to a WordPress theme, but don’t worry if you do not have one as a simple layout will be provided.

The prerequisites for next week will be a grasp of basic HTML, some basic PHP knowledge, and – ideally – an understanding of CSS. You do not need to know anything about WordPress themes as we will be starting from scratch!