Slide 1

Slide 1 text

DEVELOPING FOR WORDPRESS DO'S AND DONT'S Hashtag for today: #WPKonferenz Created by / Silvan Hagen @neverything

Slide 2

Slide 2 text

WHAT'S ON THE MENU TODAY?

Slide 3

Slide 3 text

DEVELOPING THEMES Where to start? How to use assets Child Theme or not? C o d e : Theme or Plugin? Ressources

Slide 4

Slide 4 text

DEVELOPING PLUGINS Where to start? Meet the APIs The Good and the Bad Ressources

Slide 5

Slide 5 text

THEMES

Slide 6

Slide 6 text

WHERE TO START?

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

WITH A THEME FRAMEWORK OR BLANK THEME? There are some fantastic WordPress theme frameworks and blank themes!

Slide 9

Slide 9 text

FREE YEAH! (paid option available) (shameless advertisting) Underscores (_S) Thematic Hybrid UpThemes Framework Roots Bones required+ Foundation

Slide 10

Slide 10 text

PAID Genesis PageLines Headway

Slide 11

Slide 11 text

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.

Slide 12

Slide 12 text

HOW TO USE ASSETS? Stylesheets, JavaScripts and other external ressources in your theme.

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

CHILD THEME OR NOT? Inherit the good (and the bad) stuff from your parents can be handy!

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

THEME OR PLUGIN? Where should you put your custom code? An ongoing discussion in the community.

Slide 21

Slide 21 text

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.

Slide 22

Slide 22 text

DEVELOP UNIVERSAL SHORTCODE PLUGINS! A good example is the Grid Columns Plugin by Justin Tadlock

Slide 23

Slide 23 text

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.

Slide 24

Slide 24 text

RESSOURCES With a community this big, consider yourself lucky!

Slide 25

Slide 25 text

CREATE A THEME The ThemeShaper WordPress Theme Tutorial: 2nd Edition Create a child theme with TwentyTwelve

Slide 26

Slide 26 text

DEBUG YOUR THEME 5 Ways to Debug WordPress Debug Bar Plugin Developer Plugin Log Deprecated Notices

Slide 27

Slide 27 text

TEST YOUR THEME Official Theme Unit Test Theme-Check Plugin

Slide 28

Slide 28 text

PLUGINS

Slide 29

Slide 29 text

WHERE TO START?

Slide 30

Slide 30 text

FROM SCRATCH? Nope, there is the fantastic and even a for the lazy ones. WordPress Plugin Boilerplate code generator

Slide 31

Slide 31 text

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+

Slide 32

Slide 32 text

CREATE YOUR OWN?! After you wrote a few plugins yourself, you might feel the need to create your own boilerplate.

Slide 33

Slide 33 text

MEET THE APIS WordPress currently available for you to work with. lists 16 different APIs

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

THE GOOD AND THE BAD Some simple rules for plugin development and how to find good plugins.

Slide 43

Slide 43 text

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

Slide 44

Slide 44 text

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

Slide 45

Slide 45 text

RESSOURCES Ready to write better plugins? Here are some inputs!

Slide 46

Slide 46 text

CREATE A PLUGIN The Codex on Writing a Plugin Develop Plugins: Object-Oriented Programming Develop Plugins: Functional Programming

Slide 47

Slide 47 text

INTERNATIONALIZATION AND TRANSLATIONS Internationalization: You’re probably doing it wrong More Internationalization Fun

Slide 48

Slide 48 text

WORDPRESS UI Integrating With WordPress’ UI: The Basics WordPress Admin Style Plugin

Slide 49

Slide 49 text

BOOKS Digging into WordPress Professional WordPress Plugin Development

Slide 50

Slide 50 text

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!

Slide 51

Slide 51 text

QUESTIONS? Further questions? Contact me: / [email protected] @neverything

Slide 52

Slide 52 text

THANK YOU! This presentation is available on , and . GitHub SlideShare our website