Starting with the Sandbox Theme

Building a theme using a theme framework provides many advantages, especially for development teams. Because all of our deployed themes use this framework, we already have an idea of how the parts of the theme work. In addition, we have a common CSS vocabulary — rather than reading each theme's style sheet, we can expect certain styles to be available because at the core is a theme framework. Finally, using a theme framework takes most of the heavy lifting out of the theme development process because many common problems and browser incompatibilities have already been addressed.

For example, the Sandbox theme framework has pre-built examples for several different web site styles. One-column, two-column (with the sidebar on the left or right), and three-column examples are shipped with the framework. All of these variants have been tried and tested in the current browsers and are known to work. This is extremely convenient when you need to start a site quickly. It should be noted that once you resize the sidebar widths in the CSS, you will have to tweak the entire CSS layout to accommodate different browsers' rendering quirks (Internet Explorer will always cause you problems) but with a little arithmetic, it's not too difficult to work out.

The Sandbox framework is very well thought out and loaded with CSS hooks for the body HTML element, each post, and each comment. For example, with a default Sandbox template, the body tag of each HTML document is multi-classed with a wide range of details. Using the Firebug add-on for Firefox, available online at http: //, consider this inspection of a single-post page shown in Figure 8-1.

I If you are not using Firebug for development of the front end of your iveb site, you are really missing out. Firebug has proven to be the most valuable iveb developer's tool in recent memory.

— 3it>L 1 ing^'^n-'ITC" ■»ln*"*flt cp ■

■CtxSrtJ L-1 a i »«■"le-T.Tpr»« ■ j-JOin c-Jl li ^JJ ■ Isiç.î» jv. ct:f1 :i « yi nm i:n-■t-ii-.j-r- m «i:thnr rVLucctr* ! -"«¡13■ ri i ~ fr tr 1J Ull III"!

I Viliv cX«WB-"b«ciLxv pl vam\ publiih iLitluji-*.L»u_d.

1] Uii 1*aniT Iwlnu1 i| lÉif ~l'l N M I U ' t IW'l t fdiv i û- ~ r,Li">

FIGURE 8-1: Firebug inspection of stock Sandbox theme CSS classes

The body tag is classed with year, month, day, and hour of the post, as well as the category, tags, and author. If the post were tagged with multiple keywords or in multiple categories, they would each be listed. Similar functionality has recently been added to the WordPress core and will work just as well, and in fact, many framework-type themes are emulating this behavior because it is so powerful to the front end developer. We feel this stands as a further testament on why Sandbox is a great theme to begin your theme build.

This same multi-classed CSS also applies to the posts on a loop page and the comments. The vast array of CSS hooks allows for easy CSS styling and opens up a ton of possibilities. Posts could be styled by the time of day they were posted or change colors every month to give your site an "edition" feel.

Additionally, Sandbox is chock-full of microformat support. Microformats are part of the semantic web, where markup enhances the content by following certain conventions. Search engines and some browsers respect these conventions and augment the user experience with the additional structured content. You will see microformats in the author information and a few other spots throughout the Sandbox theme.

You will find that with the stock Sandbox installation your theme is very minimal and plain. That is entirely by design. Sandbox is intended to be a minimal theme, but is entirely functional. Some people find this type of theme very appealing; after all, beauty is in the eye of the beholder. For development, this is advantageous because you are not bringing any cobwebs with you. With Sandbox you are building up entirely from a solid CSS foundation.

Sandbox is widget compatible with dynamic sidebars. It does, however, have only the two traditional sidebars built in, whereas some newer theme frameworks have multiple widget-ready zones — sidebars seems a misnomer when they are placed in different locations on the page.

The Sandbox theme does have its flaws. The minimal CSS is both a blessing and a burden. The default appearance looks basic and unfinished. No matter what, you will have to add some styling, which is expected. But with some theme frameworks, the default styles are at least presentable.

The Sandbox theme also does not include CSS reset style sheet. This leaves browsers to render unstyled elements in their own different styles, which can lead to box model rendering problems. The simple fix is to use a reset style sheet at the beginning of the theme style sheet or refer to other reset style sheets such as Eric Meyers' which is available online at http: //

If you are developing several themes for various clients, like we are, we recommend keeping a modified Sandbox theme in your toolbox. Our modified Sandbox theme is the starting point for all internally developed themes. This "Better Sandbox'' theme addresses the preceding issues, including delineating some base typography to build on and resetting elements to improve browser rendering. Our foundation theme also includes many common styles that are used across sites but are lacking in the stock Sandbox. These additional styles include classes like success and error for appropriate messages and extend the development team's common vocabulary.

Several newer theme frameworks have built on the Sandbox ideas. These are discussed later in this chapter. You should try these other frameworks and make a decision for yourself. In our opinion, Sandbox continues to be an excellent theme foundation to start with and it is what we continue to use daily. The balance between learning a theme framework on top of the WordPress framework and being able to dive right in on the PHP fits our needs nicely.


Creating your own theme can be as simple or as complicated as you want it to be. Sometimes, you merely want to change a logo or a color and it is a basic process. Often, you are creating a theme from scratch to meet a certain need or condition, or solely to obtain a specific design look and feel. Whatever your motivations are, this section discusses the basics for getting a new theme and site design up quickly using the Sandbox theme as a foundation.

The style.css file is what WordPress uses to reference your theme, and this file is required for your theme to work. In practice, you could create a new theme with only a style sheet and index.php template file, though the index file can be empty. Using the power of WordPress's theme hierarchy, WordPress automatically substitutes missing templates if your new theme does not have them. More on that later, but understand that is what allows you to get started creating your own theme.

When creating your own styles.css for your new theme, the first few lines are absolutely critical. These lines provide information to WordPress to use in the theme Control Panel and further reference your theme in the core. Your first few lines should read as follows (substitute your information, of course):


THEME URI: DESCRIPTION: Theme for my new site. Based on Sandbox. VERSION: 1.0

AUTHOR: David Damstra (and friends)


TAGS: sandbox, microformats, hcard, hatom, xoxo, widgets, blank slate, starter theme, minimalist, developer */

The information here is pretty self-explanatory. There is an additional optional field for theme hierarchy, covered later in the chapter. Make sure your theme name is unique to your installation. If you intend to release your theme for public use, either for free or for a premium, you should try to come up with a unique name to reduce naming collision in the directory and other installations. In addition, if you are deriving your theme from another theme, license permitting of course, you should uphold the license and copyright information from the original theme. Once you have addressed this required information for WordPress, the remainder of the file is traditional CSS and subject to the rules and structure imposed as such.

Not all development shops use the child theme functionality that is covered later. In some cases, the workflow fits better if a new theme is created by copying and renaming the foundation theme to a new folder and revising the style.css to reflect the new project. This technique has pros and cons, but it works well for some teams because the foundation theme does not change often enough to warrant more complex methodologies. Plus, when you have a theme in production, you do not want a change to the parent theme to cause a cascading rendering issue in your successfully deployed site. Creating a copy and making a working theme in this new directory removes the dependency on future browser rendering testing, which is a time- and human-intensive procedure — that is, no one has automated this

Was this article helpful?

0 0

Post a comment