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

60d03aad905487166cd4430d1b725a41?s=128

Silvan Hagen

March 05, 2013
Tweet

Transcript

  1. DEVELOPING FOR WORDPRESS DO'S AND DONT'S Hashtag for today: #WPKonferenz

    Created by / Silvan Hagen @neverything
  2. WHAT'S ON THE MENU TODAY?

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

    Theme or not? C o d e : Theme or Plugin? Ressources
  4. DEVELOPING PLUGINS Where to start? Meet the APIs The Good

    and the Bad Ressources
  5. THEMES

  6. WHERE TO START?

  7. FROM SCRATCH? Nah, there are too many solid boilerplates!

  8. WITH A THEME FRAMEWORK OR BLANK THEME? There are some

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

    Hybrid UpThemes Framework Roots Bones required+ Foundation
  10. PAID Genesis PageLines Headway

  11. 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.
  12. HOW TO USE ASSETS? Stylesheets, JavaScripts and other external ressources

    in your theme.
  13. 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
  14. 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 ) ;
  15. 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 ' ) ;
  16. 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 ' ) ;
  17. CHILD THEME OR NOT? Inherit the good (and the bad)

    stuff from your parents can be handy!
  18. 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
  19. 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 " ) ;
  20. THEME OR PLUGIN? Where should you put your custom code?

    An ongoing discussion in the community.
  21. 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.
  22. DEVELOP UNIVERSAL SHORTCODE PLUGINS! A good example is the Grid

    Columns Plugin by Justin Tadlock
  23. 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.
  24. RESSOURCES With a community this big, consider yourself lucky!

  25. CREATE A THEME The ThemeShaper WordPress Theme Tutorial: 2nd Edition

    Create a child theme with TwentyTwelve
  26. DEBUG YOUR THEME 5 Ways to Debug WordPress Debug Bar

    Plugin Developer Plugin Log Deprecated Notices
  27. TEST YOUR THEME Official Theme Unit Test Theme-Check Plugin

  28. PLUGINS

  29. WHERE TO START?

  30. FROM SCRATCH? Nope, there is the fantastic and even a

    for the lazy ones. WordPress Plugin Boilerplate code generator
  31. 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+
  32. CREATE YOUR OWN?! After you wrote a few plugins yourself,

    you might feel the need to create your own boilerplate.
  33. MEET THE APIS WordPress currently available for you to work

    with. lists 16 different APIs
  34. 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 ' ) ;
  35. 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 ' ) ;
  36. 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
  37. 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 ' ] ;
  38. 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
  39. 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
  40. 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
  41. 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 . . .
  42. THE GOOD AND THE BAD Some simple rules for plugin

    development and how to find good plugins.
  43. 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
  44. 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
  45. RESSOURCES Ready to write better plugins? Here are some inputs!

  46. CREATE A PLUGIN The Codex on Writing a Plugin Develop

    Plugins: Object-Oriented Programming Develop Plugins: Functional Programming
  47. INTERNATIONALIZATION AND TRANSLATIONS Internationalization: You’re probably doing it wrong More

    Internationalization Fun
  48. WORDPRESS UI Integrating With WordPress’ UI: The Basics WordPress Admin

    Style Plugin
  49. BOOKS Digging into WordPress Professional WordPress Plugin Development

  50. 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!
  51. QUESTIONS? Further questions? Contact me: / silvan@required.ch @neverything

  52. THANK YOU! This presentation is available on , and .

    GitHub SlideShare our website