Docstoc

Build.Your.Own.Wicked.WordPress.Themes

Document Sample
Build.Your.Own.Wicked.WordPress.Themes Powered By Docstoc
					Summary of Contents
Preface . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xv
1. Introducing WordPress . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1
2. Planning Your Theme . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9
3. Theme Design 101 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31
4. Theme Frameworks . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 77
5. Advanced Theme Construction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 99
6. Widgets . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 131
7. Theme Options . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 149
8. Selling Your Theme . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 177
Index . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 195
 BUILD YOUR
OWN WICKED
WORDPRESS
    THEMES
              BY ALLAN COLE
    RAENA JACKSON ARMITAGE
           BRANDON R. JONES
                JEFFREY WAY
iv


Build Your Own Wicked WordPress Themes
by Allan Cole, Raena Jackson Armitage, Brandon R. Jones, and Jeffrey Way

                                       Copyright © 2010 SitePoint Pty. Ltd.

Program Director: Andrew Tetlaw                                Indexer: Fred Brown
Technical Editor: Louis Simoneau                               Editor: Kelly Steele
Chief Technical Officer: Kevin Yank                            Cover Design: Alex Walker
Printing History:
     First Edition: August 2010

Notice of Rights
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 embodied in critical
articles or reviews.


Notice of Liability
The author and publisher have made every effort to ensure the accuracy of the information herein. However, the information
contained in this book is sold without warranty, either express or implied. Neither the authors and SitePoint Pty. Ltd., nor
its dealers or distributors, will be held liable for any damages to be caused either directly or indirectly by the instructions
contained in this book, or by the software or hardware products described herein.


Trademark Notice
Rather than indicating every occurrence of a trademarked name as such, this book uses the names only in an editorial
fashion and to the benefit of the trademark owner with no intention of infringement of the trademark.




                                              Published by SitePoint Pty. Ltd.

                                              48 Cambridge Street Collingwood
                                                    VIC Australia 3066
                                                  Web: www.sitepoint.com
                                               Email: business@sitepoint.com

                                                  ISBN 978-0-9804552-9-8
                                                Printed and bound in Canada
                                                                                                               v


About Allan Cole

