How To Be a Rockstar WordPress Designer

Citation preview



       

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

VECTORTUTS Fl as hDen Audi oJ ungl e Fr eel anc eSwi t c h Fav eUp



97

M eet Creatif RSS
RSS Feed What i s RSS?



        c l ass =" c l as s 1 c l as s 2"  c l ass =" c l as s 1" cl as s =" c l as s 2"    
     

98

M eet Creatif

  /* Foot er - St y l es */ #f oot er { 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 oot er _c ol umn { f l oat : l ef t ; wi dt h: 120px ; mar gi n- r i ght : 30px ; }

99

M eet Creatif #f oot er . l ong { wi dt h: 610px ; } #f oot er h3 { c ol or : #e2dddc ; t ex t - t r ans f or m: upper c as e; f ont - s i z e: 10px ; } . f oot er _c ol umn ul l i , . f oot er _c ol umn ul { l i s t - s t y l e: none; mar gi n: 0px ; paddi ng: 0px ; }

  #f oot er  

 

 . l ong  #f oot er . l ong  . l ong   

 


100

M eet Creatif



        / i mages / 

101

M eet Creatif

  

102

M eet Creatif

  



 

  



103

M eet Creatif

  

     

104

M eet Creatif

             





New Bl og Des i gn Launc hed 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

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

RSS Feed Emai l Updat es

Cat egor i es
News Mar k et i ng Gener al

111

M eet Creatif Gr eat Si t es

Ar c hi v es
J une 2008 May 2008 Apr i l 2008 Mar c h 2008