Table Of Content

WordPress 2.8 Theme Design Create flexible, powerful, and professional themes for your WordPress blogs and websites Tessa Blakeley Silver BIRMINGHAM - MUMBAI WordPress 2.8 Theme Design Copyright © 2009 Packt Publishing All rights reserved. No part of this book may be reproduced, stored in a retrieval system, or transmitted in any form or by any means, without the prior written permission of the publisher, except in the case of brief quotations embedded in critical articles or reviews. Every effort has been made in the preparation of this book to ensure the accuracy of the information presented. However, the information contained in this book is sold without warranty, either express or implied. Neither the author, nor Packt Publishing, and its dealers and distributors will be held liable for any damages caused or alleged to be caused directly or indirectly by this book. Packt Publishing has endeavored to provide trademark information about all of the companies and products mentioned in this book by the appropriate use of capitals. However, Packt Publishing cannot guarantee the accuracy of this information. First published: November 2009 Production Reference: 1201109 Published by Packt Publishing Ltd. 32 Lincoln Road Olton Birmingham, B27 6PA, UK. ISBN 978-1-849510-08-0 www.packtpub.com Cover Image by Vinayak Chittar ([email protected]) Credits Author Editorial Team Leader Tessa Blakeley Silver Gagandeep Singh Reviewer Project Team Leader Grigore Ioachim Alexandru Lata Basantani Acquisition Editor Project Coordinator David Barnes Poorvi Nair Development Editor Proofreader Ved Prakash Jha Sandra Hopper Technical Editors Graphics Gaurav Datar Nilesh R. Mohite Conrad Sardinha Production Coordinator Shantanu Zagade Indexer Rekha Nair Cover Work Shantanu Zagade About the Author Tessa Blakeley Silver's background is in print design and traditional illustration. She evolved over the years into web and multimedia development, where she focuses on usability and interface design. Tessa owns a consulting and development company hyper3media (also pronounced as hyper-cube media): http://hyper3media.com. Prior to starting her company, Tessa was the VP of Interactive Technologies at eHigherEducation—an online learning and technology company developing compelling multimedia simulations, interactions, and games, which met online educational requirements such as 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 has authored a few books for Packt Publishing, including Joomla! 1.5 Template Design (ISBN: 7160). I send a huge "thank you" to the Packt team who has made this title possible and whose help in getting it out into the world has been invaluable. Special thanks to Ved, Grigore, Gaurav, and Conrad for their editing work. Additional thanks goes to Poorvi for her very hard work and diligence in keeping me to a schedule. I'd also like to thank the exemplary WordPress community and all who participate and power the open source world and strive to improve the accessibility of the Web for all. Additional thanks goes out to my very patient family who spent quite a few evenings without me while I worked on this title. About the Reviewer Grigore Ioachim Alexandru is a web developer and an SEO engineer currently working at SITECONSTRUCT Romania, a web design company in Romania. He is studying at the FEAA college in the A.I.Cuza University in Iasi, learning economical sciences. Alex sustained about 50 Romanian projects and an SEO book within the company he works at. Currently, Alex is actively developing his own blog as well as writing quality WordPress content and articles for various online resources. You can follow Alex on Twitter at http://twitter.com/Designstrike. I would like to say "thank you" to the team from Packt Publishing for giving me this opportunity to be a part of this project. Table of Contents Preface 1 Chapter 1: Getting Started as a WordPress Theme Designer 7 WordPress perks 7 Does a WordPress site have to be a blog? 8 Pick a theme or design your own? 9 Drawbacks to using an already built theme 9 Using theme frameworks 10 This book's approach 11 Core technology you should understand 12 WordPress 12 CSS 13 XHTML 13 PHP 13 Other helpful technologies 14 Tools of the trade 14 HTML editor 15 Graphic editor 16 Firefox 17 Developing for Firefox first 17 Summary 18 Chapter 2: Theme Design and Approach 19 Things to consider 20 Types of blogs 21 Plugins and widgets 22 Getting ready to design 23 A common problem 23 The solution: Rapid design comping 24 The radical, new process—is not so new or radical? 25 Table of Contents Overview of rapid design comping 25 Getting started 27 Sketching It 27 Considering usability 29 Starting with the structure 30 Creating your design 31 The DOCTYPE 32 The main body 32 Attaching the basic stylesheet 33 Basic semantic XHTML structure 35 Adding text—typography 37 Starting with the text 38 Choosing your fonts 39 Cascading fonts 41 Font stacks 42 sIFR 43 Font sizing 43 Why pixels? 43 Keeping it in proportion 44 Paragraphs 45 Default links 46 The layout 47 Column Layout: Floating div tags versus CSS tables 50 Posts 51 Making sure WordPress sticky posts get styled 51 Forms 52 Threaded and paginated comments 52 Navigation 53 Styling the main navigation 53 WordPress-specific styles for navigation 56 Color schemes 57 Two-minute color schemes 58 Color schemes with GIMP or Photoshop 58 Adding color to your CSS 60 Styling the special TOC headers 61 Creating the graphical elements 62 Relax and have fun designing 64 Slicing and exporting images 66 Don't forget your favicon! 70 Making your favicon high-res 71 Summary 72 Chapter 3: Coding It Up 73 Got WordPress? 73 Understanding the WordPress theme 75 Creating your WordPress workflow 76 [ ii ] Table of Contents Building our WordPress theme 77 Starting with a blank slate: Tabula rasa 78 Create a new theme directory 79 Including WordPress content 82 Understanding template tags 83 Getting a handle on hooks 83 Learning the Loop 83 Creating a basic loop 84 Modifying the timestamp and author template tags 86 Modifying the basic comments display 87 Including threaded comments 91 Styling threaded comments 93 Breaking it up: Header, footer, and sidebar template files 97 Creating the footer.php template file 98 Creating the sidebar.php template file 99 The header 104 More template files: Home, internal, and static pages 105 The home page 106 Internal pages 107 Static pages 109 Quick review 111 Fun with other page layouts 111 Don't forget about your 404 page 112 Even more template files 114 Adding in the favicon 115 Activating the favicon 115 Summary 116 Chapter 4: Debugging and Validation 117 Testing other browsers and platforms 118 Introduction to debugging 118 Troubleshooting basics 120 Why validate? 121 PHP template tags 122 CSS quick fixes 123 Advanced troubleshooting 124 Quirks mode 124 Fixing CSS across browsers 126 Box model issues 126 Everything is relative 127 To hack or not to hack 127 Out of the box model thinking 129 The road to validation 132 Advanced validation 135 [ iii ]