What do you start with?
Before you start planning your custom WordPress theme, it's a good idea to familiarize yourself with the default structure and hierarchy of a WordPress site. By acquainting yourself with all its components, you'll be better positioned to decide how you want to organize them in your theme, in a way that distinguishes it from a vanilla installation. If you've worked with WordPress in the past and are already familiar with its parts, you can most likely skip this section and go straight to the section called "Defining Success".
At its core, WordPress is a blogging engine, so the default home page shows a list of recent posts. From there, users can navigate to pages that list posts by category, tag (we'll go over the difference between tags and categories shortly), or month (these monthly listing pages are called archives in WordPress). You can also click on the title of a post to reach its page, along with a list of comments and a form to post a new comment. WordPress also accommodates static pages that can exist in a hierarchy; for example, a given site might have an About page, with child pages called Contact Us and Our Staff.
Of course, this default structure can be customized endlessly, but by understanding what you start with, you'll know what needs changing and what should be kept.
Let's go over each of these components in a bit more detail.
Pages and Posts
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.
Drag widgets from here to a sidebar on their settings.
A monthly archive of your site's posts Categories
A list or dropdown of categories Meta
Log in/out, admin. feed and WordPress links
Your site's WordPress Pages Recent Posts
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.
Because of this, your first job as a theme designer is to think about what you want your theme to accomplish. What will it take for your theme to be successful? What characteristics should your completed theme possess?
Defining success can be as simple as a making a statement about your intentions for the theme. It might look like any of these:
■ "My theme will focus on delivering a new and exciting layout for blogs with text-driven content."
■ "I want to build a theme that allows photographers to display their images in a sleek, minimal design."
■ "Our goal is to develop a theme for video-based sites with a built-in collection of robust sharing tools."
■ "The purpose of this theme is to offer a simple template for small business websites."
What would be the definition of success for your particular WordPress theme? If you're unable to explain in one brief statement what your theme's goals are, the design process will be like throwing darts in the dark.
The beautiful thing about declaring a mission statement for your WordPress theme is that when you're confronted with a difficult design decision later on, you can always go back to that statement to help you out.
For example, imagine that you're trying to decide whether to include a cool new image slider for your theme. If your mission statement was the first one I listed before, chances are good that it's unnecessary, unless you can prove that people are going to need it. Most bloggers using your theme will probably be more interested in making it easy for their visitors to find the content they're looking for. Moreover, because these posts are unlikely to include images, devoting your design and development time to such a feature is a bad idea.
No matter how complex your design or coding challenges become in the later phases, your mission statement should be the guiding light that everything should follow.
■ What is the mission statement for your theme?
Selecting the type of content that your theme will focus on is no superficial decision; it will play a significant role in the design decisions you make, and the features you choose to include. For the most part, you can let your content do the work for you. Planning a set of features to complement your content is as easy as letting that content shine.
There is an extensive variety of content types available, with an even larger number of hybrids that exist. Using the four sample mission statements we outlined in the last section, here are the content types each one will primarily serve:
The classic blog archetype that WordPress was modeled on is built around text content that's frequently updated. Visitors to this type of site want to access the content that they're after easily. This could be articles, tutorials, journals, reviews, or any other form that primarily uses text to communicate. Authors will pick a text-based theme because it makes it easy to publish their writing, and because it makes it easy for their readers to find the content they're looking for.
With this theme, the typography itself becomes a key feature: big, juicy, readable text is more than a luxury—it's essential to the theme's success in meeting the demands of its viewers. Text-driven themes often carry a lot of blog posts as well, so it would be worth considering various methods that allow users to find relevant content. We'll discuss organization in more depth later on in this chapter.
Photographers, design studios, illustrators, and image-rich magazines are just some of the types of businesses that want to publish content that's centered around images. Visitors are likely to come to these sites for large, attractive images, and for the tools that make it easy to browse these images. Authors will generally pick a theme that caters towards this kind of content, giving images a lot of prominence in the layout.
An image-centric theme needs to consider the size of the main content column, as this determines the maximum width of images. It's also important to contemplate image-relevant features such as a lightbox, an image gallery template, custom thumbnails, and an image slider on the front page.
Video is an increasingly popular medium for delivering content on the Web. In many ways, the design goals and constraints of a video theme will be similar to those of an image-centric theme, though you'll have the benefit of a more consistent content size and shape to design for. Your typical site visitor will appreciate the ability to share videos easily with their friends, and publishers seek easy support for a number of popular embedded video players.
The video blog will need a customized layout and feature set to suit the needs of the video content. The layout must make the activity of watching the videos as easy as possible. Give some thought to where the video player (or players) will be located in the layout. Allowing visitors the ability to easily browse for similar videos would be a great feature. Social media sharing links should be easy to access as well, so that visitors can share the videos with their friends directly.
Though initially developed as a blogging platform, WordPress is also very well-suited to being used as a content management system for a business or other promotional website. As businesses recognize the importance of integrating powerful content management and social media tools into their websites, this type of WordPress-based site will only become more prevalent. Content on this kind of site will include About and Contact pages, though there should also be good support for blog or news content.
When it comes to this form of theme, ease of customization and branding is crucial, as the company will want to ensure the site reflects its professional identity. Key features often include highly customizable colors, space reserved for a bold mission statement on the home page, and plenty of ways to organize a firm's core business content into a form that more closely resembles a printed brochure than your standard text blog.
Of course, most customers will be looking to publish a mix of content types. For example, a small photography studio might be looking for a theme that makes it simple to create attractive static pages, in addition to the features common to image-centric themes, like galleries or sliders. Bloggers usually want the ability to easily include images or videos in their posts, while many businesses want to have blog content on their sites. Given these variations, having a good idea of the primary content type your theme aims to deliver will enable you to give such content particular prominence, and make your job easier when selecting features for your theme.
In each of these four examples, the key point to remember is that we're letting the content do the planning for us. You can always add or remove features based on your unique take on the archetype later on. At this point in the planning process, you should start by creating a bare-bones list of features that are essential to the content type and mission statement.
■ What is your theme's primary content type?
■ Do you need to plan for any other types of content that will be included in the mix?
■ What are the key features required to deliver the theme's core content?
■ What will the overall design layout look like?
Art historians are fond of the saying, "great artists stand upon the shoulders of their predecessors." The same goes for WordPress theme creators. The best themers choose not to start from square one. They look at what's already out there, then add their own unique blend of innovation. As such, doing a little reconnaissance (the military term for scouting out the battlefield) is a crucial part of the design process for a number of reasons:
■ It will tell you what's already being done in the field. Nobody wants to spend days crafting a specialized theme only to find a similar offering in existence.
■ You'll learn what's missing in the market. Spotting a new type of niche theme or feature that has yet to be built (or hasn't been built well) can often result in a blockbuster hit.
■ It will tell you what's working and what isn't. Often, themes will have discussion boards attached where you can read users' feedback. Why wait until your theme is done before you start collecting information about how people will use it?
Now that you know why you should do your recon, let's dig in a little deeper.
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 library1 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:
■ You encounter some ideas that are worth including in your own custom theme. By spending just a short while searching for lightbox plugins, you're able to plan out exactly what you want in your own theme's lightbox.
■ You discover that there's no current plugin for a certain feature that you had in mind—so you plan on building it directly into your theme. This enables you to address the functionality that WordPress users might be seeking. Later on you can use this unique feature to promote your theme.
■ You find that the image gallery system that you were going to use is irritating lots of publishers. By making a few adjustments based on this user feedback, you can make it more helpful to publishers.
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.
■ Scout out the Web for new ideas. Make a list of the scripts, plugins, and themes that you like; then go back to your previous feature list and revise as you see fit.
You may think to yourself, "Why not just design a theme that can handle every conceivable type of content?" Much like an automobile that also tries to be a helicopter, jet boat, and commercial airliner all at once, the idea of the catchall "Swiss Army knife" theme is a dangerous one. By tacking on every feature and design element you can imagine, you end up creating Frankenstein's monster; rather than succeeding at everything, your theme winds up failing to be particularly good at anything.
2 For more on the GPL and its relationship to WordPress themes, see the section called "Understanding the GPL" in Chapter 8.
This type of feature bloat can lead to a number of problems in a WordPress theme:
■ Content can become muddled, making it difficult for users to find what they're looking for.
■ Features might cause conflicts with other plugins, leading to frequent bugs or an unreliable layout.
■ Flashy tools might dominate the design, making it hard for publishers to draw attention to their content.
■ The amount of customization options may make it difficult for publishers to use.
Remember, WordPress is supposed to make the lives of authors and visitors easier. If a theme includes too many features, using them on a regular basis becomes cumbersome.
The plain fact is that it's often simpler to pick one type of content at which your theme can excel, and stick to it. If you encounter situations where you absolutely must add a new feature, you can make those decisions on a case-by-case basis, according to your theme's mission statement. There are always good reasons to make exceptions, but sticking to your theme's primary goals when creating your final feature set will ward off feature bloat in the long run.
Designing Based on Content is Different from Supporting It
One important point to note here is that while you should avoid designing a theme that focuses on all conceivable types of content, it's important that you at least support all types of content. This might seem like a contradiction, but I assure you I'm not just splitting hairs. Designing a theme for all kinds of content is distracting; supporting all kinds of content is just good practice. If an author of a text blog decides to include video or images in a post, and your theme's styles look broken or display incorrectly—your theme has failed. It's unnecessary to have a custom template for each and every type of content out there; just ensure that most common forms of media have at least some basic styling support.
■ Without detracting from the theme's primary goal, what additional features should your theme include to enhance a visitor's experience?
The people who will visit the sites using your theme are, ultimately, your audience. While it is impossible to predict accurately the type of user who's going to be making use of the content on your themes, it's worth spending some time considering the ideal visitor experience.
This may sound obvious, but you'd be surprised how few theme authors truly think about the ways a visitor will actually interact with their theme. Here are some examples of sites that have anticipated visitor behavior and planned ahead for it with carefully thought-out features:
This website caters to web developers by providing step-by-step tutorials. As such, the site includes a lot of code examples where the code from the tutorial is actually shown inside the blog post. In anticipating user behavior, Nettuts+ includes inline code examples in boxes that not only make the text look like code (complete with syntax highlighting), but include buttons for copying the script to the user's clipboard; this makes following the tutorial a seamless experience. A sample code snippet from Nettuts+ is shown in Figure 2.2.
Was this article helpful?