Pages and posts are the two main types of content that you’ll find in a WordPress theme.

Posts are the bread and butter of the WordPress theme. You can have as many of them as you want, and they’re usually listed in reverse chronological order on blog list pages. Generally, posts are published periodically and used for any kind of timely content such as news items, blog entries, episodes of a podcast, stories, and so on.

WordPress pages are different from posts, in that they are static and not date-sensitive. Authors usually use pages for content like About information or Contact Us. A theme can have as many pages as the author wishes, and publishers can even use subpages to establish page hierarchy; however, the majority of sites use only a handful of top-level pages at most. The exception is a business site that uses WordPress as a CMS (content management system) rather than a blogging engine.

In addition to pages and blog posts, WordPress allows publishers to create two other forms of content: media and links. Links are just that: hyperlinks pointing to other pages on the Internet. Traditionally, this functionality was used to allow bloggers to maintain a blogroll—that is, a list of other blogs they enjoyed.

Media refers to any types of images, audio files, and video files that are uploaded to a WordPress site, and can subsequently be used in pages or blog posts.

The default handling of media and links is quite satisfactory for many sites. When you reach the design phase, though, you’ll need to consider how different types of media are displayed and keep them consistent with the rest of the theme’s visual feel.

WordPress also allows authors to add custom fields to their posts. For example, on a movie review site, the content publisher might assign a rating to each movie in addition to the review itself. Then, all the publisher need do is enter a key ("Rating”) and a value ("3 stars”) into the custom fields when creating their post.

Your theme might not rely heavily on custom fields, but you need to at least plan for their possible presence for the sake of design consistency. That said, if you’re designing a special-purpose theme, you can use custom fields as a way to implement a given feature.

Posts are the primary content type of most WordPress sites, and are usually quite numerous. As a result, WordPress includes a few features to help publishers organize posts, making them easier for readers to find.

Categories are a hierarchical method of organizing the site’s posts. For instance, if you have a site that offers reviews on automobiles, your categories would likely include "Cars," "Trucks," "Motorcycles," and "Recreational Vehicles." You can have subcategories as well; hence, under "Cars," you might have "Sedans," "Luxury," "Sports," and "Hybrids." An author can assign a post to any number of categories.

Tags are a way of attaching keywords to blog posts. Unlike categories, tags aren’t organized into any sort of hierarchy. Essentially, they allow you to be more granular in your classification of content. Using the previous example, a post could be filed under the category of "Cars," and then be tagged with "Blue," "Sunroof," and "V8."

As a general rule of thumb: categories organize content, while tags label content.

Any WordPress theme should enable content publishers to use either method of organization, and should make allowances for both in the theme design.

A key component of most blogs is a comment system for visitors to leave messages about the posts they view. Usually pages that contain a single post feature a list of posted comments and a comment form. In multiple-post pages (such as the home page, or a category or archive listing), often what’s shown is just the number of comments the post has received.

Comments can also be threaded, which means a comment can be posted in reply to a previous one. This is usually indicated visually by having the reply indented below the comment it addresses, though you can come up with your own way of representing it.

WordPress also allows publishers to easily add and arrange sidebar content using widgets. The most recent versions of WordPress include drag and drop interfaces that allow authors to simply configure the different types of content that should be shown in each sidebar. Let’s take a peek at what this interface looks like in WordPress 3.0, shown in Figure 2.1.

A good WordPress theme should enable publishers to use as many widgets as they want, and include them in a number of areas on the site without breaking the theme’s style or layout. This allows for more flexibility and increases the value a blogger gains from the theme. We’ll go into much more detail about how to include custom widgets and prepare sections of your theme for widgets in Chapter 6; in the meantime, just remember that some parts of your pages should be reserved for widget placement.

Pages in your theme that display blog posts—for example, a page which lists all posts in a given category, or all posts published in a certain month—rely on a feature of WordPress called The Loop. It’s one of the most important parts of a template—such a big deal, in fact, that WordPress geeks like to capitalize its name. We’ll be covering this in a lot more detail in Chapter 5; for now, all you need to know is that by default, posts are always displayed using this mechanism in essentially the same way. This is, of course, infinitely customizable, but the default behavior is that simple. It’s called The Loop because WordPress loops through all the blog posts that are to be displayed, and renders each one the same way.

WordPress 3.0 added support for user-defined menus, making WordPress even more powerful as a CMS. Users can create their own menus, made up of pages, categories, or any other links they’d like. They can also reorder the menu items at a whim. Your theme can even include multiple different menu locations, in the same way that you can include multiple widget areas, to allow your users even more control over their site’s navigation.

Allan will be showing you how to take advantage of custom menus in your theme in Chapter 7, but it’s worth keeping in mind that your users will potentially have full control over the site’s navigation. This means that you’re unable to depend on a fixed number of links or menu items, so your design has to be flexible.

Now that you know what a WordPress theme comprises, it’s time to start thinking about your theme, and how you want it to look and act.

