THEME DEVELOPMENT AND CUSTOMIZATION By / Aniket Pant @aniket_pant 

PREVIEW 1. Basic Concepts 2. Stylesheets 3. Functions 4. Templates 5. Child Themes 6. Bones 

WHAT IS WORDPRESS? 

CONTENT MANAGEMENT SYSTEM 

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. ” 

By at #frontend2011 “ In Web design, we should all be craftsmen or craftswomen. We should break the frame and explore the unknown. ” Simon Collison 

WHAT MAKES A THEME? Theme Stylesheets Function Files Template Files 

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 ! 

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.” 

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 > ' ; } 

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 > ' , ) ) ; } 

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 

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 > 

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 " > 

THE MIGHTY LOOP 

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

No content

SINGLE POST TYPE 

SINGLE-.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 

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 ' , ) ) ) ; 

By at #frontend2011 “ The content is like water. And design is like a flavour sprinkled on content. ” @standardistas 

“ People say Web Design is not coding, I call that bullshit. We design the web by coding. ” 

CHILD THEMES 

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. 

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. 

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 

“ We are the architects of the Web, and this is our playground. ” 

WHAT DO I DO? Read regularly. Visit daily. Read about typography. Read anything and everything about CSS. Smashing Magazine Hacker News 

QUESTIONS? 

THE END BY ANIKET PANT / @ANIKET_PANT