Allan Cole is a web designer and developer based in Brooklyn, NY. He specializes in front-end user experience
and WordPress customization. Allan is currently developing a small business rooted in custom WordPress
design and development called fthrwght (Feather Weight, http://fthrwght.com/). He can be found online at
his portfolio site (http://temp.fthrwght.com/) and his WordPress blog (http://allancole.com/wordpress/).


About Raena Jackson Armitage

Raena Jackson Armitage is an Australian web developer with a background in content management, public
speaking, and training. When she’s not thinking about the Web, she loves knitting, gaming, all-day breakfasts,
and cycling. Raena’s personal website is at http://raena.net.


About Brandon R. Jones

From sunny Southern California, Brandon Jones has been designing, drawing, photographing, and coding the
world around him for the past several years. Not content to pick one media and stick with it, Brandon has a
broad range of talents that have allowed him to work on projects ranging from grungy digital art kits to Fortune
500 software prototyping.

With a strong background in graphic design, digital illustration, and user interface design (as well as a smat-
tering of front-end programming languages), Brandon has enjoyed working with a variety of award-winning
studios through his young career. He has a degree from California Polytechnic University at Pomona in
Graphic Design, but counts himself as a largely self-taught and self-motivated designer with a desire to play
a larger role in the design community. His personal site can be found at http://makedesignnotwar.com/.


About Jeffrey Way

Jeffrey Way works for Envato, where he manages a code marketplace called CodeCanyon, and runs a popular
web development tutorial site, Nettuts+. He spends a lot of his free time writing, most recently with the release
of Photoshop to HTML (http://rockablepress.com/books/photoshop-to-html/). Beyond code, Jeffrey loves to
play guitar and embarrass his wife-in-training, Allie, by playing Steel Dragon songs loudly with the windows
rolled down in front of movie theaters. You can stop by his website and say hi at www.jeffrey-way.com.


About the Technical Editor

Louis Simoneau joined SitePoint in 2009, after traveling from his native Montréal to Calgary, Taipei, and finally
Melbourne. He now gets to spend his days learning about cool web technologies, an activity that had previously
been relegated to nights and weekends. He enjoys hip-hop, spicy food, and all things geeky. His personal
website is http://louissimoneau.com/ and his latest blog project is http://growbuycookeat.com/.


About the Chief Technical Officer

As Chief Technical Officer for SitePoint, Kevin Yank keeps abreast of all that is new and exciting in web
technology. Best known for his book, Build Your Own Database Driven Web Site Using PHP & MySQL, he also
vi


co-authored Simply JavaScript with Cameron Adams and Everything You Know About CSS Is Wrong! with
Rachel Andrew. In addition, Kevin hosts the SitePoint Podcast and co-writes the SitePoint Tech Times, a free
email newsletter that goes out to over 240,000 subscribers worldwide.

Kevin lives in Melbourne, Australia and enjoys speaking at conferences, as well as visiting friends and family
in Canada. He’s also passionate about performing improvised comedy theater with Impro Melbourne
(http://www.impromelbourne.com.au/) and flying light aircraft. Kevin’s personal blog is Yes, I’m Canadian
(http://yesimcanadian.com/).


About SitePoint

SitePoint specializes in publishing fun, practical, and easy-to-understand content for Web professionals. Visit
http://www.sitepoint.com/ to access our blogs, books, newsletters, articles, and community forums.


Special Thanks

Skate gear used in the cover shot is courtesy of Jetty Surf, Greensborough.
My chapters are dedicated to that guy or gal who
decided to go out on a limb, and figure out a way
      to take control of their own destiny.

                                         —Allan Cole


     For Leanne, Marc, Mathew, and Mike.

                           —Raena Jackson Armitage


This is for everyone out there who is working to
make the Web an open and altogether wonderful
         place to learn, work, and play.

                                  —Brandon R. Jones


To the little guy who quietly rested under my office
chair for hours upon hours while I worked on this
             book. Here’s to you doggie.

                                       —Jeffrey Way
Table of Contents

Preface . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .   xv
       Who Should Read This Book . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xv
       What’s in This Book . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xvi
       Where to Find Help . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xvii
           The SitePoint Forums . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xvii
            The Book’s Website . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xvii
       The SitePoint Newsletters . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xviii
       The SitePoint Podcast . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xviii
       Your Feedback . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xviii
       Acknowledgments . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xviii
            Raena Jackson Armitage . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xviii
            Allan Cole . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xix
            Brandon R. Jones . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xix
            Jeffrey Way . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xix
       Conventions Used in This Book . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xx
            Code Samples . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xx
            Tips, Notes, and Warnings . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xxi


Chapter 1                  Introducing WordPress . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .                                      1
       A Brief History of WordPress . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2
            WordPress Today . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2
       Why WordPress? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3
       WordPress.com and WordPress.org . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4
       What is a Theme? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5
       Why become a WordPress theme designer? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6
       And Finally … . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7


Chapter 2                  Planning Your Theme . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9
       What do you start with? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10
           Pages and Posts . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10
x


         Media and Links . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10
         Custom Fields . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11
         Categories and Tags . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11
         Comments . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11
         Widgets . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12
         The Loop . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12
         Menus . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13
    Defining Success . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13
    Letting Your Content Lead the Way . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14
    Doing Your Research . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16
         Theme Research . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17
         Plugin Research . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17
         Script Research . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18
         Keep on Scouting . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18
    Avoiding Feature Bloat . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18
    Planning for the Audience . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20
    Planning for Publishers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22
    Planning for Organization and Hierarchy . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23
    The Theme Sitemap and Wireframe . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23
         The Sitemap . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24
         The Wireframe . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25
    Just Recapping … . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27


Chapter 3               Theme Design 101 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31
    The Principles of WordPress Theme Design . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .                           32
         Color . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .   32
         Branding . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .      34
         Typography . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .        34
         Visual Style . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .      38
         Layout and Composition . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .                  39
    The Anatomy of a WordPress Theme . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .                         44
         The Header . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .        45
         The Navigation Menu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .                 47

				
DOCUMENT INFO
tran the son tran the son http://wpdocs.com/
About tran the son - the best of