WordPress Theme Design

There is a newer version of this book available - WordPress 2.8 Theme Design
WordPress Theme Design
eBook: $23.99
Formats: PDF, PacktLib, ePub and Mobi formats
save 20%!
Print + free eBook + free PacktLib access to the book: $63.98    Print cover: $39.99
save 37%!
Free Shipping!
UK, US, Europe and selected countries in Asia.
Also available on:
Table of Contents
Sample Chapters
  • Take control of the look and feel of your WordPress site
  • Simple, clear tutorial to creating Unique and Beautiful themes
  • Expert guidance with practical step-by-step instructions for theme design
  • Design tips, tricks, and troubleshooting ideas

Book Details

Language : English
Paperback : 224 pages [ 235mm x 191mm ]
Release Date : May 2008
ISBN : 1847193099
ISBN 13 : 9781847193094
Author(s) : Tessa Blakeley Silver
Topics and Technologies : All Books, CMS and eCommerce, Content Management (CMS), Open Source, WordPress

Table of Contents

Chapter 1: Getting Started as a WordPress Theme Designer
Chapter 2: Theme Design and Approach
Chapter 3: Coding It Up
Chapter 4: Debugging and Validaton
Chapter 5: Your Theme in Action
Chapter 6: WordPress Reference
Chapter 7: Dynamic Menus and Interactive Elements
Chapter 8: AJAX / Dynamic Content and Interactive Forms
Chapter 9: Design Tips for Working with WordPress
  • Chapter 1: Getting Started as a WordPress Theme Designer
    • WordPress Perks
    • Does a WordPress Site Have to Be a Blog?
    • Pick a Theme or Design Your Own?
      • Drawbacks to Using a Pre-Made Theme
    • This Book's Approach
    • Things You'll Need to Know
      • WordPress
      • CSS
      • XHTML
      • PHP
      • Not Necessary, but Helpful
    • Tools of the Trade
      • HTML Editor
      • Graphic Editor
      • Firefox
      • We'll Be Developing for Firefox First, then IE
    • Summary
  • Chapter 2: Theme Design and Approach
    • Things to Consider
      • Types of Blogs
      • Plug-ins and Widgets
    • Getting Ready to Design
      • We Have a Problem
      • It Gets Worse
    • The Solution–Rapid Design Comping
    • Let's Get Started
      • Sketch It
        • Consider Usability
      • Start with the Structure
        • The DOCTYPE
        • The Main Body
        • Attach the Basic StyleSheet
        • Basic Semantic XHTML Structure
    • Adding Text–Typography
      • Start with the Text
        • Font Choices
        • Cascading Fonts
        • Font Sizing
        • Paragraphs
        • Default Links
    • The Layout
      • Navigation
      • More Navigation–WordPress Specific Styles (OK, Style)
      • Color Schemes
      • Two-Minute Color Schemes
      • Color Schemes with Photoshop
      • Adding Color to Your CSS
    • Create the Graphical Elements
  • Relax and Have Fun Designing
  • Slice and Export
  • Summary
  • Chapter 3: Coding It Up
    • Got WordPress?
      • Understanding the WordPress Theme
    • Your WordPress Work Flow
    • Let's Build Our Theme
    • Tabula Rasa
      • Including WordPress Content
        • The Loop
        • The Sidebar
        • Breaking It Up–Separating Your Theme Into Template Files
        • The Home Page
        • Internal Pages
    • Static Pages
      • Quick Recap
    • Fun with Other Page Layouts
    • Don't Forget About Your 404 Page
  • Summary
  • Chapter 4: Debugging and Validaton
    • Don't Forget About Those Other Browsers and Platforms
    • Introduction to Debugging
    • Troubleshooting Basics
      • Why Validate?
      • PHP Template Tags
      • CSS Quick Fixes
    • Advanced Troubleshooting
    • Fixing CSS Across Browsers
    • Box Model Issues
    • Everything Is Relative
    • To Hack or Not to Hack
    • Out-of-the-Box-Model Thinking
    • The Road to Validation
    • Advanced Validation
      • Firefox's JavaScript/Error Console
      • The Web Developer's Toolbar
      • FireBug
    • Extra Credit
      • What About the New Safari Mobile Browser?
    • Summary
  • Chapter 5: Your Theme in Action
    • A Picture's Worth
    • Theme Packaging Basics
    • Describing Your Theme
    • Licensing?
    • Create a ReadMe.txt File
    • Zip It Up
    • No Way to Zip?
    • One Last Test
    • Get Some FeedBack and Track It
    • Summary
  • Chapter 6: WordPress Reference
    • Class Styles Generated by WordPress
    • Using the Template Selector Feature
    • Template Hierarchy
      • New Template Tag in 2.5
      • Great Template Tags for Tags from 2.3
        • Adding Tag Display to Your Theme
      • General Template Tags—the Least You Need to Know
      • Include Tags
        • Custom Includes—Streamline Your Theme
      • The Loop Functions
      • WordPress Core Functions
    • Summary
  • Chapter 7: Dynamic Menus and Interactive Elements
    • DYI or Plug-ins?
    • Dynamic Menus?
      • Drop-Down Menus
      • DIY SuckerFish Menus in WordPress
        • Applying CSS to WordPress
        • Applying the DOM Script to WordPress
    • Flash-ize It
      • Flash in Your Theme
        • Pass Flash a WordPress Variable
        • Users Without Flash, Older Versions of Flash, and IE6 Users
      • Flash in a WordPress Post or Page
    • Summary
  • Chapter 8: AJAX / Dynamic Content and Interactive Forms
    • Preparing for Dynamic Content and Interactive Forms
      • You Still Want AJAX on Your Site?
    • Plug-ins and Widgets
      • Plug-ins
      • Widgets
    • Getting Your Theme Ready for Plug-ins and Widgets
      • Plug-in Preparations
      • Installing the AJAX Comments Plug-ins
      • Widget Preparations
      • Installing the Google Reader Widget
    • AJAX–It's Not Just for Your Site Users
      • pageMash
    • The AJAX Factor
      • JavaScript Component Scripts
    • Summary
  • Chapter 9: Design Tips for Working with WordPress
    • The Cool Factor
      • Rounded Corners
        • The Classic – All Four Corners
        • The Two Image Cheat
      • Creative Posting
      • Breaking Boundaries
      • Keep Tabs on Current Design Trends
      • Graphic Text
        • Extra Credit – Use PHP to make Graphic Headers Easy
    • Good Design isn't Always Visual – Looking at SEO
      • Search Engine Friendly URLs
      • Keywords and Descriptions
        • DYI Metatags
        • Metatag Plug-ins
    • Summary

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.

