Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Theme Development and Design - WordCamp Jabalpur 2011

B6500b41998cd1ed4aa28464ec0118bb?s=47 Aniket Pant
October 15, 2011

Theme Development and Design - WordCamp Jabalpur 2011

Slides from my talk at WordCamp Jabalpur 2011.

Note: All slides redone from deck.js to reveal.js

B6500b41998cd1ed4aa28464ec0118bb?s=128

Aniket Pant

October 15, 2011
Tweet

Transcript

  1. THEME DEVELOPMENT AND CUSTOMIZATION By / Aniket Pant @aniket_pant

  2. PREVIEW 1. Basic Concepts 2. Stylesheets 3. Functions 4. Templates

    5. Child Themes 6. Bones
  3. WHAT IS WORDPRESS?

  4. CONTENT MANAGEMENT SYSTEM

  5. WHAT IS A THEME? As per the codex — “

    Fundamentally, the WordPress Theme system is a way to “skin” your weblog. Yet, it is more than just a “skin.” Skinning your site implies that only the design is changed. WordPress Themes can provide much more control over the look and presentation of the material on your website. ”
  6. By at #frontend2011 “ In Web design, we should all

    be craftsmen or craftswomen. We should break the frame and explore the unknown. ” Simon Collison
  7. WHAT MAKES A THEME? Theme Stylesheets Function Files Template Files

  8. THEME STYLESHEETS This is the theme information of Bones /

    * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * T h e m e N a m e : B o n e s T h e m e U R I : h t t p : / / w w w . t h e m b l e . c o m / b o n e s D e s c r i p t i o n : A n i n c r e d i b l y s i m p l e s t a r t e r t h e m e f o r d e v e l o p e r s . A u t h o r : E d d i e M a c h a d o A u t h o r U R I : h t t p : / / w w w . t h e m b l e . c o m / b o n e s / V e r s i o n : 1 . 0 7 T a g s : h t m l 5 , f r a m e w o r k , c s s 3 , d e v e l o p m e n t L i c e n s e : G P L o r w h a t e v e r L i c e n s e U R I : ? A l l D e f a u l t S t y l e s a r e i n l i b r a r y / c s s / d e f a u l t . c s s I r e c o m m e n d n o t e d i t i n g t h o s e f i l e s a n d m a k i n g a l l c h a n g e s h e r e . T h a t w a y i f s o m e t h i n g g o e s a w r y , y o u c a n e a s i l y r e v e r t b a c k t o t h e o r i g i n a l , b u t t h a t ' s t o t a l l y u p t o y o u . H a p p y D e v e l o p i n g !
  9. FUNCTIONS FILE You can put in your custom PHP codes

    in this file to modify some core functions of your theme. It is often used to insert 2 sidebars, change the number of characters in the excerpt, add custom admin panels or a new type of post. “Put in your entire hand coded functions, tailor made for your theme.”
  10. EXAMPLE #1 f u n c t i o n

    b o n e s _ e x c e r p t ( ) { t h e _ e x c e r p t ( ) ; e c h o ' < b r / > ' ; e c h o ' < p > < a h r e f = ' " . g e t _ p e r m a l i n k ( ) . " ' > R e a d M o r e . . . < / a > < / p > ' ; }
  11. EXAMPLE #2 f u n c t i o n

    b o n e s _ r e g i s t e r _ s i d e b a r s ( ) { r e g i s t e r _ s i d e b a r ( a r r a y ( ' i d ' = > ' s i d e b a r 1 ' , ' n a m e ' = > ' S i d e b a r 1 ' , ' d e s c r i p t i o n ' = > ' T h e f i r s t ( p r i m a r y ) s i d e b a r . ' , ' b e f o r e _ w i d g e t ' = > ' < d i v i d = " % 1 $ s " c l a s s = " w i d g e t % 2 $ s " > ' , ' a f t e r _ w i d g e t ' = > ' < / d i v > ' , ' b e f o r e _ t i t l e ' = > ' < h 4 c l a s s = " w i d g e t t i t l e " > ' , ' a f t e r _ t i t l e ' = > ' < / h 4 > ' , ) ) ; }
  12. TEMPLATE FILES style.css index.php comments.php home.php single.php single-.php search.php attachment.php

    image.php 404.php page.php category.php tag.php taxonomy.php author.php date.php
  13. THE HEADER < ! d o c t y p

    e h t m l > < h e a d > < m e t a c h a r s e t = " u t f - 8 " > < t i t l e > < ? p h p w p _ t i t l e ( ' - ' , t r u e , ' r i g h t ' ) ; b l o g i n f o ( ' n a m e ' ) ; ? > < / t i t l e > < l i n k r e l = " s h o r t c u t i c o n " h r e f = " / f a v i c o n . i c o " > < l i n k r e l = " p i n g b a c k " h r e f = " " > < ? p h p w p _ h e a d ( ) ; ? > < l i n k r e l = " s t y l e s h e e t " h r e f = " " > < / h e a d > < b o d y < ? p h p b o d y _ c l a s s ( ) ; ? > > < d i v i d = " c o n t a i n e r " > < h e a d e r r o l e = " b a n n e r " > . . . < / h e a d e r >
  14. THE CONTENT < ? p h p g e t

    _ h e a d e r ( ) ; ? > < d i v i d = " c o n t e n t " c l a s s = " c l e a r f i x " > < d i v i d = " m a i n " c l a s s = " c o l 7 0 0 l e f t c l e a r f i x " r o l e = " m a i n " > < ? p h p i f ( h a v e _ p o s t s ( ) ) : w h i l e ( h a v e _ p o s t s ( ) ) : t h e _ p o s t ( ) ; ? > < a r t i c l e i d = " p o s t - " > < h e a d e r > < h 1 c l a s s = " h 2 " > < ? p h p t h e _ t i t l e ( ) ; ? > < / h 1 > < / h e a d e r > < s e c t i o n c l a s s = " p o s t _ c o n t e n t c l e a r f i x " > R e a d m o r e o n " ' . t h e _ t i t l e ( ' ' , ' ' , f a l s e ) . ' " » ' , " b o n e s t h e m e " ) ) ; ? > < / s e c t i o n > < f o o t e r > . . . < / f o o t e r > < ? p h p c o m m e n t s _ t e m p l a t e ( ) ; ? > < ? p h p e n d w h i l e ; ? > < ? p h p e l s e : ? > < a r t i c l e i d = " p o s t - n o t - f o u n d " > < h e a d e r > < h 1 > N o t F o u n d < / h 1 > < / h e a d e r > < s e c t i o n c l a s s = " p o s t _ c o n t e n t " >
  15. THE MIGHTY LOOP

  16. THE LOOP This is what you see. It will contain

    The Loop. The Loop is the key to printing all your posts. This is how it starts: And this is the end: < ? p h p i f ( h a v e _ p o s t s ( ) ) : w h i l e ( h a v e _ p o s t s ( ) ) : t h e _ p o s t ( ) ; ? > < ? p h p e n d w h i l e ; e l s e : ? > < p > < ? p h p _ e ( ' S o r r y , n o p o s t s m a t c h e d y o u r c r i t e r i a . ' ) ; ? > < ? p h p e n d i f ; ? >
  17. None
  18. SINGLE POST TYPE

  19. SINGLE-<POST-TYPE>.PHP Another important feature in WordPress 3.0 is that you

    can add your own Custom Post Type Boxes. The default list – Post, Page, Attachment, Revisions, Nav Menus
  20. REGISTER A POST TYPE Add this to your f u

    n c t i o n . p h p r e g i s t e r _ p o s t _ t y p e ( ' m o v i e s ' , a r r a y ( ' l a b e l ' = > ' M o v i e s ' , ' p u b l i c ' = > t r u e , ' s h o w _ u i ' = > t r u e , ' c a p a b i l i t y _ t y p e ' = > ' p o s t ' , ' h i e r a r c h i c a l ' = > f a l s e , ' r e w r i t e ' = > a r r a y ( ' s l u g ' = > ' m o v i e s ' ) , ' q u e r y _ v a r ' = > t r u e , ' s u p p o r t s ' = > a r r a y ( ' t i t l e ' , ' e d i t o r ' , ' e x c e r p t ' , ' t r a c k b a c k s ' , ' c u s t o m - f i e l d s ' , ' c o m m e n t s ' , ' r e v i s i o n s ' , ' t h u m b n a i l ' , ' a u t h o r ' , ' p a g e - a t t r i b u t e s ' , ) ) ) ;
  21. By at #frontend2011 “ The content is like water. And

    design is like a flavour sprinkled on content. ” @standardistas
  22. “ People say Web Design is not coding, I call

    that bullshit. We design the web by coding. ”
  23. CHILD THEMES

  24. CHILD THEMES Derive something from another theme and what you

    get is a Child Theme. You can do absolutely anything with a Child Theme, but the only difference between a new theme and a child theme is that. It would be residing in the parent theme's directory.
  25. BUILD A CHILD THEME Just make a directory in your

    parent theme directory.You can name it anything. You can put anything in this directory.So, if it's just a styling change you wish to make, make a s t y l e . c s s There are some required information that you need to mention in the child theme's CSS like – Theme Name & Template. You can refer to the Codex regarding this.
  26. WHAT WE HAVE COVERED The basic concepts of WordPress Little

    on Stylesheets Some snippets on functions Making Templates Building Child Themes My favorite theme bones
  27. “ We are the architects of the Web, and this

    is our playground. ”
  28. WHAT DO I DO? Read regularly. Visit daily. Read about

    typography. Read anything and everything about CSS. Smashing Magazine Hacker News
  29. QUESTIONS?

  30. THE END BY ANIKET PANT / @ANIKET_PANT