How To Be a Rockstar WordPress Designer

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

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

3 Foreword

7

Notes: Example Themes and Files

9





Getting Familiar with WordPress

12

      

      

Blog Design

32

    

    

Meet Creatif

50





 

 



Introduction 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       

Innovative Ways to Use WordPress     

        

276       

301     

6            

Afterword

           

314

Foreword                

         

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

 

Collis Ta’eed

9 Notes: Example Themes and Files 

         

  

10

Getting Started

Themes Online  

 













Getting Familiar with WordPress      

13

Getting Familiar with WordPress

Introduction          

What Makes WordPress Popular          

14

Getting Familiar with WordPress

WordPress.com vs WordPress.org  

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



15

Getting Familiar with WordPress

          

Getting a WordPress Install 

Method 1: Get an Account with a Web Host with Auto-Install for WordPress       

16

Getting Familiar with WordPress

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

Method 2. Install WordPress Manually onto an Existing Web Host    



   

Method 3. Install MySQL, PHP and WordPress on Your Local Computer

    

17

Getting Familiar with WordPress

After Install  

       



18

Getting Familiar with WordPress

Main Concepts                           

19

Getting Familiar with WordPress

  



     example.com example.com/wp-admin    

20

Getting Familiar with WordPress

       

       wp-content/themes/         

21

Getting Familiar with WordPress wp-content/

plugins

wp-content/plugins               

HTML, CSS & Basic PHP    

22

Getting Familiar with WordPress

HTML & CSS    

  

Basic PHP            

23

Getting Familiar with WordPress



               

24

Getting Familiar with WordPress                

      

The WordPress Codex   

25

Getting Familiar with WordPress





 

Written by:

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

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

Preparing WordPress for Use Checklist    

26

Getting Familiar with WordPress

Activate Akismet Spam Protection

    

Install WP-Cache Plugin               

27

Getting Familiar with WordPress

Set Permalinks    

                /%category%/%postname%/

   .htaccess



28

Getting Familiar with WordPress

Update Your Profile      





Make Sure File Uploads are Working      

     

29

Getting Familiar with WordPress

Install Sitemap Plugin   

Clear WordPress and Create Categories      



30

Getting Familiar with WordPress

Further Resources for Getting Started with WordPress              

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

33

Blog Design

How Blog Design is Evolving                

Blogs as Communities        

34

Blog Design

           

Blogs as Magazines          

35

Blog Design

 

Blogs as Portals   

Design Implications   

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

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

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

Making Room for Advertising     

40

Blog Design

Plan for Advertising  

  

Place Ads in Your Mockups        

Blend In, Stand Out       

41

Blog Design

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

Use Standard Ad Sizes      

Converting Visitors into Readers 

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

Focus on Content  

42

Blog Design

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

Giving the Reader Somewhere to Go

                      

43

Blog Design  

Make 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

            

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

51

Meet Creatif

Our Example Set of Designs    

52

Meet Creatif

53

Meet Creatif

    

The Creatif Design Tutorial – Layout in Photoshop   

  

54

Meet Creatif

     

       

55  

Meet Creatif

56

Meet Creatif

       

57

Meet Creatif

                           

58

Meet Creatif



    

59

Meet Creatif



                 

60

Meet Creatif



        

61

Meet Creatif

             

62

Meet Creatif

          

     

63

Meet Creatif

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

     

64

Meet Creatif

    

  

65

Meet Creatif

   

66

Meet Creatif

                       

67

Meet Creatif

The Creatif HTML Tutorial – From PSD to HTML   

68

Meet Creatif





/images/ /scripts/



  

69

Meet Creatif



                <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> Creatif Logo / Menu

70

Meet Creatif Featured Content Content Footer Stuff Goes in Here

#main #footer   body { margin:0px; padding:0px; background-color:#131211; } #main { background-color:#c4c0be; } #footer { color:white; } .container { width:950px; margin:0 auto; border:1px solid red; }

71

Meet Creatif

 #main  .container margin: auto  

  

 

72