Sorry, we don't have any reviews for this title yet.

Code Downloads

Download the code and support files for this book.

Submit Errata

Please let us know if you have found any errors not listed on this list by completing our errata submission form. Our editors will check them and add them to this list. Thank you.


- 8 submitted: last submission 08 Aug 2012

Errata type: Other | Page number: 4

There are no bolded items in the code used as an example for drawing the reader's attention to the bolded items.It is the exact same as the code above it (non-bolded).


Errata type: Typo | Page number: 24

"...to peak your interest..." should be: "...to pique your interest...".


Errata type: Typo | Page number: 25

"...a display of text to peak interest..." should be: "...a display of text to pique interest...".


Errata type: Typo | Page number: 27

1st paragraph "it's requirements" should be "its requirements".


Errata type: Typo | Page number: 28



Errata type: Technical | Page number: 69

"To get your index.php page to read your style.css page, you must replace the @ import url code in your home.php page with the following:" should read "To get your index.php page to read your style.css page, you must replace the @import url code in the header tags of your index.php page with the following."


Errata type: Other | Page number: 83

should be


Errata type: Typo | Page number: 146

DYI or Plug-ins? - Should be DIY (do-it-yourself). Also, it needs to be the same in the Table of Contents (p. iv)


Sample chapters

You can view our sample chapters and prefaces of this title on PacktLib or download sample chapters in PDF format.

Frequently bought together

WordPress Theme Design +    Node.js Blueprints =
50% Off
the second eBook
Price for both: £25.35

Buy both these recommended eBooks together and get 50% off the cheapest eBook.

What you will learn from this book

  • Set up a basic workflow and development environment for WordPress theme design
  • Create detailed designs and code them up
  • Enhance your sites by choosing the right color schemes and graphics
  • Debug and validate your theme using W3C's XHTML and CSS validation tools
  • Customize and tweak your theme's layout
  • Set up dynamic drop-down menus, AJAX/dynamic and interactive forms
  • Download and install useful plug-ins and widgetize your theme
  • Improve post and page content using jQuery and ThickBox
  • Add interactivity to your themes using Flash
  • Includes a reference guide to WordPress 2.0's template hierarchy, markup, styles and template tags, as well as include and loop functions

