Getting Started with Advanced Theming
Before themes were added to WordPress, customizing the design of the site meant modifying the main WordPress index.php file and the default print.css file. Version 1.5 added the first theme support and rudimentary child theme support. Over time, WordPress began to support other features, such as custom headers, custom backgrounds, and featured images.
Additionally, the capabilities of themes have grown steadily. Incremental improvement — beginning with a small, simple starting point and improving it over time — works very well in theme development. By developing incrementally, you can build a theme from start to completion from an existing, well-tested theme (most themes are part of a larger incremental improvement process) and maximize your development time. I can't think of a single theme I've developed that wasn't built on another theme.
There isn't a need to develop each theme from scratch. Choosing a good starting point will make a big difference on how quickly you can get your project off the ground.
Finding a good starting point
Choosing a solid starting point to build your latest and greatest theme design on can be time consuming. Although exploring all the available themes in detail is tempting, I find exhaustive searches waste more time than they save.
Typically, I begin with the most current theme unless there's a more suitable one. Because the design and capabilities of the theme were recently implemented, modifying it to meet the current project's needs is faster than rediscovering all the nuances of an older, unfamiliar theme.
You might wonder whether we ever build themes off other designers' themes. We did. These days, if a new theme comes out that shows how to integrate some new feature, we play around with the theme to understand the concept but always go back to one of our themes to implement the modification. The reason for this is simple. If we can implement the feature into our own design, we have a much better appreciation for how it works. Allowing someone else's code or design to do the heavy lifting can place a limitation on how we use that feature.
If you are new to theme development and haven't produced a theme of your own, we highly recommend starting with the WordPress default theme, Twenty Ten (see Chapter 1 in this minibook for a full analysis of the Twenty Ten theme). This theme is developed for helping new theme developers discover how themes work.
I use this approach in the examples in this chapter. Unless otherwise noted, all the examples are built off the WordPress default Twenty Ten theme.
Customizing the theme to your needs
After you select a theme for your project, you should create a copy of the theme. This way you can look at the unmodified version in case you accidentally remove something that causes the theme or design to break.
When we find code and styling that we don't believe we need anymore, we comment it out rather than deleting it. This removes the functionality but still allows us to add it back in if we change our mind.
A line of code can be commented out by adding // in front of it. For example:
// add_editor_style();
CSS can be commented out by wrapping a section in /* and */. For example:
/*#content {
margin: 0 280px 0 20px;
}
*/
#primary,
#secondary {
float: right;
/* overflow: hidden;
*/
width: 220px;
}
When you start finalizing the theme, go through the files and remove any blocks of commented styling and code to clean up your files.