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

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 ; ? >
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