Developing for WordPress - Do's and Don'ts

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

View Slide

WHAT'S ON THE MENU
TODAY?

View Slide

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

View Slide

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

View Slide

THEMES

View Slide

WHERE TO START?

View Slide

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

View Slide

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

View Slide

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

View Slide

PAID
Genesis
PageLines
Headway

View Slide

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.

View Slide

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

View Slide

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

View Slide

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

View Slide

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

View Slide

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

View Slide

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

View Slide

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

View Slide

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

View Slide

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

View Slide

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.

View Slide

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

View Slide

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.

View Slide

RESSOURCES
With a community this big, consider yourself lucky!

View Slide

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

View Slide

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

View Slide

TEST YOUR THEME
Official Theme Unit Test
Theme-Check Plugin

View Slide

PLUGINS

View Slide

WHERE TO START?

View Slide

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

View Slide

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+

View Slide

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

View Slide

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

View Slide

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

View Slide

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

View Slide

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

View Slide

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

View Slide

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

View Slide

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

View Slide

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

View Slide

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

View Slide

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

View Slide

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

View Slide

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

View Slide

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

View Slide

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

View Slide

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

View Slide

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

View Slide

BOOKS
Digging into WordPress
Professional WordPress Plugin Development

View Slide

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!

View Slide

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

View Slide

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

View Slide

Developing for WordPress - Do's and Don'ts

Developing for WordPress - Do's and Don'ts

Silvan Hagen

More Decks by Silvan Hagen

Other Decks in Programming

Featured

Transcript