Build Your Own Wicked Wordpress Themes: Create Versatile Wordpress Themes That Really Sell!

225 Pages·2010·17.63 MB·English

by  Alan Cole

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
(cid:37)(cid:56)(cid:44)(cid:47)(cid:39) (cid:60)(cid:50)(cid:56)(cid:53)
(cid:50)(cid:58)(cid:49) (cid:58)(cid:44)(cid:38)(cid:46)(cid:40)(cid:39)
(cid:58)(cid:50)(cid:53)(cid:39)(cid:51)(cid:53)(cid:40)(cid:54)(cid:54)
(cid:55)(cid:43)(cid:40)(cid:48)(cid:40)(cid:54)
(cid:37)(cid:60) (cid:36)(cid:47)(cid:47)(cid:36)(cid:49) (cid:38)(cid:50)(cid:47)(cid:40)
(cid:53)(cid:36)(cid:40)(cid:49)(cid:36) (cid:45)(cid:36)(cid:38)(cid:46)(cid:54)(cid:50)(cid:49) (cid:36)(cid:53)(cid:48)(cid:44)(cid:55)(cid:36)(cid:42)(cid:40)
(cid:37)(cid:53)(cid:36)(cid:49)(cid:39)(cid:50)(cid:49) (cid:53)(cid:17) (cid:45)(cid:50)(cid:49)(cid:40)(cid:54)
(cid:45)(cid:40)(cid:41)(cid:41)(cid:53)(cid:40)(cid:60) (cid:58)(cid:36)(cid:60)
iv
Build Your Own Wicked WordPress Themes
byAllanCole,RaenaJacksonArmitage,BrandonR.Jones,andJeffreyWay
Copyright©2010SitePointPty.Ltd.
Program Director:AndrewTetlaw Indexer:FredBrown
Technical Editor:LouisSimoneau Editor:KellySteele
Chief Technical Officer:KevinYank Cover Design:AlexWalker
Printing History:
FirstEdition:August2010
Notice of Rights
Allrightsreserved.Nopartofthisbookmaybereproduced,storedinaretrievalsystemortransmittedinanyformorby
anymeans,withoutthepriorwrittenpermissionofthepublisher,exceptinthecaseofbriefquotationsembodiedincritical
articlesorreviews.
Notice of Liability
Theauthorandpublisherhavemadeeveryefforttoensuretheaccuracyoftheinformationherein.However,theinformation
containedinthisbookissoldwithoutwarranty,eitherexpressorimplied.NeithertheauthorsandSitePointPty.Ltd.,nor
itsdealersordistributors,willbeheldliableforanydamagestobecausedeitherdirectlyorindirectlybytheinstructions
containedinthisbook,orbythesoftwareorhardwareproductsdescribedherein.
Trademark Notice
Ratherthanindicatingeveryoccurrenceofatrademarkednameassuch,thisbookusesthenamesonlyinaneditorial
fashionandtothebenefitofthetrademarkownerwithnointentionofinfringementofthetrademark.
PublishedbySitePointPty.Ltd.
48CambridgeStreetCollingwood
VICAustralia3066
Web:www.sitepoint.com
Email:[email protected]
ISBN978-0-9804552-9-8
PrintedandboundinCanada
v
About Allan Cole
AllanColeisawebdesigneranddeveloperbasedinBrooklyn,NY.Hespecializesinfront-enduserexperience
andWordPresscustomization.AllaniscurrentlydevelopingasmallbusinessrootedincustomWordPress
designanddevelopmentcalledfthrwght(FeatherWeight,http://fthrwght.com/).Hecanbefoundonlineat
hisportfoliosite(http://temp.fthrwght.com/)andhisWordPressblog(http://allancole.com/wordpress/).
About Raena Jackson Armitage
RaenaJacksonArmitageisanAustralianwebdeveloperwithabackgroundincontentmanagement,public
speaking,andtraining.Whenshe’snotthinkingabouttheWeb,shelovesknitting,gaming,all-daybreakfasts,
andcycling.Raena’spersonalwebsiteisathttp://raena.net.
About Brandon R. Jones
FromsunnySouthernCalifornia,BrandonJoneshasbeendesigning,drawing,photographing,andcodingthe
worldaroundhimforthepastseveralyears.Notcontenttopickonemediaandstickwithit,Brandonhasa
broadrangeoftalentsthathaveallowedhimtoworkonprojectsrangingfromgrungydigitalartkitstoFortune
500softwareprototyping.
Withastrongbackgroundingraphicdesign,digitalillustration,anduserinterfacedesign(aswellasasmat-
teringoffront-endprogramminglanguages),Brandonhasenjoyedworkingwithavarietyofaward-winning
studiosthroughhisyoungcareer.HehasadegreefromCaliforniaPolytechnicUniversityatPomonain
GraphicDesign,butcountshimselfasalargelyself-taughtandself-motivateddesignerwithadesiretoplay
alargerroleinthedesigncommunity.Hispersonalsitecanbefoundathttp://makedesignnotwar.com/.
About Jeffrey Way
JeffreyWayworksforEnvato,wherehemanagesacodemarketplacecalledCodeCanyon,andrunsapopular
webdevelopmenttutorialsite,Nettuts+.Hespendsalotofhisfreetimewriting,mostrecentlywiththerelease
ofPhotoshoptoHTML(http://rockablepress.com/books/photoshop-to-html/).Beyondcode,Jeffreylovesto
playguitarandembarrasshiswife-in-training,Allie,byplayingSteelDragonsongsloudlywiththewindows
rolleddowninfrontofmovietheaters.Youcanstopbyhiswebsiteandsayhiatwww.jeffrey-way.com.
About the Technical Editor
LouisSimoneaujoinedSitePointin2009,aftertravelingfromhisnativeMontréaltoCalgary,Taipei,andfinally
Melbourne.Henowgetstospendhisdayslearningaboutcoolwebtechnologies,anactivitythathadpreviously
beenrelegatedtonightsandweekends.Heenjoyship-hop,spicyfood,andallthingsgeeky.Hispersonal
websiteishttp://louissimoneau.com/andhislatestblogprojectishttp://growbuycookeat.com/.
About the Chief Technical Officer
AsChiefTechnicalOfficerforSitePoint,KevinYankkeepsabreastofallthatisnewandexcitinginweb
technology.Bestknownforhisbook,BuildYourOwnDatabaseDrivenWebSiteUsingPHP&MySQL,healso
vi
co-authoredSimplyJavaScriptwithCameronAdamsandEverythingYouKnowAboutCSSIsWrong!with
RachelAndrew.Inaddition,KevinhoststheSitePointPodcastandco-writestheSitePointTechTimes,afree
emailnewsletterthatgoesouttoover240,000subscribersworldwide.
KevinlivesinMelbourne,Australiaandenjoysspeakingatconferences,aswellasvisitingfriendsandfamily
inCanada.He’salsopassionateaboutperformingimprovisedcomedytheaterwithImproMelbourne
(http://www.impromelbourne.com.au/)andflyinglightaircraft.Kevin’spersonalblogisYes,I’mCanadian
(http://yesimcanadian.com/).
About SitePoint
SitePointspecializesinpublishingfun,practical,andeasy-to-understandcontentforWebprofessionals.Visit
http://www.sitepoint.com/toaccessourblogs,books,newsletters,articles,andcommunityforums.
Special Thanks
SkategearusedinthecovershotiscourtesyofJettySurf,Greensborough.
Mychaptersarededicatedtothatguyorgalwho
decidedtogooutonalimb,andfigureoutaway
totakecontroloftheirowndestiny.
—Allan Cole
ForLeanne,Marc,Mathew,andMike.
—Raena Jackson Armitage
Thisisforeveryoneouttherewhoisworkingto
maketheWebanopenandaltogetherwonderful
placetolearn,work,andplay.
—Brandon R. Jones
Tothelittleguywhoquietlyrestedundermyoffice
chairforhoursuponhourswhileIworkedonthis
book.Here’stoyoudoggie.
—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