WordPress Theme Designer Welcome to WordPress 3.2 Theme Design! This book is intended to take you through the process of creating sophisticated professional themes for the
WordPress web 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
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.
- 1 What exactly is a premium theme
- 2 WordPress Theme Designer
Overview of WordPress perks
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 prewrapped in (sometimes large) chunks of layout
HTML, 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 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
Supplemental site content such as widgets, banners, and menus, wrapped in
div tags, li tags, or nav tags depending on how the theme is coded
WordPress can also include classes which let you add styling based on a variety of
circumstances. Most of those classes are controlled directly by the template tags
(which we’ll get into later).
That’s it! You decide how everything published via WordPress is styled and displayed.
The fruits of all those styling and show selections, together with WordPress example tags that pull your site’s content into your style, ar what your WordPress theme consists of.
Does a WordPress site have to be a blog ?
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.
Pick a theme or design of your own
It’s a good idea to approach theme design from two angles:
Â‹ Simplicity: typically it suits the shopper and/or the location to travel as barebones 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 everything displayed caters to the particular reasonably content the location offers. This ensures that the location are a few things attention-getting, that nobody else can
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.
Drawbacks of using an off-the-shelf theme
Using an off-the-shelf theme is a great way to get started with WordPress Theme Designer. 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.
What about premium themes and frameworks?
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)
What exactly is a premium theme
First off, a premium theme is solely a nicely (sometimes Associate in Nursing amazingly) designed WordPress theme that usually conjointly has several, very cool options. The author may have taken the time
comment forms and endless “widgetized” areas, as well as additional custom areas in the
administration panel where you can easily manage and update all the custom enhancements.
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
While premium theme designers often offer many ways to easily customize
their theme (a perk of choosing their theme over others), the images, CSS,
GPL license (we’ll learn all about this in Chapter 6,Your Theme in Action).
The authors may require you to leave their name, link, or other copyright/
attribution information somewhere within the theme. Essentially, read the
seller’s license information to understand what you have the right to change
and use common sense. Don’t steal other people’s design work to pass off
as your own. Really, it’s just not nice.
What is a framework theme
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.
What are child themes?
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.
Again, there are many theme frameworks available. A quick Google search for
“WordPress Theme Frameworks” will turn up quite a range to choose from
A CSS strategy – font sizing with ems
It is possible to set text in one of five different units – keywords, points, pixels, percentages,
and ems. These work in the following way:
element to have a font size of 16 pixels, and the
Keywords include xx-small, x-small, small, medium, large, x-large, and
xx-large. The medium option 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-small keyword 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. WordPress Theme Designer
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.
Because ems and percentages are relative values, they have two major advantages over pixels:
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 <body> element.
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.
A CSS strategy – working with a CSS framework
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.
960 grid is probably the most popular CSS framework out there because of the fact that
960 can be divided by a lot of numbers, giving you a great deal of flexibility for your layout.
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 usesthe 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.
WAMP stands for Windows, Apache, MySQL, and PHP, and it allows you to run an area internet server
on a Windows machine. To download it, go to http://www.wampserver.com.
The installation wizard includes instructions which will help you set up WAMP correctly for
your system—make sure you follow them!
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 file, 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 beginning page offers you a straightforward thanks to launch phpMyAdmin.
phpMyAdmin will allow you to easily create a database and a database user account, which
is required for installing WordPress.
Choosing a hosting provider
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.
The purpose of this chapter is to assist you produce a operating HTML5- and CSS3-based example mockup, with an eye fixed towards having it find yourself being
a WordPress theme. This theme will be responsive, meaning it will display
content optimally on mobile devices as well as desktop browsers. All the while,
we’ll be staying compliant with W3C standards and following smart usability practices. Our hope for this chapter is that even you style professionals could ddiscover interesting
tidbits that will help you in your WordPress theme design creation.
WordPress Theme Designer is essentially web design so, throughout the chapter,
we’ll be focusing a bit more on thinking about semantics, standards, and usability
first. We’ll then focus on what we want to design (keeping in mind it will end up
in WordPress) using the most simple, straightforward means possible: pencil
and paper, HTML, and CSS, and last, our graphics editor/drawing programs.
This approach will give us a more flexible, yet solid HTML and CSS structure.
While you might find this approach a little strange at first, it’s by no means
set in stone as the only right way to design a theme. Simply read through the chapter
and, even if you already have a polished, Photoshop-designed mockup,
go ahead and try to set up your HTML and CSS using the steps laid out in this
chapter. You may find it helps your process.