Meet Creatif

   @charset "UTF-8"; /* Background-Styles */ body { margin:0px; padding:0px; background-color:#131211; } #main { background:#c4c0be url(images/background_light_slice. jpg) repeat-x; } #main .container { background-image:url(images/background_light.jpg); background-repeat:no-repeat; min-height:400px; } #footer { background-image:url(images/background_footer.jpg); background-repeat:repeat-x; color:white; padding:40px; } .container { width:950px; margin:0 auto; position:relative; }

73

Meet Creatif

   #main    #main .container#footer    #main  #footer #main .container   id='main'  

74

Meet Creatif

     



75

Meet Creatif <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> Creatif

• Portfolio
• Services
• About
• Testimonials
• Request a Quote

Creatif <small>A Family of Rockstar Wordpress Themes Featured Content Content Footer Stuff Goes in Here

76

Meet Creatif

 #header { padding-top:20px; } #logo h1, #logo small { margin:0px; display:block; text-indent:-9999px; } #logo { background-image:url(images/logo.png); background-repeat:no-repeat; width:194px; height:83px; } ul#menu { margin:0px; padding:0px; position:absolute; right:0px; } ul#menu li { display:inline; }

       

77

Meet Creatif    

    position:relative right:0px   

      /* Fix up IE6 PNG Support */ img, #logo { behavior: url(scripts/iepngfix.htc); }

78

Meet Creatif

 

ul#menu { margin:0px; padding:0px; position:absolute; right:0px; } ul#menu li { display:inline; margin-left:12px; } ul#menu li a { text-decoration:none; color:#716d6a; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:10px; font-weight:bold; text-transform:uppercase; } ul#menu li a.active, ul#menu li a:hover { color:#211e1e; }

 :hover   

79

Meet Creatif

    <span > Eden Website Design <small>in web design tagged corporate, web2

And then a short description of the website would go in here. Something saying maybe what

80

Meet Creatif awesome skills I used on the project and how happy the client was.

View Project



  

    <span >  

81

Meet Creatif     

  /* Block-Styles */ .block { border:1px solid #a3a09e; background-color:#ffffff; margin-bottom:20px; } .block_inside { display:block; border:1px solid #ffffff; background: #ffffff url(images/background_block_slice.jpg) repeat-x; padding:30px; overflow:auto; } .image_block { border:1px solid #b5b5b5; background-color:#d2d2d2; padding:5px; float:left; } .image_block img { border:1px solid #b5b5b5; } .text_block {

82

Meet Creatif float:left; width:430px; margin-left:30px; }

.block   .block_inside

 overflow:auto  .image_block  



main .text_block

83

Meet Creatif

       body { margin:0px; padding:0px; background-color:#131211; font-family:Arial, Helvetica, sans-serif; color:#7f7d78; font-size:13px; line-height:19px; } /* Text-Styles */ h2 { margin:0px 0px 10px 0px; font-size:36px; font-family:Helvetica, Arial, Sans-serif; color:#000000; } small { color:#595856; font-weight:bold; font-size:11px; display:block; margin-bottom:15px; } a { color:#007de2; text-decoration:none; }

84

Meet Creatif a:hover { text-decoration:underline; } p { margin: 0px 0px 15px 0px; } a.button { background:#32312f url(images/button_bg.jpg) repeat-x; padding:5px 10px 5px 10px; color: #ffffff; text-decoration: none; border:1px solid #32312f; text-transform:uppercase; font-size:9px; line-height:25px; } a.button:hover { background:#007de2 url(images/button_bg_o.jpg) repeat-x; border-color:#007de2; }

        <small>    link:hover   

   "a.button" class = "button"

85

Meet Creatif ".button"         



86

Meet Creatif

          <span > Eden Website Design <small>in web design tagged corporate, web2

And then a short description of the website would go in here. Something saying maybe what awesome skills I used on the project and how happy the client was.

View Project

87

Meet Creatif

  .block  .block_inside  .block_insideoverflow:auto   .block { border:1px solid #a3a09e; background-color:#ffffff; margin-bottom:20px; position:relative; } .ribbon { position:absolute; top:-3px; right:-3px; }

  position:relative .block  .block        

88

Meet Creatif

     

PSDTUTS Theme Design

Website design for leading photoshop tutorial site and creation and maintenance of Wordpress theme.

View Project

89

Meet Creatif

PSDTUTS Theme Design

Website design for leading photoshop tutorial site and creation and maintenance of Wordpress theme.

View Project

PSDTUTS Theme Design

Website design for leading photoshop tutorial site and creation and maintenance of Wordpress theme.

View Project Creatif is a WordPress portfolio theme for designers and creatives

You can use it to quickly turn WordPress into a portfolio website.

Not familiar with WordPress?

Fear not, the theme accompanies a book called How to Be a Rockstar Wordpress Designer by Rockstar Resources due for release in 2008.

The book teaches you to use WordPress theming to take advantage of this flexible CMS product to create dynamic sites.

90

Meet Creatif

And as if that's not enough, you can see a photoshop to HTML tutorial on designing the theme over at PSDTUTS and NETTUTS.

           

  

    mini_portfolio_item  

91

Meet Creatif

 /* Portfolio-Home-Styles */ #block_portfolio { overflow:auto; margin-bottom:20px; } #portfolio_items { width:615px; margin-right:25px; float:left; } #text_column { float:right; width:310px; } #text_column h2#text_title { text-indent:-9999px; background-image:url(images/creatif.jpg); background-repeat:no-repeat; width:310px; height:129px; } .mini_portfolio_item { border:1px solid #a3a09e; margin-bottom:10px; } .mini_portfolio_item .block_inside { background:none; background-color:#e2dddc; padding:25px 30px 15px 30px; } .mini_portfolio_item .thumbnail { float:left; marginright:20px; border:1px solid #979390; }

92

Meet Creatif

    overflow:auto #block_portfolio    #portfolio_items    #text_column 



      mini_portfolio_item

    

.block_inside

.block_inside     

93

Meet Creatif



    AudioJungle Site Design

Website design for leading photoshop tutorial site

94

Meet Creatif and creation and maintenance of Wordpress theme.

View Project



position:relative mini_ portfolio_item .mini_portfolio_item { border:1px solid #a3a09e; margin-bottom:10px; position:relative; }

 

      

95

Meet Creatif #portfolio_items { width:615px; margin-right:25px; float:left; padding-top:3px; }

     

96

Meet Creatif

   Designed by Collis Ta'eed, do with this as you please

You can read a photoshop tutorial for creating the design at PSDTUTS, You can read a PS->HTML tutorial for creating the site at NETTUTS and you can learn how to turn the HTML into a Wordpress theme in the upcoming book How to be a Rockstar Wordpress Designer

More Links

• VECTORTUTS
• FlashDen
• AudioJungle
• FreelanceSwitch
• FaveUp

97

Meet Creatif RSS

• RSS Feed
• What is RSS?

             

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

98

Meet Creatif

  /* Footer-Styles */ #footer { font-family:Verdana, Arial, Helvetica, sans-serif; font-size:10px; } .footer_column { float:left; width:120px; margin-right:30px; }

99

Meet Creatif #footer .long { width:610px; } #footer h3 { color:#e2dddc; text-transform:uppercase; font-size:10px; } .footer_column ul li, .footer_column ul { list-style:none; margin:0px; padding:0px; }

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

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

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

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

100

Meet Creatif

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

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

101

Meet Creatif

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

102

Meet Creatif

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

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

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

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

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

103

Meet Creatif

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

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

104

Meet Creatif

             New Blog Design Launched <small>on april 13 in web design tagged blogging

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla mi risus, tempor in, gravida quis, rutrum vitae, massa. Suspendisse congue, nibh et lacinia sodales.

Risus nulla fringilla enim, sit amet adipiscing sapien risus sed velit. Sed

105

Meet Creatif vitae justo. In quis lorem nec justo varius sodales. Nullam eleifend accumsan mi. Nunc at velit. Maecenas velit.


Read More



block_ featuredblog 

  

106

Meet Creatif

#block_featuredblog .text_block { padding-top:5px; width:490px;} h2 { margin:0px 0px 10px 0px; font-size:36px; font-family:Helvetica, Arial, sans-serif; color:#000000; line-height:39px; letter-spacing:-1px; }

text_block  #block_featuredblog   

107

Meet Creatif

    Content Sidebar Content

     /* Block-Content-Styles */ #block_content { } #content_area { width:665px; float:left; } #sidebar { float:left;

108

Meet Creatif width:281px; position:relative; left:-1px; margin-top:15px; background-color:#e2dddc; border:1px solid #a3a09e;

} #sidebar .block_inside { background:none; background-color:#e2dddc; }

  #content_area #sidebar   position:relative      

.block_inside #sidebar



109

Meet Creatif

  Working on a New Project <small>on april 13 in web design tagged blogging

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla mi risus, tempor in, gravida quis, rutrum vitae, massa. Suspendisse congue, nibh et lacinia sodales.

Risus nulla fringilla enim, sit amet adipiscing sapien risus sed velit. Sed vitae justo. In quis lorem nec justo varius sodales. Nullam eleifend accumsan mi. Nunc at velit. Maecenas velit. Read More

Design Awards! <small>on april 13 in web design tagged blogging

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla mi risus, tempor in, gravida quis, rutrum vitae, massa. Suspendisse congue, nibh et lacinia sodales.

Risus nulla fringilla enim, sit amet adipiscing sapien risus sed velit. Sed vitae justo. In quis lorem nec justo varius sodales. Nullam eleifend accumsan

110

Meet Creatif

mi. Nunc at velit. Maecenas velit. Read More

This Site is Almost Complete Finally... <small>on april 13 in web design tagged blogging

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla mi risus, tempor in, gravida quis, rutrum vitae, massa. Suspendisse congue, nibh et lacinia sodales.

Risus nulla fringilla enim, sit amet adipiscing sapien risus sed velit. Sed vitae justo. In quis lorem nec justo varius sodales. Nullam eleifend accumsan mi. Nunc at velit. Maecenas velit. Read More

Subscribe
• RSS Feed
• Email Updates
Categories
• News
• Marketing
• General


111

Meet Creatif
• Great Sites
Archives
• June 2008
• May 2008
• April 2008
• March 2008




115

Meet Creatif



    h4 { color:#007de2; margin:0px 0px 0px 0px; }



116

Meet Creatif

   

    body#dark body#dark { background-color:#1e1d1b; } body#dark #main { background:#292826 url(images/background_dark_slice. jpg) repeat-x; } body#dark #main .container { background-image:url(images/background_dark.jpg); } body#dark #footer { background-image:url(images/background_dark_footer. jpg); } body#dark ul#menu li a.active, ul#menu li a:hover { color:#ffffff; }

117

Meet Creatif

  #main#main .container#footer  



 

118

Meet Creatif

body#dark .block, body#dark .mini_portfolio_item { border-color:#1b1a19; } body#dark #text_column h2#text_title { background-image:url(images/creatif_dark.jpg); }

  

119

Meet Creatif

Further Resources on HTML & Photoshop

    

Introduction to Themes        

122

Introduction to Themes

Finding and Installing Themes   wp-content     

 

    

123

Introduction to Themes

 

    



     



124

Introduction to Themes

Editing Theme Files through WordPress





 

125

Introduction to Themes

How a Theme Works

  header.phpindex.php sidebar.php  footer.php 

 

index. php

sidebar.php   


    

126

Introduction to Themes

  

How to Make a Theme in 60 Seconds       style.css 

index.php

Test Theme

  

127

Introduction to Themes

Add a Little Bit of WordPress PHP   index.php

  

That’s How Themes Work   bloginfo('name')           

128

Introduction to Themes

Template Tags      functionname(parameter 1, parameter 2, ...);



 wp_list_ categories()  

 

 

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

129

Introduction to Themes

 wp_list_categories 'show_option_all' => '', 'orderby' => 'name', 'order' => 'ASC', 'show_last_update' => 0, 'style' => 'list', 'show_count' => 0, 'hide_empty' => 1, 'use_desc_for_title' => 1, 'child_of' => 0, 'feed' => '', 'feed_image' => '', 'exclude' => '', 'hierarchical' => true, 'title_li' => __('Categories'), 'echo' => 1, 'depth' => 0

 wp_list_categories   

 wp_list_categories     "&" 

130

Introduction to Themes

Finding and Understanding Template Tags    

The Loop    for ( $counter = 1; $counter



have_posts()     the_post()     the_title()   the_content()    

A More Common Version of The Loop  

132

Introduction to Themes

  ... HTML CODE ...

endwhile ... HTML CODE ...

  endwhile{}      

Sorry, no posts matched your criteria.



 

133

Introduction to Themes

  

Files and What They Do  index.phpstyle.css

  index.php       

 single.php single.php

 index.php  single.php > index.php



134

Introduction to Themes

  

 some_template.php  page.php  index.php

 some_template.php > page.php > index.php

The File Hierarchy    date.php > archive.php > index.php

 category-id.php > category.php > archive.php > index.php

 tag-slug.php > tag.php > archive.php > index.php

 author.php > archive.php > index.php

135

Introduction to Themes

 home.php > index.php

 single.php > index.php

 some_template.php > page.php > index.php

 search.php > index.php

 404.php > index.php

Including Files        

TEMPLATEPATH 

136

Introduction to Themes sidebar.phpfooter.php

header.phpcomments.php



   

Conditional Tags

index.php      

index.php    True 

137

Introduction to Themes ... Some code to show on single Posts

... Some code to show on other pages

     is_home()



is_page()



is_single()



is_category()



is_author()



 

The WordPress Default Theme – Kubrick    

138

Introduction to Themes



   wp-content/themes/default      index.php header.phpsidebar.php

footer.php      

139

Building a Basic Theme: Creatif Blog    

Using Kubrick as a Base

      

Further Resources on Theming Basics          

Building a Basic Theme: Creatif Blog               

142

Building a Basic Theme: Creatif Blog

Setting up WordPress          large_previewvalue   



143

Building a Basic Theme: Creatif Blog

Setting up the Theme  index.phpstyle.css

 index.php style.css   style.css   /* Theme Name: Rose Theme URI: the-theme's-homepage Description: a-brief-description Author: your-name Author URI: your-URI Template: use-this-to-define-a-parent-theme--optional Version: a-number--optional . General comments/License Statement if any. . */

       

144

Building a Basic Theme: Creatif Blog      

  

style.css

 /* Theme Name: Creatif Blog Theme URI: http://rockablepress.com Description: For the book 'How to Be a Rockstar WordPress Designer!' Author: Collis Ta'eed & Harley Alexander Author URI: http://rockablepress.com Version: 1.0 . This theme can be used for commercial or non-commercial use so long as it is not redistributed or resold in any way. . */

index.php Hello World! 

145

Building a Basic Theme: Creatif Blog



index. phpstyle.css   

 

Absolute URLs   

146

Building a Basic Theme: Creatif Blog index.php

  /images/sample.jpg

 http://example.com/wp-content/themes/theme_name/images/ sample.jpg

theme_nametheme_name2   bloginfo   'url'

 /wp-content/themes/theme_name/ images/sample.jpg

   template_directory 

147

Building a Basic Theme: Creatif Blog

  http://example.com/wp-content/themes/theme_name

 

---



How to be a Rockstar WordPress Designer 2

Read more



Rockstar Icon Designer

Read more



How to Be a Graphic Designer Without Losing Your Soul

Read more



How to Grow as a Graphic Designer

Read more



Rockstar

Read more



How To Be a Superhero

Read more



How to Be a Pirate

Read more



How to Be a Pirate

Read more



How to Be a Pirate

Read more



How to be a Pirate

Read more



How To Be a Woman

Read more



How to be a DJ

Read more



How to Be a Genius

Read more



How To Be A Survivor

Read more



How to be a DJ

Read more



How To Be A Survivor

Read more



How to Be a Genius

Read more



How to Be a Genius

Read more



How to Be a Pirate

Read more



How to Be a Pirate

Read more



How to Be a Woman

Read more



How to Be a Woman

Read more



Rockstar

Read more



How to be Death

Read more



How to Be Black

Read more



How to Be Lost

Read more



How To Be Idle

Read more



How To Be Compassionate

Read more



How to Be Ethnic

Read more



How to Be Popular

Read more

Recommend Documents



How to be a Rockstar WordPress Designer 2

Rockablepress.com Envato.com © Rockable Press 2011 All rights reserved. No part of this publication may be reproduced o...

---



Rockstar Icon Designer

Rockablepress.com Envato.com © Rockable Press 2011 All rights reserved. No part of this publication may be reproduced o...

---



How to Be a Graphic Designer Without Losing Your Soul

...

---



How to Grow as a Graphic Designer

How to Grow_GD Title Pages 11/9/04 12:27 PM Page i How to Grow as a Gra phic Design er Prelims.qxd 02/11/200...

---



Rockstar

---



How To Be a Superhero

---



How to Be a Pirate

ABOUT THE AUTHOR Hiccup Horrendous Haddock the Third was an awesome swordfighter, a dragon-whisperer, and the greatest V...

---



How to Be a Pirate

---



How to Be a Pirate

---



How to be a Pirate

---

×
Report "How To Be a Rockstar WordPress Designer"
Your name
Email
Reason -Select Reason- Pornographic Defamatory Illegal/Unlawful Spam Other Terms Of Service Violation File a copyright complaint
Description
Close Send
×
Sign In
Email
Password
Remember me Forgot password?
Sign In
Our partners will collect data and use cookies for ad personalization and measurement. Learn how we and our ad partner Google, collect and use data. Agree & close