Welcome to WordPress 3.2 Theme Design! This book is intended to take you through the process of creating sophisticated professional themes for the WordPressweb publishing platform. Since its inception, WordPress has evolved way beyond mere blogging capabilities and has many standard features that are expandable with content types, plugins, and widgets, which make it comparable to a full Content Management System (CMS).
In this chapter and upcoming chapters, we'll walk through:
The perks of using WordPress and basics of how a theme works
The core technology you should understand and tools you should use to develop your theme
The essential elements you need to consider when planning your theme design
An overview of theme development strategies
Starting with semantic HTML5 markup
An overview of typography for the web
Using a CSS layout framework
Sizing typography with ems
Using "object-oriented CSS" techniques for graphic treatments
Setting up your WordPress theme design process
This chapter is mostly the background and overview of the key concepts you'll need to understand once it's "time for action" in the following chapters. Let's get started.
You may already know from painful experience that many content management and blog systems end up publishing their content prewrapped in (sometimes large) chunks of layout HTML, peppered with all sorts of predetermined selector
You usually have to do a fair amount of sleuthing to figure out what these IDs 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 such as widgets, banners, and menus, wrapped in
navtags depending on how the theme is coded
That's it! You decide how everything published via WordPress is styled and displayed.
The culmination of all those styling and display decisions, along with WordPress template tags that pull your site's content into your design, are what your WordPress theme consists of.
The answer to this question is—no. 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 that 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.
It's a good idea to approach theme design from two angles:
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 design skills.
There are many benefits to using or tweaking off-the-shelf 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, HTML, 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.
Using an off-the-shelf theme is a great way to get started with WordPress. It means you can build your first WordPress site with a coding experience, or with experience of writing code but not of building themes. You can also work with an existing theme to create your own, either editing the theme directly or by using a child theme (which we'll come to later).
But if you need to build a bespoke site, using an off-the-shelf theme will have its drawbacks and may not save you as much time as you would hope for.
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, 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.
Working with an off-the-shelf theme starts off feeling like the simplest approach, but as you delve deeper into the code, you may find yourself making more and more changes until you reach the point where it would have been easier to start form scratch.
Before making use of an existing theme, check if it really has everything you'll need for your project with minimal tweaking. And check its license—it should be GPL, like WordPress itself.
If you've done any research on the internet, you will have come across a host of WordPress frameworks and premium themes (which can often be used as frameworks).
Secondly (and more importantly), a premium theme is one that the developer wants you to pay for because they took the time to code up that design and include all those nice enhancements. Hence the "premium" on the theme.
Be careful with customizing premium themes
Frameworks are in many ways similar to premium themes, but the focus of the framework is not so much to be a "theme" all by itself but to be more of a "starter kit" that strips the need for understanding the WordPress'Theme API out of the design process and usually also adds great additional features and functionality. Most frameworks work on the assumption that you'll create a child theme of your own for the look and feel you want. Because frameworks do offer designers a "quick start" as well as extra features, similar to premium themes, some frameworks require purchasing or licensing for each site you use them on. There are also some very good open source frameworks that are free to download and use.
Frameworks are 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 the WordPress template page hierarchy, template tags, and plugin API hooks.
We'll learn later in Chapter 4, Advanced Theme Features, of this book that you can actually create a child theme off any theme, be it a framework theme, a premium theme, or your best friend's WordPress theme experiment.
The whole point of this book is to introduce you to these 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 need 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.
We'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 needs. 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.
The right framework for you will depend on your development style and the needs of your site, but some popular frameworks are listed next.
Themes that offer a lot of child themes which you can customize yourself:
Premium frameworks with additional features are as follows:
These frameworks may appear 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.
This book is geared towards 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 be at least somewhat familiar with the most current stable version of WordPress. You should understand how to add content to the WordPress system and how its posts, categories, and pages work. If available in the theme you're using, you should be aware of how to set up a custom menu (the WordPress default Twenty Ten theme will allow you to play with custom menus). 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. We'll cover the basics of setting up your sandbox in just a minute in this chapter.
What version of WordPress does this book use?
This book focuses on WordPress 3.4.2. While this book's case study is developed using Version 3.4.2, any newer version of WordPress should have the same core capabilities, meaning you can 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 it's worth reading WordPress 3 Complete, April Hodge Silver, Packt Publishing.
We'll be giving detailed explanations of the CSS rules and properties used in this book, especially the CSS3 rules and how to use progressive enhancement to support browsers that don't support CSS3. We'll also let you in on the "how and why" behind creating our style sheets. You should know a bit about what CSS is, and the basics of setting up a cascading stylesheet and including it within an HTML page. You'll find that the more comfortable you are with CSS markup and how to use it effectively with HTML, the better will be your WordPress theme-creating experience.
You don't need to have every markup tag in the XHTML or HTML5 standard memorized. If you really want, you can still switch to the Design view in your HTML editor to drop in those markup tags that you keep forgetting. However, the more HTML and HTML5 basics you understand, the more comfortable you'll be working in the Code view of your HTML editor or with a plaintext editor. The more you work directly with the markup, the quicker you'll be able to create well-built themes that are quick loading, semantic, expand easily to accommodate new features, and are search engine friendly.
You definitely don't have to be a PHP programmer to get through this book, but be aware that WordPress uses liberal doses of PHP to work its magic. A lot of this PHP code will be directly visible in your theme's various template files. PHP code is needed to make your theme work with your WordPress installation, as well as make individual template files work with your theme.
If you at least understand how basic PHP syntax is structured, you'll be much less likely to make mistakes while retyping or copying and pasting code snippets of PHP and WordPress template tags into your theme's template files. You'll be able to more easily recognize the difference between your template files, XHTML, and PHP snippets, so that you don't accidentally delete or overwrite anything crucial.
If you get more comfortable with PHP, you'll have the ability to change variables and call new functions or even create new functions on your own, again infinitely expanding the possibilities of your WordPress site.
The more web technologies you have a general understanding of, the more likely you'll be able to intuitively make a more flexible theme that will be able to handle anything you may need to incorporate into your site in the future. You don't need to be an expert in all of them to build a WordPress theme though.
Skills are one thing, but the better your tools are, and the more command you have over those tools, the better your skills can be put to use. Just ask any carpenter, golfer, or app programmer about the sheer importance of their favorite "tools of the trade", you're likely to get quite an earful.
In order to get started in the next chapter, you'll need the following tools to help you out:
View line numbers: Can help you find specific lines in a theme file, to help you identify any problems
View syntax colors: Helps you identify where you're working in PHP, HTML, CSS, and where the code is working
View nonprinting characters: Helps you see hard returns, spaces, tabs, and other special characters that you may or may not want in your code
Text wrapping: Lets you wrap text, so you don't have to scroll horizontally to edit a long line of code
The next piece of software you'll need is a graphics editor. While you can find plenty of CSS-only WordPress themes out there (and CSS3 gives you much more opportunity to create graphic effects with code), chances are that you'll want to expand on your design a little more and add nice visual enhancements.
The most popular graphics programs are Photoshop (or its lighter cousin, Photoshop Elements) and Fireworks, both from Adobe (http://www.adobe.com/products/).
If you're looking for a free, open source graphics program, you could try one of the following:
Finally, you'll need a web browser. Many developers use Firefox, available at http://mozilla.com/firefox/. It includes some advanced developer tools which are useful for debugging and delving into your code. If you're getting started though, you might find Google Chrome easier to use at first. It's fast and standards-compliant and available at https://www.google.com/intl/en/chrome/browser/.
Safari for Mac
Internet Explorer (Version 7 or 8 upwards)
It's unlikely that you'll have access to all of these browsers on your machine—Internet Explorer only runs on Windows and Safari only runs on a Mac, for example. To test them, you can use the AdobeBrowser lab tool, available at http://browserlab.adobe.com.
According to the WordPress codex a WordPress theme is:
A collection of ﬁles that work together to produce a graphical interface with an underlying unifying design for a weblog.
The next diagram illustrates how the WordPress theme works with the WordPress system: core installation, theme files, plugin files, and MySQL database, to serve up a complete HTML page to the browser:
We'll go over the specifics and code examples of each part of a WordPress theme in detail in Chapter 3, Coding it Up, but here are the basics to get you started:
The most important part of a WordPress theme to start realizing now is the template hierarchy . A WordPress theme is comprised of many file types including template pages. Template pages have a structure or hierarchy to them. That means, if one template file is not present, then the WordPress system will call up the next level template file. This allows developers to create themes that are fantastically detailed, which take full advantage of all of the hierarchy's available template files, and yet make the setup unbelievably simple. It's also possible to have a fully functioning WordPress theme that consists of no more than an index.php ﬁle and a stylesheet.
You can see the template hierarchy in detail at http://codex.wordpress.org/Template_Hierarchy.
Within most template pages in the hierarchy (not necessarily all of them), we'll be adding a piece of code called "the Loop ". The Loop is an essential part of your WordPress theme. It displays your posts in chronological order and lets you define custom display properties with various WordPress template tags wrapped in HTML markup.
Looking within a template page's "Loop", you'll find some interesting bits of code wrapped in PHP tags. The code isn't pure PHP, most of them are WordPress-speciﬁc tags and functions such as template tags, which only work within a WordPress system. Most tags and functions can have various parameters passed through them.
Not all WordPress tags and functions go inside the Loop. If you were to poke around the
header.php ﬁle included in the default Twenty Ten theme, you'll find several tags that work outside the Loop. Specifically in the
header.php template page (as well as the
sidebar.php template pages), you'll also find several WordPress-specific functions that are part of the
Plugin API and Script API
Again, no need to worry about the specifics of these now. We'll be covering all these terms in detail with examples in Chapter 3, Coding it Up, plus the Appendix will have a complete Quick Reference Cheat Sheet for you to quickly look up all of these specifics.
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 better at understanding what to look for in other WordPress themes, premium themes, and frameworks. 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.
Chapter 2, Preparing a Design for Our WordPress Theme will cover creating an HTML5-and CSS3-based, design "mock-up" that will work across all browsers as well as be responsive and mobile ready. In Chapter 3, Coding it Up, we'll take that working HTML/CSS code and break it down into template pages injected with template tags and essentially "WordPress-ize" it into a fully functional theme. In Chapter 4, Advanced Theme Features and beyond, we'll learn how to add some great advanced features as well as properly validate and package our theme to share it with the world. Don't let the "Beginner" series this title is under fool you. By the end of this book you'll probably be ready to create your own polished, professional themes for clients or even premium themes.
When envisioning the theme's typography, think about the type of information the site will (or might) hold, and what's expected along with what's in vogue right now. Try to think in terms of headers, secondary fonts, block-quotes, specialty text (for code), and paragraph page text.
You can use any fonts you want as long as you think there's a really good chance that others will have the same font on their computers. Here is a list of the basic fonts that work well on the screen:
Fonts designed for viewing on screen:
Verdana (sans serif)
Fonts available on most Macs and/or PCs:
Times New Roman
Fonts commonly used for code:
It is possible to set text in one of five different units – keywords, points, pixels, percentages, and ems. These work in the following way:
mediumoption is the same as the default font size set by the browser, and the others are set in relation to this, for example, the
x-smallkeyword equates to 9 pixels on desktop browsers in their default setting. Keywords are limited, with only seven choices, and they are imprecise as it's impossible to know if the user has changed the browser's default size or if different browsers are using a different default size. It's therefore not a good idea to use keywords.
Points will be familiar to you if you use a word processing or desktop publishing program, and they are related to the size of text on the printed page. Their only real application in websites is for a separate print stylesheet—they generally aren't used in screen stylesheets.
Pixels are probably the most commonly used, and relate to the pixels on the screen. They provide fine control over exact dimensions but because the font size for each element (for example, headings) has to be set separately, you have to edit each one if you want to make the font sizes larger or smaller across the site.
Percentages change the text size in relation to the size set by the browser (a bit like keywords), but give much finer control. You can also use them to set the size of text in an element relative to the size it would normally inherit from elements higher in the html structure. For example, if you set the
<body>element to have a font size of 16 pixels, and the
<h1>tag to have a font size of 120 percent, its size will be 120 percent of 16 pixels, which is 19.2 pixels.
Ems are also relative, and work in exactly the same way as percentages, so 1.2em is the equivalent of 120 percent. Some developers find that the smaller numbers are easier to work with. They're also useful when styling layout relative to text size. For example, in the Carborelli's call to action box, the padding is in ems, so it would be based on the size of the text in that element. If we used percentages for that padding, the browser would use a percentage of the width or height of the call to action's containing element instead.
If you set the site's base text size at 14 pixels, for example, using the
<body>element, and set other elements with different font sizes using ems, then at a later date decide to make the text size larger, all you need to do is change the size for the
<body>element and this will have a knock-on effect on all other elements or selectors that have been set in ems or pixels. This also means that you can adjust the text size for all parts of the site on mobile devices using one change – to the font size of the
As ems are relative, they adjust when the user changes their text size settings in their browser, for example if he or she is visually impaired or short-sighted. Pixel values won't do this so well. This makes ems much better for accessibility.
You could use either, but ems are more commonly used as they're simpler to work with.
As we're about to learn, there are lots of CSS frameworks to choose from. Regardless of which one you end up with, this is where a lot of time-saving "magic" can start to happen for you and your design process. By using a CSS framework, you can quickly set up layout positioning for your mock-up. Let's take a quick tour of the top two CSS framework systems available.
You can find it at http://960.gs/.
Blueprint includes typography, form starters, and other plugins to choose from. It's based on a grid of 24 columns that are 30-pixel wide, with a 10-pixel margin, and the default is 950-pixels wide. You can find out all about it at: http://www.blueprintcss.org.
The tutorial in this book uses the layout core framework developed by me.
Layoutcore is very simple. It uses object-oriented CSS, meaning that, instead of assigning styling to specific elements in your markup, you add classes defined in layoutcore which are designed to style whichever elements they're applied to. For example, these will control floats, widths, backgrounds, and fonts.
To learn more about object-oriented CSS, see http://coding.smashingmagazine.com/2011/12/12/an-introduction-to-object-oriented-css-oocss/.
Here's an example of a layout using layoutcore:
... <div id="container"> <div class="left eighth margin-right"> </div> <div class="left eighth margin-right"> </div> <div class="left quarter"> </div> <div class="right half"> <div class="push"></div> <div class="right third"> </div> <div class="left two-thirds"> </div> </div> <div class="push"></div> </div><!--//#container--> …
This markup would create a layout similar to the following screenshot:
It has several vertical lists and horizontal "grid list" options that can be applied to
ollists, which turn them into horizontal lists that wrap from 2 up, to 8 up.
It also makes the suckerfish method for drop-down menus a breeze (we'll break down the CSS for this in detail in Chapter 4, Advanced Theme Features). You simply assign the
.sfTabclass for horizontal menus or
.sfListfor vertical menus. Using the vertical
.sfListclass, you can also assign the classes
.dropLeftto determine on which side the drop-down menus appear or just assign
.currentLevelif you want to have a vertical drop-down menu that automatically shows what section you're active in.
It also accommodates some very basic
@mediaqueries that appropriately size the
footerelement's width property and turn off the
.rightfloat properties to get the layout's basic responsiveness set up and ready to roll.
As with any other framework you use (or just plain stylesheet you create), the
layout-core.cssfile uses the Eric-Meyers reset so that the layout and style rules you set up look as consistent as possible across all browsers.
Last, for good measure, it accommodates some very common mime-type assignment images and social networking icons.
More CSS frameworks
There are tons of great frameworks out there, each one taking in different approaches or end solutions into account.
You may find one that works better for you than the ones mentioned here. For some examples, see http://speckyboy.com/2011/11/17/15-responsive-css-frameworks-worth-considering/
To find out more about it and download a 10k minified version, visit my CSS site http://csscheatsheet.net/layout-core (you get the unminified version with this chapter's code pack so you can look through it in detail).
Multiple class styles assigned to the same HTML object tag?
Hopefully, this is not a totally new CSS concept for you, but as you can see by the description of CSS frameworks and my quick
layout-core.css examples given previously, you can have as many classes as you want assigned to an HTML object tag. Simply separate the class names with a blank space and they'll affect your HTML object in the order that you assign them. Keep in mind that the rules of cascading apply, so if your second CSS rule has properties in it that match the first, the first rule properties will be overwritten by the second. We'll delve even further into using this technique later on in this chapter and there are more suggestions for this trick in Chapter 7, Tips and Tricks.
If you have a version of WordPress running that you can play with, great. If you don't, it's a good idea to have a locally running installation. Installing and running a small web server on your local machine or laptop has become very easy with the release of WAMP (Windows, Apache, MySQL, and PHP ) and MAMP (Mac, Apache, MySQL, and PHP ). A local server offers you several conveniences compared to working with WordPress installed on a hosting provider.
WAMP stands for Windows, Apache, MySQL, and PHP, and it lets you run a local web server on a Windows machine. To download it, go to http://www.wampserver.com.
Similar to WAMP, MAMP stands for (you guessed it!) Mac, Apache, MySQL, and PHP. Mac users will head on over to http://mamp.info and download the free version of the server.
Once you download and unpack the ZIP and launch the
.dmg ﬁle, it's a pretty straightforward process for copying the
MAMP folder to your
Applications folder and launching the app.
Again, like WAMP, MAMP from the start page offers you an easy way to launch phpMyAdmin. phpMyAdmin will allow you to easily create a database and a database user account, which is required for installing WordPress.
If you want to work remotely, or to publish your site to the web, you'll need hosting. There are hundreds of hosting providers out there so finding the right one can be tricky – the important thing is that they provide support for WordPress.
Your hosting will need to include Apache, MySQL, and PHP in order for WordPress to operate. It's also a big help if you have access to CPanel and phpMyAdmin.
Many hosting providers offer Fantastico or Softaculous for one-click installs, which can speed up the installation process and be useful for WordPress beginners. But be sure that this gives you the latest version of WordPress—if not, upgrade immediately after installing. It's important to use the latest version of WordPress to avoid any security problems. If you want maximum control over your WordPress installation, it's best to install it yourself.
For details of WordPress hosting requirements, see http://wordpress.org/hosting/
You'll be pleased to know that WordPress is easy to install. Once you have a MySQL database set up with a username and password, you simply unzip the latest WordPress version and copy it to your site's
root folder and then run the installation by navigating to
http://localhost/wp-admin/install.php, or for a remote installation, to
example.com is your domain name.
WordPress in 5 minutes (or less)
For a complete overview of installing WordPress, take a look at the WordPress 5-minute installation guide from the Codex: http://codex.wordpress.org/Installing_WordPressAgain. Also, the book we mentioned earlier, WordPress 3.0 Complete, April Hodge Silver,Packt Publishing will walk you through a WordPress installation, step by step.
To get going on your WordPress theme design, you'll want to understand how the WordPress blog system works, and have your head wrapped around the basics of the WordPress project you're ready to embark on. If you'll be working with a more technical WordPress administrator and/or PHP developer, make sure your development installation or sandbox will have the same WordPress plugins that the final site needs to have. You'll want to have all the recommended tools installed and ready to use, as well as brush up on those web skills, especially XHTML and CSS. Get ready to embark on designing a great theme for one of the most popular, open source blog systems available for the Web today.