One of the beautiful aspects about working with WordPress is that there are thousands of themes already in existence: some are great, others less so. Take some time to browse the Web for themes that are similar to what you’re trying to accomplish. If you’re building a hot new video theme, check out the array of themes that focus on video. There’s a good chance that you’ll be able to produce a list of the features that you love—as well as features that you hate—and any changes that you’d like to bring to your own personal take on a video theme.

The WordPress theme library has much to offer, but you should also look further afield. Some of the best themes are premium offerings showcased on outside websites. Open up your favorite search engine and begin hunting for themes that share your theme’s target market. Once you have a good grasp on the state of affairs for your particular niche, you can start making an educated list of features and design elements to take into the design phase.

Plugins are another reason why working with WordPress is so much nicer than working with other online publishing platforms. With over ten thousand plugins in the official plugin directory alone, it’s hard to come up with an idea that’s yet to be implemented in some form. Requiring authors to use outside plugins with your theme is generally a bad idea, since it makes your theme dependent on a third party; in many cases you can replicate the feature behind the plugin and turn it into a fully supported part of your theme. Taking the time to look into any relevant plugins will provide you with a crash course of the existing features that are available. This exercise also provides a veritable treasure trove of feedback since most of these plugins display ratings and comments from users.

Let’s look at an example of researching plugins to help you plan a theme. If you were building a photography theme, it follows that you’d search for existing plugins dealing with image-related functionality such as lightboxes and galleries. Here are just three hypothetical ways of using theme research:

Finally, searching for what’s new in the world of JavaScript is often a valuable exercise when hunting for new ways to deliver on your theme’s goals. In most cases, there’s no need to be an expert in any particular script language to be able to use scripts inside your theme. Most scripts are licensed under the GPL (which means you can distribute them in your theme files^[1]), and most are well-documented, so that installing and using them just requires following the provided instructions.

At this point, you should also give some thought to which JavaScript libraries (for example, jQuery or Prototype), if any, your theme will use. Depending on your level of JavaScript proficiency, libraries can make the task of developing custom features and shiny gadgets much easier.

Script research can be a lot of fun, because fancy new effects and features are constantly being developed by the coding community at large. While you do need to ensure that the scripts you include work on all major browsers, in most cases the script authors will have already done the testing for you.

Obviously, there’s a great deal of research that can be done beyond the scope of existing themes, plugins, and scripts. You can also hunt for examples of functionality on other platforms, and models of clever design in alternative media (print, movies, and even architecture can be sources of inspiration). The underlying principle behind this exercise is simple: now that you’ve crystallized the primary goals for your theme, go out and see if there are better ways to implement them than you’d previously anticipated.

Planning Milestone

Most WordPress sitemaps look quite similar, but how you organize the content is what will be unique to your theme. Evidently, you should plan for the variation that individual publishers will bring to your theme. Remember that they’ll be able to add any number of posts in any number of categories, not to mention any number of pages and subpages.

Some of the questions you’ll need to consider are:

A sitemap is also a great place to start recording which custom page templates you want to include. Some examples might be a custom image-gallery page template, a full-width template (with no sidebar), or another form of specialized content layout.

There is a nearly limitless number of ways that you can approach your theme’s sitemap, but let’s take a peek at two examples for the sake of highlighting differences, in Figure 2.5 and Figure 2.6.

In these two sitemap examples, notice how users arrive at the blog content differently. In the sitemap shown in Figure 2.5, the home page serves as a hub for all the blog content. Conversely, in the sitemap in Figure 2.6, all the blog content is tucked away in a blog section, which is reached by clicking a link on the home page. What you do with your own sitemap will ultimately depend on how you want to guide users through your theme.

When building wireframes for a WordPress theme, you need to sketch out the sections of the layout that are reserved for particular kinds of content. This will directly influence the first step in your design phase, so be as accurate as possible. You can be as advanced as you want, but in my experience you need at least four wireframes worked out before you can begin designing, to be used for:

In each of these four core wireframes—shown in Figure 2.7 through to Figure 2.10—take note that the core layout barely changes. Generally, the only aspect changing from one wireframe to the next is the structure of the content inside the main column.

You can also create wireframes for each custom page template you want to include, in addition to layout sketches for any custom features (such as lightboxes or galleries) that you might need once you enter the design phase.

Let’s take a look at a couple of different home page wireframes for the purpose of illustrating just how simple a wireframe can be (as well as how different two unique wireframes can look). We’ll look at one wireframe for a text-heavy blog in Figure 2.11, and another for a photo blog in Figure 2.12.

Notice that, while both wireframes are quite simple, each illustrates a unique layout that addresses the type of content that each blog will focus on. We’ll be concentrating on the design phase of the theme creation process in the next chapter, so at this point your wireframes can be as simple and straightforward as you’d like. If it feels like something is missing at this point, don’t fret: we’ll be digging into the nitty gritty details of what makes up a WordPress theme next!