WordPress Theme Development : Beginner's Guide - Third Edition

4.2 (5 reviews total)
By Rachel McCollin , Tessa Blakeley Silver
  • Instant online access to over 7,500+ books and videos
  • Constantly updated with 100+ new titles each month
  • Breadth and depth in over 1,000+ technologies
  1. Getting Started as a WordPress Theme Designer

About this book

If you’ve been using WordPress to build websites for yourself or clients, you’ve probably reached a point where you need to build your own theme. Being able to build your own themes means you can build beautiful, bespoke websites using WordPress and means you’re not limited to the themes you can download.

WordPress Theme Development Beginner’s Guide will take you through the process of building your first WordPress theme. It will show you how to write the HTML and CSS your theme will be based on, then convert that code to PHP for use in WordPress. Once you’ve done that you’ll learn how to add more features to your theme and make it responsive, accessible and SEO-friendly.

Start by designing your theme using HTML and CSS, then work through the steps to turn this into a fully functioning WordPress theme, including creating template files, adding template tags and PHP to display content, and giving your theme extra goodies like menus, widget areas and more.

Create a gorgeous, responsive and standards-compliant design for your theme using HTML5 and CSS3. Take your HTML and use it to create PHP template files using the WordPress template hierarchy, then add in template tags and the loop to display pages and posts in your theme. Add widget areas, menus and featured images. Learn how to debug your theme and validate it, ensuring it’s standards-compliant and accessible. Find out what steps you need to take to release your theme to the public, and finally learn some extra tips and tricks such as how to enhance your theme for SEO and how to add support for the WordPress theme customizer.

At the end of WordPress Theme Development Beginner’s Guide you’ll have the skills you need to build quality WordPress themes using your own designs. Working through a straightforward worked example, you’ll learn the steps you need to follow to create a theme from scratch.

Publication date:
March 2013
Publisher
Packt
Pages
252
ISBN
9781849514224

 

Chapter 1. Getting Started as a 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 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.

 

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 administration panels

  • 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 he template tags (which we'll get into later).

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.

 

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: Sometimes it suits the client and/or the site to go 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 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.

Drawbacks of using an off-the-shelf theme

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.

 

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 simply a nicely (sometimes an amazingly) designed WordPress theme that often also has many, really cool features. The author may have taken the time to include a host of JavaScript enhancements, like a rotating header slideshow, "Ajaxified" 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.

Tip

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, and JavaScripts of the theme are not required to fall under the WordPress 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.

Note

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.

Note

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.

 

Core technology you should understand


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.

WordPress

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.

Note

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.

CSS

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.

HTML

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.

PHP

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.

Other helpful technologies

If your project will be incorporating any other special technologies such as JavaScript, AJAX, or Flash content, the more you know and understand how these scripting languages and technologies work, the better it is for your theme-making experience (again http://www.w3schools.com/ is a great place to start).

Tip

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.

 

Tools of the trade


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:

HTML editor

You'll need a good HTML editor. Text editors which a lot of web developers trust include:

An HTML or text editor that includes the following features will work just great:

  • 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

  • Load files with FTP or local directories: Lets you work on remote files (or upload local files to a remote server) from your code editor

Tip

Free open source HTML editors

Free, open source text editors include:

Graphics editor

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:

Web browser

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/.

You'll also need to use other web browsers to test your theme on, as it will need to be compatible with the latest versions of the main browsers. Browsers you should be testing on include:

  • Firefox

  • Chrome

  • Safari for Mac

  • Opera

  • 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.

 

Basics of a WordPress theme


According to the WordPress codex a WordPress theme is:

A collection of files that work together to produce a graphical interface with an underlying unifying design for a weblog.

Themes are comprised of a collection of template files and web collateral such as images, CSS stylesheets, and JavaScript.

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 template hierarchy

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 file and a stylesheet.

Note

You can see the template hierarchy in detail at http://codex.wordpress.org/Template_Hierarchy.

The Loop

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.

Template tags and API hooks

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-specific 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 file 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 footer.php and 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.

 

Our development strategies


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.

Fonts and typefaces

The Cufon JavaScript technique, but for now, let's get some basic typography under our belts.

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:

    • Georgia (serif)

    • Verdana (sans serif)

  • Fonts available on most Macs and/or PCs:

    • Arial

    • Helvetica

    • Times New Roman

  • Fonts commonly used for code:

    • Monaco

    • Consolas

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:

  • 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.

  • 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

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

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.

Layoutcore

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.

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:

A quick overview of the layoutcore CSS is as follows:

  • It has several vertical lists and horizontal "grid list" options that can be applied to ul and ol lists, 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 .sfList for vertical menus. Using the vertical .sfList class, you can also assign the classes.dropRight or .dropLeft to determine on which side the drop-down menus appear or just assign .currentLevel if you want to have a vertical drop-down menu that automatically shows what section you're active in.

  • It also accommodates some very basic @media queries that appropriately size the #container and footer element's width property and turn off the .left and .right float 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.css file 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.

Tip

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).

Tip

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.

 

Setting up your WordPress sandbox


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.

Using WAMP

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.

The installation wizard includes instructions which will help you set up WAMP correctly for your system—make sure you follow them!

Using MAMP

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 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.

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.

Note

For details of WordPress hosting requirements, see http://wordpress.org/hosting/

Rolling out WordPress

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 http://example.com/wp-admin/install.php, where example.com is your domain name.

Tip

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.

 

Summary


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.

About the Authors

  • Rachel McCollin

    Rachel McCollin is an experienced WordPress developer and writer with a reputation for making difficult technical subjects easy to understand. She's been building WordPress sites for clients since 2010, and this is her fourth book on the technology. She's a regular writer for some of the most influential web design and development websites and her writing has helped thousands of people learn how to get started with WordPress and gain more from it.

    Browse publications by this author
  • Tessa Blakeley Silver

    Tessa Blakeley Silver's background is in print design and traditional illustration. She evolved over the years into web and multi-media development, where she focuses on usability and interface design. Prior to starting her consulting and development company hyper3media (pronounced hyper-cube media) http://hyper3media.com, Tessa was the VP of Interactive Technologies at eHigherEducation, an online learning and technology company developing compelling multimedia simulations, interactions, and games that met online educational requirements like 508, AICC, and SCORM. She has also worked as a consultant and freelancer for J. Walter Thompson and The Diamond Trading Company (formerly known as DeBeers) and was a Design Specialist and Senior Associate for PricewaterhouseCoopers' East Region Marketing department. Tessa authors several design and web technology blogs. Joomla! Template Design is her first book.

    Browse publications by this author

Latest Reviews

(5 reviews total)
In some parts it's no clear but in general is good
I noticed that there were a few mistakes in the text regarding the code . I have attached the image below. The templates are called in various points inside the markup and not in the very beginning of the file. That was quite annoying and frustrating because I have spent many hours trying to figure out how to do it, as a novice to this subject. The code from the source files was OK but the point was to see for myself and practicing.
Ik vind het een zeer gemakkelijk te volgen boek. Het heeft mij veel kennis opgeleverd hoe WordPress Themes werken. De instructies zijn zeer duidelijk en gestructureerd gebracht.
Book Title
Access this book, plus 7,500 other titles for FREE
Access now