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

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