Chapter 1 introduces you to the WordPress blog system and lets you know what you need to be aware of regarding the WordPress theme project you're ready to embark on. The chapter also covers the development tools that are recommended and web skills that you'll need to begin developing a WordPress theme.

Chapter 2 looks at the essential elements you need to consider when planning your WordPress theme design. It discusses the best tools and processes for making your theme design a reality. The author explains her own 'Rapid Design Comping' technique and gives some tips and tricks for developing color schemes and graphic styles for your WordPress theme. By the end of the chapter, you'll have a working XHTML and CSS based 'comp' or mockup of your theme design, ready to be coded up and assembled into a fully functional WordPress theme.

Chapter 3 uses the final XHTML and CSS mockup from Chapter 2 and shows you how to add WordPress PHP template tag code to it and break it down into the template pages a theme requires. Along the way, this chapter covers the essentials of what makes a WordPress theme work. At the end of the chapter, you'll have a basic, working WordPress theme.

Chapter 4 discusses the basic techniques of debugging and validation that you should employ throughout your theme's development. It covers the W3C's XHTML and CSS validation services and how to use the FireFox browser and some of its extensions as a development tool, not just another browser. This chapter also covers troubleshooting some of the most common reasons 'good code goes bad', especially in IE, and best practices for fixing those problems, giving you a great-looking theme across all browsers and platforms.

Chapter 5 discuss how to properly set up your WordPress theme's CSS style sheet so that it loads into WordPress installations correctly. It also discuss compressing your theme files into the ZIP file format and running some test installations of your theme package in WordPress's administration panel so you can share your WordPress theme with the world.

Chapter 6 covers key information under easy-to-look-up headers that will help you with your WordPress theme development, from the two CSS class styles that WordPress itself outputs, to WordPress's PHP template tag code, to a breakdown of "The Loop" along with WordPress functions and features you can take advantage of in your theme development. Information in this chapter is listed along with key links to bookmark to make your theme development as easy as possible.

Chapter 7 dives into taking your working, debugged, validated, and properly packaged WordPress theme from the earlier chapters, and enhancing it with dynamic menus using the SuckerFish CSS-based method and Adobe Flash media.

Chapter 8 continues showing you how to enhance your WordPress theme by looking at the most popular methods for leveraging AJAX techniques in WordPress using plugins and widgets. It also gives you a complete background on AJAX and when it's best to use those techniques or skip them. The chapter also reviews some cool JavaScript toolkits, libraries, and scripts you can use to simply make your WordPress theme appear 'Ajaxy'.

Chapter 9 reviews the main tips from the previous chapters and covers some key tips for easily implementing today's coolest CSS tricks into your theme as well as a few final SEO tips that you'll probably run into once you really start putting content into your WordPress site.

In Detail

This title will take you through the ins and outs of creating sophisticated professional themes for the WordPress personal publishing platform. It will walk you through clear, step-by-step instructions to build a custom WordPress theme. From development tools and setting up your WordPress sandbox, through design tips and suggestions, to setting up your theme's template structure, coding markup, testing and debugging, to taking it live it reviews the best practices. The last three chapters are dedicated to additional tips, tricks and various cookbook recipes for adding popular site enhancements to your WordPress theme designs using third-party plugins.

Whether you're working with a pre-existing theme or creating a new one from the ground up, WordPress Theme Design will give you the know-how to understand how themes work within the WordPress blog system, enabling you to take full control over your site's design and branding.

Expert guidance on designing a great theme for one of the most popular, open-source blog systems available for the Web today!


Theme design can be approached from two angles. The first is simplicity; sometimes it suits the client and/or the site to go as bare-bones as possible. In that case, it's quick and easy to take a very basic, pre-made theme and modify it.

The second is "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 book is going to take you through the Unique and Beautiful route with the idea that once you know how to create a theme from scratch, you'll be more apt at understanding what to look for in other WordPress themes.

Who this book is for

This book can be used by WordPress users or visual designers (with no server-side scripting or programming experience) who are used to working with the common industry-standard tools like PhotoShop and Dreamweaver or other popular graphic, HTML, and text editors.

Regardless of your web development skill-set or level, you'll be walked through the clear, step-by-step instructions, but familiarity with a broad range of web development skills and WordPress know-how will allow you to gain maximum benefit from this book.

Code Download and Errata
Packt Anytime, Anywhere
Register Books
Print Upgrades
eBook Downloads
Video Support
Contact Us
Awards Voting Nominations Previous Winners
Judges Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software
Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software