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

Theme Development and Design - WordCamp Jabalpur 2011

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

Aniket Pant

October 15, 2011
Tweet

More Decks by Aniket Pant

Other Decks in Technology

Transcript

  1. 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. ”
  2. By at #frontend2011 “ In Web design, we should all

    be craftsmen or craftswomen. We should break the frame and explore the unknown. ” Simon Collison
  3. 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 !
  4. 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.”
  5. 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 > ' ; }
  6. 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 > ' , ) ) ; }
  7. 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
  8. 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 >
  9. 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 " >
  10. 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 ; ? >
  11. 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
  12. 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 ' , ) ) ) ;
  13. By at #frontend2011 “ The content is like water. And

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

    that bullshit. We design the web by coding. ”
  15. 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.
  16. 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.
  17. 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
  18. WHAT DO I DO? Read regularly. Visit daily. Read about

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