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 (vinayak.chittar@gmail.com) Credits Author Tessa Blakeley Silver Reviewer Grigore Ioachim Alexandru Acquisition Editor David Barnes Development Editor Ved Prakash Jha Technical Editors Gaurav Datar Editorial Team Leader Gagandeep Singh Project Team Leader Lata Basantani Project Coordinator Poorvi Nair Proofreader Sandra Hopper Graphics Nilesh R Mohite Conrad Sardinha Production Coordinator Indexer Shantanu Zagade 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 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 an already built theme Using theme frameworks This book's approach Core technology you should understand WordPress CSS XHTML PHP Other helpful technologies Tools of the trade HTML editor Graphic editor Firefox Developing for Firefox first Summary Chapter 2: Theme Design and Approach Things to consider Types of blogs Plugins and widgets Getting ready to design A common problem The solution: Rapid design comping The radical, new process—is not so new or radical? 7 9 10 11 12 12 13 13 13 14 14 15 16 17 17 18 19 20 21 22 23 23 24 25 Table of Contents Overview of rapid design comping Getting started Sketching It 25 27 27 Considering usability 29 Starting with the structure 30 Creating your design The DOCTYPE The main body Attaching the basic stylesheet Basic semantic XHTML structure 31 32 32 33 35 Adding text—typography Starting with the text Choosing your fonts 37 38 39 Cascading fonts Font stacks sIFR 41 42 43 Font sizing 43 Why pixels? Keeping it in proportion Paragraphs Default links The layout Column Layout: Floating div tags versus CSS tables Posts Making sure WordPress sticky posts get styled 43 44 45 46 47 50 51 51 Forms 52 Navigation 53 Color schemes 57 Threaded and paginated comments 52 Styling the main navigation WordPress-specific styles for navigation 53 56 Two-minute color schemes Color schemes with GIMP or Photoshop Adding color to your CSS Styling the special TOC headers 58 58 60 61 Creating the graphical elements Relax and have fun designing Slicing and exporting images Don't forget your favicon! 62 64 66 70 Summary 72 Making your favicon high-res 71 Chapter 3: Coding It Up Got WordPress? Understanding the WordPress theme Creating your WordPress workflow [ ii ] 73 73 75 76 Table of Contents Building our WordPress theme Starting with a blank slate: Tabula rasa Create a new theme directory Including WordPress content Understanding template tags Getting a handle on hooks Learning the Loop Creating a basic loop Modifying the timestamp and author template tags Modifying the basic comments display Including threaded comments Styling threaded comments Breaking it up: Header, footer, and sidebar template files Creating the footer.php template file Creating the sidebar.php template file The header 77 78 79 82 83 83 83 84 86 87 91 93 97 98 99 104 More template files: Home, internal, and static pages 105 Even more template files Adding in the favicon 114 115 The home page Internal pages Static pages Quick review Fun with other page layouts Don't forget about your 404 page Activating the favicon 106 107 109 111 111 112 115 Summary Chapter 4: Debugging and Validation Testing other browsers and platforms Introduction to debugging Troubleshooting basics Why validate? PHP template tags CSS quick fixes Advanced troubleshooting Quirks mode 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 116 117 118 118 120 121 122 123 124 124 126 126 127 127 129 132 135 [ iii ] Chapter Forget the search engine friendly! What about people friendly URLs? WordPress is great at people friendly or comprehensive URLs Comprehensive URLs are one of the great things about WordPress and a feature that places it above other comparable CMS and blog tools currently (Even if you select "SEF" URL, it can still be a long URL of odd numbers, and incomprehensible variable names, separated by slashes.) Sometimes, you're in situations where you just can't copy and paste your link It's great to have lunch with your friend and be able to verbally give him/her the URL to your latest web-rant and know that he/she will easily remember http://myurl com/rants/newrant Also, clearly named URLs greatly boost your "link trust" (that's what I call it anyway) If the relevant link you've e-mailed people or posted in your blog, or that you have posted as a comment on someone else's blog, doesn't appear to clearly have any indication of what you promised is in it, people are much less likely to click on it (do you like clicking on strings of odd numbers and cryptic variable names?) And while the impact of keywords in URLs seems to be waning, there are SEO experts who still swear that your URLs should contain the top keywords in your document If you haven't done so already, be sure to take advantage of this feature in WordPress Keywords and descriptions Most people just hardcode some general keyword and description meta tags into their theme's template files that best describe the overall gist of their WordPress site However, if you want to aid in your content being indexed by search engines a little better and/or you use your WordPress site to cover a wide range of diverse information that an overall gist of keywords and a description just won't cover, you'll want to make metatags in your template files a bit more dynamic There are several ways in which you can add keyword and description meta tags for individual posts and pages to your WordPress theme You can use the available template tags within your theme's header.php or other header template pages to add content to your meta tags Or you can install third-party plugins that will expand your administration page options and give you a little more control than what is produced by your post's content In the next few sections, we'll look at doing it yourself as well as a few choice plugins to help you out [ 265 ] Design Tips for Working with WordPress DYI meta tags For most people (myself included), this method works well In my header.php (or other header) template files, I set up my meta tags for keywords and descriptions I then take advantage of the single_cat_title(), single_post_title(), and the_exerpt()template tags In my keywords meta tag, I include the single_cat_title()and then the single_post_title()tags like this: