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

Developing for WordPress - Do's and Don'ts

Developing for WordPress - Do's and Don'ts

My very first public presentation on WordPress. Link to the event: http://www.internet-briefing.ch/event?event_id=112 and the presentation on GitHub: https://github.com/neverything/developing-for-wordpress

Silvan Hagen

March 05, 2013
Tweet

More Decks by Silvan Hagen

Other Decks in Programming

Transcript

  1. DEVELOPING THEMES Where to start? How to use assets Child

    Theme or not? C o d e : Theme or Plugin? Ressources
  2. WITH A THEME FRAMEWORK OR BLANK THEME? There are some

    fantastic WordPress theme frameworks and blank themes!
  3. FREE YEAH! (paid option available) (shameless advertisting) Underscores (_S) Thematic

    Hybrid UpThemes Framework Roots Bones required+ Foundation
  4. SO SHOULD I USE A THEME FRAMEWORK? Yes, but it

    depends. Look at them individually and decide for yourself and the project ahead. I usually strive for base themes or frameworks that are very close to WordPress using the original template structure, not bloated with options, and so on.
  5. MEET ACTION AND FILTER HOOKS - Chapter 3 “ Hooks

    are the backbone of WordPress. They enable developers to hook into the WordPress workflow to change how it works without directly modifying the core code. ” Professional WordPress Development
  6. EXAMPLE OF AN ACTION AND A FILTER HOOK Example of

    an : Example of a : action hook f u n c t i o n r e q _ e m a i l _ f r i e n d s ( ) { w p _ m a i l ( . . . ) ; } a d d _ a c t i o n ( ' w p _ t i t l e ' , ' r e q _ e m a i l _ f r i e n d s ' ) ; filter hook f u n c t i o n r e q _ a d d _ h e a r t _ t o _ t i t l e ( $ t i t l e , $ s e p ) { $ h e a r t = ' S' ; / / A p p e n d t h e h e a r t t o t h e t i t l e $ t i t l e . = $ s e p . ' ' . $ h e a r t ; r e t u r n $ t i t l e ; } a d d _ f i l t e r ( ' w p _ t i t l e ' , ' r e q _ a d d _ h e a r t _ t o _ t i t l e ' , 1 0 , 2 ) ;
  7. YOU COULD DO - BUT SHOULDN'T It's a little better

    than putting everything in the h e a d e r . p h p , but how about letting WordPress know about the assets in your theme? f u n c t i o n r e q _ m y _ s c r i p t s ( ) { e c h o ' < s c r i p t s r c = " < ? p h p e c h o g e t _ s t y l e s h e e t _ d i r e c t o r y _ u r i ( ) ; ? > / j a v a s c r i p t s / a p p l i c a t i o n . j s " > < / s c r i p t > ' ; } a d d _ a c t i o n ( ' w p _ h e a d ' , ' r e q _ m y _ s c r i p t s ' ) ;
  8. YOU SHOULD DO Example from : This will still print

    your themes stylesheet in the header through w p _ h e a d ( ) and add the s m a l l - m e n u . j s to the footer using w p _ f o o t e r ( ) . Underscores / * * * E n q u e u e s c r i p t s a n d s t y l e s * / f u n c t i o n _ s _ s c r i p t s ( ) { w p _ e n q u e u e _ s t y l e ( ' s t y l e ' , g e t _ s t y l e s h e e t _ u r i ( ) ) ; w p _ e n q u e u e _ s c r i p t ( ' s m a l l - m e n u ' , / / I D g e t _ t e m p l a t e _ d i r e c t o r y _ u r i ( ) . ' / j s / s m a l l - m e n u . j s ' , a r r a y ( ' j q u e r y ' ) , / / d e p e n d e n c i e s ' 2 0 1 2 0 2 0 6 ' , / / v e r s i o n t r u e / / i n f o o t e r ) ; } a d d _ a c t i o n ( ' w p _ e n q u e u e _ s c r i p t s ' , ' _ s _ s c r i p t s ' ) ;
  9. CHILD THEME OR NOT? Inherit the good (and the bad)

    stuff from your parents can be handy!
  10. WHAT THE HECK IS A CHILD THEME? “ A WordPress

    child theme is a theme that inherits the functionality of another theme, called the parent theme, and allows you to modify, or add to, the functionality of that parent theme. ” The Codex on Child Themes
  11. CHILD THEMES IN A NUTSHELL In your child themes s

    t y l e . c s s This is all it takes to create a child theme. So far it does nothing different than the parent. / w p - c o n t e n t / t h e m e s / y o u r - p a r e n t - t h e m e / / y o u r e x a m p l e p a r e n t t h e m e / y o u r - c h i l d - t h e m e / / n a m e d o e s n ' t m a t t e r h e r e s t y l e . c s s / / r e q u i r e d t o m a k e i t w o r k / * T h e m e N a m e : Y o u r C h i l d T h e m e D e s c r i p t i o n : C h i l d t h e m e f o r t h e Y o u r P a r e n t T h e m e t h e m e A u t h o r : Y o u r n a m e h e r e T e m p l a t e : y o u r - p a r e n t - t h e m e * / @ i m p o r t u r l ( " . . / y o u r - p a r e n t - t h e m e / s t y l e . c s s " ) ;
  12. THEME OR PLUGIN? Where should you put your custom code?

    An ongoing discussion in the community.
  13. DON'T BLOAT YOUR THEME WITH SHORTCODES! ... and don't believe

    in theme authors selling you [ s h o r t c o d e s ] as theme features.
  14. WHAT ABOUT CUSTOM POST TYPES? Custom Post Types are WordPress

    one-fits-all (most) model to store content in almost any form you like. So it's up to you wether you add the custom post type to your theme or create a plugin.
  15. DEBUG YOUR THEME 5 Ways to Debug WordPress Debug Bar

    Plugin Developer Plugin Log Deprecated Notices
  16. FROM SCRATCH? Nope, there is the fantastic and even a

    for the lazy ones. WordPress Plugin Boilerplate code generator
  17. USING THE WORDPRESS PLUGIN BOILERPLATE This example is from .

    c l a s s D e m o P l u g i n { p u b l i c f u n c t i o n _ _ c o n s t r u c t ( ) { l o a d _ p l u g i n _ t e x t d o m a i n ( ' d e m o - p l u g i n ' , f a l s e , d i r n a m e ( p l u g i n _ b a s e n a m e ( _ _ F I L E _ _ ) ) . ' / l a n g ' ) ; a d d _ a c t i o n ( ' w p _ e n q u e u e _ s c r i p t s ' , a r r a y ( $ t h i s , ' r e g i s t e r _ p l u g i n _ s t y l e s ' ) ) ; a d d _ a c t i o n ( ' w p _ e n q u e u e _ s c r i p t s ' , a r r a y ( $ t h i s , ' r e g i s t e r _ p l u g i n _ s c r i p t s ' ) ) ; a d d _ f i l t e r ( ' t h e _ c o n t e n t ' , a r r a y ( $ t h i s , ' a p p e n d _ p o s t _ n o t i f i c a t i o n ' ) ) ; } } WP Tuts+
  18. CREATE YOUR OWN?! After you wrote a few plugins yourself,

    you might feel the need to create your own boilerplate.
  19. PLUGIN API WordPress is the action and filter hooks system,

    that allows you to hook in where your plugin has to. Plugin API / / C r e a t e a n e w f i l t e r h o o k $ m y _ a r g s = a p p l y _ f i l t e r s ( ' r e q _ a r g s _ f i l t e r ' , $ a r g s ) ; / / C r e a t e y o u r o w n a c t i o n h o o k d o _ a c t i o n ( ' r e q _ h e a d e r _ a c t i o n ' ) ;
  20. PLUGIN API Now people can filter your $ m y

    _ a r g s and attach an action to r e q _ h e a d e r _ a c t i o n : / / A d d a f i l t e r t o $ m y _ a r g s f u n c t i o n m y _ c u s t o m _ a r g s _ f i l t e r ( $ a r g s ) { / / d o s o m e t h i n g w i t h t h e d a t a r e t u r n $ a r g s ; } a d d _ f i l t e r ( ' r e q _ a r g s _ f i l t e r ' , ' m y _ c u s t o m _ a r g s _ f i l t e r ' ) ; / / A d d a n a c t i o n t o r e q _ h e a d e r _ a c t i o n f u n c t i o n m y _ c u s t o m _ h e a d e r _ a c t i o n ( ) { / / D o w h a t e v e r y o u l i k e ; - ) e c h o ' H e l l o m y f r i e n d ' ; } a d d _ a c t i o n ( ' r e q _ h e a d e r _ a c t i o n ' , ' m y _ c u s t o m _ h e a d e r _ a c t i o n ' ) ;
  21. PLUGIN API Your plugin might leave data as options or

    you need custom tables, please make use of the activation/deactivation and uninstall hooks to add or remove data. r e g i s t e r _ a c t i v a t i o n _ h o o k ( ) run code on plugin activation r e g i s t e r _ d e a c t i v a t i o n _ h o o k ( ) run code on plugin deactivation r e g i s t e r _ u n i n s t a l l _ h o o k ( ) or u n i n s t a l l . p h p here you actually delete whatever your plugin created
  22. OPTIONS API Need to save global plugin options? Use the

    . Options API / / S t o r e s o m e d a t a $ m y _ o p t i o n = a r r a y ( ' s t a t e ' = > ' y e l l o w ' , ' v e r s i o n ' = > ' 0 . 1 . 0 ' ) ; u p d a t e _ o p t i o n ( ' m y _ p l u g i n _ o p t i o n ' , $ m y _ o p t i o n ) ; / / G e t t h e d a t a b a c k $ o p t i o n s = g e t _ o p t i o n ( ' m y _ p l u g i n _ o p t i o n ' ) ; $ s t a t e = $ o p t i o n s [ ' s t a t e ' ] ; $ v e r s i o n = $ o p t i o n s [ ' v e r s i o n ' ] ;
  23. SETTINGS API - Chapter 7 “ Dealing with user inputs

    introduces new constraints in the option process: You need to design a user interface, monitor form submissions, handle security checks, and validate user inputs. To easily manage these common tasks, WordPress wraps the option functions into a comprehensive Settings API. ” Professional WordPress Development
  24. SETTINGS API The offers you to register groups of settings

    and settings fields. It also helps creating the form and handles the errors for you. Settings API
  25. HTTP API The is an easy and standardized API to

    fetch remote data. HTTP API $ r e q u e s t = w p _ r e m o t e _ g e t ( ' h t t p : / / e x a m p l e . c o m ' ) ; $ b o d y = w p _ r e m o t e _ r e t r i e v e _ b o d y ( $ r e q u e s t ) ; / / $ b o d y c o n t a i n s t h e a c t u a l p a g e c o n t e n t r e t u r n e d b y t h e s e r v e r
  26. TRANSIENTS API With the you can store data that expires.

    Transients API / / G e t a n y e x i s t i n g c o p y o f o u r t r a n s i e n t d a t a i f ( f a l s e = = = ( $ c u s t o m _ q u e r y = g e t _ t r a n s i e n t ( ' s p e c i a l _ q u e r y ' ) ) ) { / / I t w a s n ' t t h e r e , s o r e g e n e r a t e t h e d a t a a n d s a v e t h e t r a n s i e n t $ c u s t o m _ q u e r y = n e w W P _ Q u e r y ( ' c a t = 5 & o r d e r = r a n d o m & t a g = t e c h ' ) ; s e t _ t r a n s i e n t ( ' s p e c i a l _ q u e r y ' , $ c u s t o m _ q u e r y , 1 2 * H O U R _ I N _ S E C O N D S ) ; } / / U s e t h e d a t a l i k e y o u w o u l d h a v e n o r m a l l y . . .
  27. THE GOOD AND THE BAD Some simple rules for plugin

    development and how to find good plugins.
  28. THE BAD If you do any of these things you

    gonna have a bad time. Includes a custom version of jQuery Loads JS and CSS on all requests and admin pages Not ready for translation or doing it wrong Direct DB access without $ w p d b - > p r e f i x Want some more? Visit Crappy Code
  29. THE GOOD It's not that hard to be the good

    guy, test your stuff and respect others. Respect the global namespace Prefer API methods over direct access Add custom action and filter hooks where appropriate Stay close to WordPress styling in the backend Only use custom DB tables when needed
  30. CREATE A PLUGIN The Codex on Writing a Plugin Develop

    Plugins: Object-Oriented Programming Develop Plugins: Functional Programming
  31. FIVE MORE THINGS! 1. The core is your friend, read

    the WordPress code. 2. Inspire yourself by digging through great plugins. 3. Get involved in the community, we need everyone. 4. Localize your stuff, so people can easily translate it. 5. Go and build something awesome!