399 13 6MB
English Pages 314
3 Foreword
7
Notes: Example Themes and Files
9
Getting Familiar with WordPress
12
Blog Design
32
M eet Creatif
50
I ntroduction to Themes
121
4
Building a Basic Theme: Creatif Blog
Tools for Advanced Theming
141
207
5
Building an Advanced Theme: Creatif Portfolio 245
Building a Site Theme: Creatif Site
I nnovative Ways to Use WordPress
276
301
6
Afterword
314
Foreword
Collis Ta’eed
9 Notes: Exam ple Them es and Files
10
Getting Star ted
Themes Online
Getting Fam iliar with WordPress
13
Getting Fam iliar with WordPress
I ntroduction
What M akes WordPress Popular
14
Getting Fam iliar with WordPress
WordPress.com vs WordPress.org
15
Getting Fam iliar with WordPress
Getting a WordPress I nstall
M ethod 1: Get an Account with a Web Host with Auto-I nstall for WordPress
16
Getting Fam iliar with WordPress
M ethod 2. I nstall WordPress M anually onto an Existing Web Host
M ethod 3. I nstall M ySQL, PHP and WordPress on Your Local Com puter
17
Getting Fam iliar with WordPress
After I nstall
18
Getting Fam iliar with WordPress
M ain Concepts
19
Getting Fam iliar with WordPress
ex ampl e. c om ex ampl e. c om/ wp- admi n
20
Getting Fam iliar with WordPress
wp- cont ent / t hemes /
21
Getting Fam iliar with WordPress wp- cont ent /
pl ugi ns
wp- cont ent / pl ugi ns
HTM L, CSS & Basic PHP
22
Getting Fam iliar with WordPress
HTM L & CSS
Basic PHP
23
Getting Fam iliar with WordPress
24
Getting Fam iliar with WordPress
The WordPress Codex
25
Getting Fam iliar with WordPress
Wr i t t en by :
Preparing WordPress for Use Checklist
26
Getting Fam iliar with WordPress
Activate Akismet Spam Protection
I nstall WP-Cache Plugin
27
Getting Fam iliar with WordPress
Set Per malinks
/ %c at egor y %/ %pos t name%/
. ht ac c es s
28
Getting Fam iliar with WordPress
Update Your Profile
M ake Sure File Uploads are Working
29
Getting Fam iliar with WordPress
I nstall Sitemap Plugin
Clear WordPress and Create Categories
30
Getting Fam iliar with WordPress
Fur ther Resources for Getting Star ted with WordPress
Blog Design
33
Blog Design
How Blog Design is Evolving
Blogs as Com m unities
34
Blog Design
Blogs as M agazines
35
Blog Design
Blogs as Por tals
Design I m plications
36
Blog Design
Usability
37
Blog Design
Understanding and Following (Blog) Conventions
Think Like a User
38
Blog Design
39
Blog Design
Order and Clutter
M aking Room for Adver tising
40
Blog Design
Plan for Advertising
Place Ads in Your M ockups
Blend I n, Stand Out
41
Blog Design
Use Standard Ad Sizes
Conver ting Visitors into Readers
Focus on Content
42
Blog Design
Giving the Reader Somewhere to Go
43
Blog Design
M ake Browsing Archives Easy
44
Blog Design
Help the User Subscribe
45
Blog Design
46
Blog Design
Engage the Reader in Discussion
47
Blog Design
Tips for Public Theme Design
48
Blog Design
M eet Creatif
51
M eet Creatif
Our Example Set of Designs
52
M eet Creatif
53
M eet Creatif
The Creatif Design Tutorial – Layout in Photoshop
54
M eet Creatif
55
M eet Creatif
56
M eet Creatif
57
M eet Creatif
58
M eet Creatif
59
M eet Creatif
60
M eet Creatif
61
M eet Creatif
62
M eet Creatif
63
M eet Creatif
64
M eet Creatif
65
M eet Creatif
66
M eet Creatif
67
M eet Creatif
The Creatif HTM L Tutorial – From PSD to HTM L
68
M eet Creatif
/ i mages / / s c r i pt s /
69
M eet Creatif
Cr eat i f
Logo / Menu
70
M eet Creatif
Feat ur ed Cont ent
Cont ent
Foot er St uf f Goes i n Her e
#mai n #f oot er body { mar gi n: 0px ; paddi ng: 0px ; bac k gr ound- c ol or : #131211; } #mai n { bac k gr ound- c ol or : #c 4c 0be; } #f oot er { c ol or : whi t e; } . c ont ai ner { wi dt h: 950px ; mar gi n: 0 aut o; bor der : 1px s ol i d r ed; }
71
M eet Creatif
#mai n . c ont ai ner mar gi n: aut o
72
M eet Creatif
@c har s et " UTF- 8" ; / * Bac k gr ound- St y l es * / body { mar gi n: 0px ; paddi ng: 0px ; bac k gr ound- c ol or : #131211; } #mai n { bac k gr ound: #c 4c 0be ur l ( i mages / bac k gr ound_l i ght _s l i c e. j pg) r epeat - x ; } #mai n . c ont ai ner { bac k gr ound- i mage: ur l ( i mages / bac k gr ound_l i ght . j pg) ; bac k gr ound- r epeat : no- r epeat ; mi n- hei ght : 400px ; } #f oot er { bac k gr ound- i mage: ur l ( i mages / bac k gr ound_f oot er . j pg) ; bac k gr ound- r epeat : r epeat - x ; c ol or : whi t e; paddi ng: 40px ; } . c ont ai ner { wi dt h: 950px ; mar gi n: 0 aut o; pos i t i on: r el at i v e; }
73
M eet Creatif
#mai n #mai n . c ont ai ner #f oot er #mai n #f oot er #mai n . c ont ai ner c l ass =' c ont ai ner ' i d=' mai n'
74
M eet Creatif
75
M eet Creatif
Cr eat i f
Por t f ol i o Ser v i c es About Tes t i moni al s Reques t a Quot e
Cr eat i f A Fami l y of Roc k s t ar Wor dpr es s Themes
Feat ur ed Cont ent
Cont ent
Foot er St uf f Goes i n Her e
76
M eet Creatif
#header { paddi ng- t op: 20px ; } #l ogo h1, #l ogo s mal l { mar gi n: 0px ; di s pl ay : bl oc k ; t ex t - i ndent : - 9999px ; } #l ogo { bac k gr ound- i mage: ur l ( i mages / l ogo. png) ; bac k gr ound- r epeat : no- r epeat ; wi dt h: 194px ; hei ght : 83px ; } ul #menu { mar gi n: 0px ; paddi ng: 0px ; pos i t i on: abs ol ut e; r i ght : 0px ; } ul #menu l i { di s pl ay : i nl i ne; }
77
M eet Creatif posi t i on: r el at i ve r i ght : 0px
/ * Fi x up I E6 PNG Suppor t * / i mg, #l ogo { behav i or : ur l ( s c r i pt s / i epngf i x . ht c ) ; }
78
M eet Creatif
ul #menu { mar gi n: 0px ; paddi ng: 0px ; pos i t i on: abs ol ut e; r i ght : 0px ; } ul #menu l i { di s pl ay : i nl i ne; mar gi n- l ef t : 12px ; } ul #menu l i a { t ex t - dec or at i on: none; c ol or : #716d6a; f ont - f ami l y : Ver dana, Ar i al , Hel v et i c a, s ans - s er i f ; f ont - s i z e: 10px ; f ont - wei ght : bol d; t ex t - t r ans f or m: upper c as e; } ul #menu l i a. ac t i v e, ul #menu l i a: hov er { c ol or : #211e1e; }
: hover
79
M eet Creatif
Eden Webs i t e Des i gn i n web des i gn t agged c or por at e, web2
And t hen a s hor t des c r i pt i on of t he webs i t e woul d go i n her e. Somet hi ng s ay i ng may be what
80
M eet Creatif awes ome s k i l l s I us ed on t he pr oj ec t and how happy t he c l i ent was .
Vi ew Pr oj ec t
81
M eet Creatif
/* Bl oc k- St yl es */ . bl ock { bor der : 1px s ol i d #a3a09e; back gr ound- c ol or : #f f f f f f ; mar gi n- bot t om: 20px; } . bl ock_i nsi de { di spl ay: bl oc k; bor der : 1px s ol i d #f f f f f f ; back gr ound: #f f f f f f ur l ( i mages/ bac kgr ound_bl ock_s l i ce. j pg) r epeat - x; paddi ng: 30px ; over f l ow: aut o; } . i mage_bl ock { bor der : 1px s ol i d #b5b5b5; back gr ound- c ol or : #d2d2d2; paddi ng: 5px; f l oat : l ef t ; } . i mage_bl ock i mg { bor der : 1px s ol i d #b5b5b5; } . t ex t _bl ock {
82
M eet Creatif f l oat : l ef t ; wi dt h: 430px; mar gi n- l ef t : 30px; }
. bl oc k . bl oc k _i nsi de
ov er f l ow: aut o . i mage_bl oc k
mai n . t ex t _bl oc k
83
M eet Creatif
body { mar gi n: 0px ; paddi ng: 0px ; bac k gr ound- c ol or : #131211; f ont - f ami l y : Ar i al , Hel v et i c a, s ans - s er i f ; c ol or : #7f 7d78; f ont - s i z e: 13px ; l i ne- hei ght : 19px ; } /* Tex t - St y l es */ h2 { mar gi n: 0px 0px 10px 0px ; f ont - s i z e: 36px ; f ont - f ami l y : Hel v et i c a, Ar i al , Sans - s er i f ; c ol or : #000000; } s mal l { c ol or : #595856; f ont - wei ght : bol d; f ont - s i z e: 11px ; di s pl ay : bl oc k ; mar gi n- bot t om: 15px ; } a { c ol or : #007de2; t ex t - dec or at i on: none; }
84
M eet Creatif a: hov er { t ex t - dec or at i on: under l i ne; } p { mar gi n: 0px 0px 15px 0px ; } a. but t on { bac k gr ound: #32312f ur l ( i mages / but t on_bg. j pg) r epeat - x ; paddi ng: 5px 10px 5px 10px ; c ol or : #f f f f f f ; t ex t - dec or at i on: none; bor der : 1px s ol i d #32312f ; t ex t - t r ans f or m: upper c as e; f ont - s i z e: 9px ; l i ne- hei ght : 25px ; } a. but t on: hov er { back gr ound: #007de2 ur l ( i mages / but t on_bg_o. j pg) r epeat - x ; bor der - c ol or : #007de2; }
l i nk: hov er
" a. but t on" c l ass = " but t on"
85
M eet Creatif ". but t on"
86
M eet Creatif
Eden Webs i t e Des i gn i n web des i gn t agged c or por at e, web2
And t hen a s hor t des c r i pt i on of t he webs i t e woul d go i n her e. Somet hi ng s ay i ng may be what awes ome s k i l l s I us ed on t he pr oj ec t and how happy t he c l i ent was .
Vi ew Pr oj ec t
87
M eet Creatif
c l ass =" r i bbon" . bl oc k . bl oc k _i nsi de . bl oc k _i nsi de ov er f l ow: aut o . bl oc k { bor der : 1px s ol i d #a3a09e; bac k gr ound- c ol or : #f f f f f f ; mar gi n- bot t om: 20px ; pos i t i on: r el at i v e; } . r i bbon { pos i t i on: abs ol ut e; t op: - 3px ; r i ght : - 3px ; }
pos i t i on: r el at i ve . bl oc k . bl oc k
88
M eet Creatif
PSDTUTS Theme Des i gn
Webs i t e des i gn f or l eadi ng phot os hop t ut or i al s i t e and c r eat i on and mai nt enanc e of Wor dpr es s t heme. Vi ew Pr oj ec t
89
M eet Creatif
PSDTUTS Theme Des i gn
Webs i t e des i gn f or l eadi ng phot os hop t ut or i al s i t e and c r eat i on and mai nt enanc e of Wor dpr es s t heme. Vi ew Pr oj ec t
PSDTUTS Theme Des i gn
Webs i t e des i gn f or l eadi ng phot os hop t ut or i al s i t e and c r eat i on and mai nt enanc e of Wor dpr es s t heme. Vi ew Pr oj ec t
Cr eat i f i s a Wor dPr es s por t f ol i o t heme f or des i gner s and c r eat i v es
You c an us e i t t o qui c k l y t ur n Wor dPr es s i nt o a por t f ol i o webs i t e.
Not f ami l i ar wi t h Wor dPr es s ?
Fear not , t he t heme ac c ompani es a book c al l ed How t o Be a Roc k s t ar Wor dpr es s Des i gner by Roc k s t ar Res our c es due f or r el eas e i n 2008.
The book t eac hes y ou t o us e Wor dPr es s t hemi ng t o t ak e adv ant age of t hi s f l ex i bl e CMS pr oduc t t o c r eat e dy nami c s i t es .
90
M eet Creatif
And as i f t hat ' s not enough, y ou c an s ee a phot os hop t o HTML t ut or i al
on des i gni ng t he t heme
ov er at PSDTUTS and NETTUTS.
mi ni _por t f ol i o_i t em
91
M eet Creatif
/* Por t f ol i o- Home- St y l es */ #bl oc k _por t f ol i o { ov er f l ow: aut o; mar gi n- bot t om: 20px ; } #por t f ol i o_i t ems { wi dt h: 615px ; mar gi n- r i ght : 25px ; f l oat : l ef t ; } #t ex t _c ol umn { f l oat : r i ght ; wi dt h: 310px ; } #t ex t _c ol umn h2#t ex t _t i t l e { t ex t - i ndent : - 9999px ; bac k gr ound- i mage: ur l ( i mages / c r eat i f . j pg) ; bac k gr ound- r epeat : no- r epeat ; wi dt h: 310px ; hei ght : 129px ; } . mi ni _por t f ol i o_i t em { bor der : 1px s ol i d #a3a09e; mar gi n- bot t om: 10px ; } . mi ni _por t f ol i o_i t em . bl oc k _i ns i de { bac k gr ound: none; bac k gr ound- c ol or : #e2dddc ; paddi ng: 25px 30px 15px 30px ; } . mi ni _por t f ol i o_i t em . t humbnai l { f l oat : l ef t ; mar gi nr i ght : 20px ; bor der : 1px s ol i d #979390; }
92
M eet Creatif
ov er f l ow: aut o #bl oc k _por t f ol i o #por t f ol i o_i t ems
#t ext _c ol umn
mi ni _por t f ol i o_i t em
. bl ock _i ns i de
. bl ock _i ns i de
93
M eet Creatif
Audi oJ ungl e Si t e Des i gn
Webs i t e des i gn f or l eadi ng phot os hop t ut or i al
si t e
94
M eet Creatif and c r eat i on and mai nt enanc e of Wor dpr es s t heme. Vi ew Pr oj ec t
pos i t i on: r el at i ve mi ni _ por t f ol i o_i t em . mi ni _por t f ol i o_i t em { bor der : 1px s ol i d #a3a09e; mar gi n- bot t om: 10px ; pos i t i on: r el at i v e; }
95
M eet Creatif #por t f ol i o_i t ems { wi dt h: 615px ; mar gi n- r i ght : 25px ; f l oat : l ef t ; paddi ng- t op: 3px ; }
96
M eet Creatif
Des i gned by Col l i s Ta' eed, do wi t h t hi s as y ou pl eas e
You c an r ead a phot os hop t ut or i al f or c r eat i ng t he des i gn at PSDTUTS, You c an r ead a PS- >HTML t ut or i al f or c r eat i ng t he s i t e at NETTUTS and y ou c an l ear n how t o t ur n t he HTML i nt o a Wor dpr es s t heme i n t he upc omi ng book How t o be a Roc k s t ar Wor dpr es s Des i gner
Mor e Li nk s
Lor em i ps um dol or s i t amet , c ons ec t et uer adi pi s c i ng el i t . Nul l a mi r i s us , t empor i n, gr av i da qui s , r ut r um v i t ae, mas s a. Sus pendi s s e c ongue, ni bh et l ac i ni a s odal es .
Ri s us nul l a f r i ngi l l a eni m, s i t amet adi pi s c i ng s api en r i s us s ed v el i t . Sed
105
M eet Creatif v i t ae j us t o. I n qui s l or em nec j us t o v ar i us s odal es . Nul l am el ei f end ac c ums an mi . Nunc at v el i t . Maec enas v el i t .
Read Mor e
bl oc k_ f eat ur edbl og
106
M eet Creatif
#bl oc k _f eat ur edbl og . t ex t _bl oc k { paddi ng- t op: 5px ; wi dt h: 490px ; } h2 { mar gi n: 0px 0px 10px 0px ; f ont - s i z e: 36px ; f ont - f ami l y : Hel v et i c a, Ar i al , s ans - s er i f ; c ol or : #000000; l i ne- hei ght : 39px ; l et t er - s pac i ng: - 1px ; }
t ex t _bl oc k #bl oc k _f eat ur edbl og
107
M eet Creatif
Cont ent
Si debar Cont ent
/* Bl oc k - Cont ent - St y l es */ #bl oc k _c ont ent { } #c ont ent _ar ea { wi dt h: 665px ; f l oat : l ef t ; } #s i debar { f l oat : l ef t ;
108
M eet Creatif wi dt h: 281px ; pos i t i on: r el at i v e; l ef t : - 1px ; mar gi n- t op: 15px ; bac k gr ound- c ol or : #e2dddc ; bor der : 1px s ol i d #a3a09e;
} #s i debar . bl oc k _i ns i de { bac k gr ound: none; bac k gr ound- c ol or : #e2dddc ; }
#c ont ent _ar ea #s i debar pos i t i on: r el at i ve
. bl oc k _i nsi de #s i debar
109
M eet Creatif
Wor k i ng on a New Pr oj ec t on apr i l
13 i n
web des i gn t agged bl oggi ng
Lor em i ps um dol or s i t amet , c ons ec t et uer adi pi s c i ng el i t . Nul l a mi r i s us , t empor i n, gr av i da qui s , r ut r um v i t ae, mas s a. Sus pendi s s e c ongue, ni bh et l ac i ni a s odal es .
Ri s us nul l a f r i ngi l l a eni m, s i t amet adi pi s c i ng s api en r i s us s ed v el i t . Sed v i t ae j us t o. I n qui s l or em nec j us t o v ar i us s odal es . Nul l am el ei f end ac c ums an mi . Nunc at v el i t . Maec enas v el i t . Read Mor e
Des i gn Awar ds ! on apr i l
13 i n
web des i gn t agged bl oggi ng
Lor em i ps um dol or s i t amet , c ons ec t et uer adi pi s c i ng el i t . Nul l a mi r i s us , t empor i n, gr av i da qui s , r ut r um v i t ae, mas s a. Sus pendi s s e c ongue, ni bh et l ac i ni a s odal es .
Ri s us nul l a f r i ngi l l a eni m, s i t amet adi pi s c i ng s api en r i s us s ed v el i t . Sed v i t ae j us t o. I n qui s l or em nec j us t o v ar i us s odal es . Nul l am el ei f end ac c ums an
110
M eet Creatif
mi . Nunc at v el i t . Maec enas v el i t . Read Mor e
Thi s Si t e i s Al mos t Compl et e Fi nal l y . . . on apr i l
13 i n
web des i gn t agged bl oggi ng
Lor em i ps um dol or s i t amet , c ons ec t et uer adi pi s c i ng el i t . Nul l a mi r i s us , t empor i n, gr av i da qui s , r ut r um v i t ae, mas s a. Sus pendi s s e c ongue, ni bh et l ac i ni a s odal es .
Ri s us nul l a f r i ngi l l a eni m, s i t amet adi pi s c i ng s api en r i s us s ed v el i t . Sed v i t ae j us t o. I n qui s l or em nec j us t o v ar i us s odal es . Nul l am el ei f end ac c ums an mi . Nunc at v el i t . Maec enas v el i t . Read Mor e
Subs c r i be