Welcome to WordPress theme design! This title is intended to take you through the ins and outs of creating sophisticated professional themes for the WordPress personal publishing platform. WordPress was originally, and is foremost, a blog system. Throughout the majority of this book's chapters—for simplicity's sake — I'll be referring to it as a blog or blog system. But don't be fooled! Since its inception, WordPress has evolved way beyond mere blogging capabilities and has many standard features that are expandable with plugins and widgets, which make it comparable to a full CMS (Content Management System).
In these upcoming chapters, we'll walk through all the necessary steps required to aid, enhance, and speed your WordPress theme design process. From design tips and suggestions, to packaging up the final theme, we'll review the best practices for a range of topics—designing a great theme, rapid theme development, coding markup, testing, debugging, and taking it live.
The last three chapters are dedicated to additional tips, tricks, and various "how to" recipes for adding popular site enhancements to your WordPress theme designs using third-party plugins, as well as creating your own custom plugins.
As you're interested in generating custom themes for WordPress, you'll be very happy to know (especially all you web standards evangelists) that WordPress really does separate content from design.
You may already know from painful experience that many content management and blog systems end up publishing their content pre-wrapped in (sometimes large) chunks of layout markup (sometimes using table markup), peppered with all sorts of predetermined selector id and class names.
You usually have to do a fair amount of sleuthing to figure out what these id and classes are so that you can create custom CSS rules for them. This is very time consuming.
The good news is, WordPress publishes only two things:
• The site's textual content—the text you enter into the post and the page administration panels
• Supplemental site content wrapped in list tags — <li> and </li> — which usually links to the posts and pages you've entered and the meta information for those items
That's it! The list tags don't even have an ordered or unordered defining tag around them. WordPress leaves that up to you. You decide how everything published via WordPress is styled and displayed.
The culmination of all those styling and display decisions, along with special WordPress template tags that pull your site's content into you design, are what your WordPress theme consists of.
Does a WordPress site have to be a blog?
The answer to this question is—no. Even before the release of themes in WordPress 2.x, WordPress has been capable of managing static pages and subpages since version 1.5. Static pages are different from blog posts in that they aren't constrained by the chronology of posts. This means you can manage a wide variety of content with pages and their subpages.
WordPress also has a great community of developers supporting it with an ever-growing library of plugins. Using plugins, you can expand the capabilities of your server-installed WordPress site to include infinite possibilities such as event calendars, image galleries, sidebar widgets, and even shopping carts. For just about anything you can think of, you can probably find a WordPress plugin to help you out.
By considering how you want to manage content via WordPress, what kind of additional plugins you might employ, and how your theme displays all that content, you can easily create a site that is completely unique and original in concept as well as design.
Again, WordPress was built to be a blog system, and it has some great blog post and category tools. But if you want to use it to manage a brochure-style site, have a particular third-party plugin to be the main feature of your site, and downplay or even remove the blog, that's fine too! You'll just tweak your theme's template files to display your content the way you prefer (which is something you'll be very good at after reading this book).
Pick a theme or design your own?
• Simplicity: Sometimes it suits the client and/or the site to go as bare-bones as possible. In that case, it's quick and easy to use a very basic, already built theme and modify it.
• Unique and Beautiful: Occasionally, the site's theme needs to be created from scratch so that everything displayed caters to the specific kind of content the site offers. This ensures that the site is something eye-catching, which no one else will have. This is often the best route when custom branding is a priority or you just want to show off your "Hey, I'm hot-stuff" design skills.
There are many benefits to using or tweaking already built themes. First, you save a lot of time getting your site up with a nice theme design. Second, you don't need to know as much about CSS, XHTML, or PHP. This means that with a little web surfing, you can have your WordPress site up and running with a stylish look in no time at all.
The drawback to using an already built theme is that it may not save you as much time as you would hope for. You may realize, even with the new header text and graphic, several other sites may have downloaded and/or purchased it for themselves and you don't stand apart enough.
Perhaps your site needs a special third-party plugin for a specific type of content; it might not look quite right without a lot of tweaking. And while we're discussing tweaking, I find that every CSS designer is different and sets up their theme's template files and stylesheets accordingly. While it makes perfect sense to them, it can be confusing and time consuming to work through.
Your approach may have started out as simplicity, but then, for one reason or another, you find yourself having to dig deeper and deeper through the theme and pretty soon it doesn't feel like quick tweaking anymore. Sometimes you realize—for simplicity's sake (no pun intended) — it would have been a whole lot quicker to start from scratch.
Before trying to cut corners with a preexisting theme, make sure your project really is as simple as it claims to be. Once you find a theme, check that you are allowed to tweak and customize it (such as an open source or Creative Commons license or royalty free purchase from a template site), and that you have a look at the stylesheet and template files. Make sure the theme's assets seem logical and make sense to you.
Theme frameworks are wonderful in that they provide the core functionality of a theme, already started for you. The idea is they let you create child themes off the main theme, which you can then easily style to your liking.
They're particularly useful to designers who are short on time, very good with CSS, and don't want to deal with the learning curve of having to understand WordPress' template tags, hooks, and template page hierarchy.
The whole point of this book is to introduce you to the above concepts and introduce you to the basics of WordPress theme features so that you can create elegant comprehensive themes from scratch. You can then see how getting a little creative will enable you to develop any kind of site you can imagine with WordPress. You'll also be able to better take advantage of a theme framework, as you'll understand what the framework is accomplishing for you "under the hood" , and you would also be able to better customize the framework if you'd like to.
For many frameworks, there is still some amount of learning curve to getting up and running with them. But less of it will deal directly with futzing with PHP code to get WordPress to do what you want.
I'd encourage you to take a look at development with a framework and compare it to development from scratch. Having the skills this book provides you with under your belt will only help, even if you choose to go with a framework to save time.
Popular theme frameworks to choose from:
More and more frameworks show up every day, and each framework tries to address and handle slightly different focuses, features, and types of developers. As a bonus, some frameworks add options into the WordPress administration panel that allow the end user to add and remove features to/from the child theme they've selected.
You'll want to look at frameworks in terms of the options they offer that suit your development style, needs, and the overall community the framework caters to, to see if the framework is a good fit for your site's requirements.
WPFramework is a good general framework to start with (http: //wpframework. com/). Its aim is to stay straightforward and simple, while cutting down theme development time.
If you're interested in a framework that offers a lot of child themes that can be easily tweaked with just CSS and will also add a lot of bells and whistles for the end user in the administration panel, you'll want to look at more robust frameworks such as Carrington (http: / /carringtontheme . com/), Thematic (http : //themeshaper. com/thematic/), and Hybrid (http : //themehybrid. com/).
These frameworks may appear a bit more complex at first, but offer a range of rich features for developing themes and, especially if you understand the essentials of creating WordPress themes (as you will after reading this book), can really aid you in speeding up your theme development.
Again, there are many theme frameworks available. A quick Google search for "WordPress Theme Frameworks" will turn up quite a plethora to choose from.
This book's approach
The approach of this book is going to take you through the unique and beautiful route (or unique and awesome, whatever your design aesthetics call for) with the idea that once you know how to create a theme from scratch, you'll be more apt at understanding what to look for in other WordPress themes. You'll then be able to assess when it really is better or easier to use an already built theme versus building up something of your own from scratch.
This book is geared toward visual designers (with no server-side scripting or programming experience) who are used to working with the common industry standard tools such as Photoshop and Dreamweaver or other popular graphic, HTML, and text editors.
Regardless of your web development skillset or level, you'll be walked through clear, step-by-step instructions. But there are many web development skills and WordPress know-how that you'll need to be familiar with to gain maximum benefit from this book.
Most importantly, you should already be familiar with the most current stable version of WordPress. You should understand how to add content to the WordPress blog system and how its posts, categories, static pages, and subpages work. Understanding the basics of installing and using plugins will also be helpful (though we will cover that to some extent in the later chapters of the book as well).
Even if you'll be working with a more technical WordPress administrator, you should have an overview of what the WordPress site that you're designing entails, and what (if any) additional plugins or widgets will be needed for the project. If your site does require additional plugins and widgets, you'll want to have them handy and/or installed in your WordPress development installation (or sandbox — a place to test and play without messing up a live site). This will ensure that your design will cover all the various types of content that the site intends to provide.
What version of WordPress 2.x does this book use? This book focuses on WordPress 2.7 and 2.8. Everything covered in this book has been tested and checked in WordPress 2.8.5. You may occasionally note screenshots from version 2.7 being used, but rest assured, any key differences between 2.8, 2.7, and even 2.5 are clearly noted when applicable. While this book's case study is developed using version 2.7 and 2.8, any newer version should have the same core capabilities, enabling you to develop themes for it using these techniques. Bug fixes and new features for each new version of WordPress are documented at http://WordPress.org.
If you are new to WordPress, then I recommend you read WordPress Complete by April Hodge Silver.
Was this article helpful?