Slide 1
Slide 1 text
Juliette Reinders Folmer | Advies en zo
WordPress for the Win!
Slide 2
Slide 2 text
No content
Slide 3
Slide 3 text
Anatomy of WordPress
Slide 4
Slide 4 text
Page
footer
Admin
Bar
Page
content
(loop)
Page
header
(Invisible) HTML
Sidebar
containing
widgets
(Main)
menu
Slide 5
Slide 5 text
Admin Bar
(Invisible) HTML
Admin
footer
Admin
Menu
1. Post
types
2. Custom-
izations
3. Extras
Admin
page
(with
dashboard
widgets)
Slide 6
Slide 6 text
Anatomy of WordPress
• Core
• Plugins
• Themes
• Languages
• Js Libraries
Content via:
• Post Types
• Taxonomies
• Sidebars
• Widgets
• Users
Enhanced with
Meta data / Custom
fields
Slide 7
Slide 7 text
Hooks
Slide 8
Slide 8 text
Hooks
• Actions – do something
• Filters – filter someting and return the
result
See:
• WordPress Codex
• Hooks database:
http://adambrown.info/p/wp_hooks
• Debug Bar - Action& filter hooks plugin
Slide 9
Slide 9 text
The Loop
Slide 10
Slide 10 text
The Loop
Slide 11
Slide 11 text
WordPress in practice
Slide 12
Slide 12 text
wp-config.php Tips & Tricks
Slide 13
Slide 13 text
No content
Slide 14
Slide 14 text
wp-config.php
• /* Change how WP deals with post revisions, trash
and auto-saves */
define( 'WP_POST_REVISIONS', 20 );
define( 'AUTOSAVE_INTERVAL', 60 ); // seconds
define( 'EMPTY_TRASH_DAYS', 7 ); // days (30)
define( 'MEDIA_TRASH', true );
• /* Enable Compression en concatenation and cache */
define( 'COMPRESS_CSS', true );
define( 'COMPRESS_SCRIPTS', true );
define( 'CONCATENATE_SCRIPTS', true );
define( 'ENFORCE_GZIP', true );
define( 'WP_CACHE', true );
• /* Set up WordPress as Multi-site */
define( 'WP_ALLOW_MULTISITE', true );
Slide 15
Slide 15 text
wp-config.php
• /* Force secure logins and admin sessions */
define( 'FORCE_SSL_LOGIN', true );
define( 'FORCE_SSL_ADMIN', true );
• /* Disable Plugin and Theme Update and Installation
and/or plugin/theme editor */
define( 'DISALLOW_FILE_EDIT', true );
define( 'DISALLOW_FILE_MODS', true );
• /* Disable the new WP 3.7+ auto-updater */
define( 'AUTOMATIC_UPDATER_DISABLED', true );
• /* FTP settings */
define( 'FTP_HOST', 'hostname:port' );
define( 'FTP_USER', 'username' );
define( 'FTP_PASS', 'password' );
Slide 16
Slide 16 text
wp-config.php
• /* Enable debugging */
define( 'WP_DEBUG', true);
define( 'WP_DEBUG_DISPLAY‘, true);
• /* Error logging to wp-content/debug.log */
define( 'WP_DEBUG_LOG', true);
• /* Load the development (non-minified) versions of
all scripts, css, disables compression and
concatenation */
define( 'SCRIPT_DEBUG', true);
• /* Try to increase PHP Memory */
define( 'WP_MEMORY_LIMIT', '128M' );
Slide 17
Slide 17 text
WordPress in your language
Slide 18
Slide 18 text
No content
Slide 19
Slide 19 text
Make WP speak your language
• define( 'WPLANG', 'de_DE' );
Slide 20
Slide 20 text
Theming your site
Slide 21
Slide 21 text
No content
Slide 22
Slide 22 text
No content
Slide 23
Slide 23 text
Child themes
Slide 24
Slide 24 text
Creating a child theme
Slide 25
Slide 25 text
Child theme – style.css
/*
Theme Name: Twenty Twelve Child
Theme URI: http://localhost/
Template: twentytwelve
Author: Advies en zo
Author URI: http://adviesenzo.nl/
Description: My Child theme
Text Domain: twentytwelve
Version: 1.0.0
*/
@import url("../twentytwelve/style.css");
/* =Theme customization starts here */
Slide 26
Slide 26 text
Functions.php
Slide 27
Slide 27 text
Hooking into WP
add_action( 'hook_name', 'function_name',
$priority = 10, $accepted_args = 1 );
add_action( 'hook_name',
array( $this, 'method_name' ),
$priority = 10, $accepted_args = 1 );
add_action( 'hook_name',
array( __CLASS__, 'static_method_name' ),
$priority = 10, $accepted_args = 1 );
apply_filter( 'hook_name', 'function_name',
$priority = 10, $accepted_args = 1 );
Slide 28
Slide 28 text
functions.php
function favicon_link() {
echo '';
echo '';
}
add_action('wp_head', 'favicon_link');
add_action('admin_head', 'favicon_link');
function hide_profile_fields( $contactmethods ) {
unset( $contactmethods['aim'] );
unset( $contactmethods['jabber'] );
unset( $contactmethods['yim'] );
return $contactmethods;
}
add_filter( 'user_contactmethods', 'hide_profile_fields' );
Slide 29
Slide 29 text
No content
Slide 30
Slide 30 text
functions.php
/* Change admin page footer – Branding */
function my_admin_footer_text( $left ) {
$left = '%20.
'/images/AEZ_logobw-32x32.png)
Webdevelopment, design and consultancy:
Advies en zo
';
return $left;
}
add_filter( 'admin_footer_text', ‘my_admin_footer_text' );
Webdevelopment, design and consultancy:
Advies en zo
';
return $left;
}
add_filter( 'admin_footer_text', ‘my_admin_footer_text' );
Slide 31
Slide 31 text
Extending WordPress
Slide 32
Slide 32 text
No content
Slide 33
Slide 33 text
No content
Slide 34
Slide 34 text
No content
Slide 35
Slide 35 text
Must-use plugins
Slide 36
Slide 36 text
Create a plugin
Slide 37
Slide 37 text
Starting a plugin
Slide 38
Slide 38 text
What every plugin needs
• Hook your functionality onto actions and filters
• Loading your localization files
• Load CSS
• Load JS
• Do something
• Add admin page or add to another admin page
• Help information
• Activation/ Upgrade routines
• Uninstall routines
• ...
Slide 39
Slide 39 text
Add custom content types &
taxonomies
register_post_type(
$post_type_name, // Post type name. Max of 20
characters. Uppercase and spaces not allowed.
$args // Arguments for post type.
);
register_taxonomy(
$taxonomy_name, // Taxonomy internal name. Max 32
characters. Uppercase and spaces not allowed.
array(
$post_type_name,
), // Post types to register this taxonomy for
$args // Arguments for taxonomy.
);
Slide 40
Slide 40 text
No content
Slide 41
Slide 41 text
No content
Slide 42
Slide 42 text
Add a settings page
register_setting( $option_group, $option_name,
$sanitize_callback );
get/update/delete_option( $option_name );
add_submenu_page( $parent_slug, $page_title,
$menu_title, $capability, $page_slug,
$call_back );
add_settings_section( $section_id, $title,
$callback, $page_slug );
add_settings_field( $id, $title, $callback,
$page_slug, $section_id, $args );
settings_fields( $option_group )
do_settings_sections( $page_slug );
do_settings_fields( $page_slug, $section_id );
Slide 43
Slide 43 text
No content
Slide 44
Slide 44 text
Add a widget
class My_Widget extends WP_Widget {
// widget actual processes
public function __construct() {}
// outputs the content of the widget
public function widget( $args, $instance ) {}
// outputs the options form on admin
public function form( $instance ) {}
// processes widget options to be saved
public function update( $new_instance, $old_instance ) {}
}
add_action('widgets_init',
create_function( '', 'return register_widget( "My_Widget" );' )
);
Slide 45
Slide 45 text
No content
Slide 46
Slide 46 text
No content
Slide 47
Slide 47 text
(De-)Activation, upgrade, uninstall
(De-)Activation:
• Can’t be added from
within a class
• Can use methods
within a class
Upgrading:
• No upgrade hook
• Save plugin version
nr to option &
compare
/* Set up the (de-)activation actions */
register_activation_hook( __FILE__,
array( ‘Plugin_Class', 'activate' ) );
register_deactivation_hook( __FILE__,
array( ' Plugin_Class ', 'deactivate' ) );
• Uninstall via uninstall.php file
Slide 48
Slide 48 text
Enqueue scripts & styles
wp_register_style( 'handle', plugins_url(
'css/style' . $suffix . '.css', __FILE__ ),
array(), VERSION, 'all' );
wp_enqueue_style( 'handle' );
wp_register_script( 'handle', plugins_url(
'js/file' . $suffix . '.js', __FILE__ ),
array( 'jquery', 'wp-ajax-response' ),
VERSION, true // load in footer );
wp_enqueue_script( 'handle' );
wp_localize_script( 'handle',
'i18n_js_objectname', array() );
Slide 49
Slide 49 text
Best Practices
Slide 50
Slide 50 text
Be Unique
Slide 51
Slide 51 text
Be Unique
• PHP:
– Classes
– Functions
– global vars
– (global) constants
• WP:
– shortcodes
– option(s) / meta fields
– nonces
– settings pages
– custom post types / taxonomies
– hooks
• Filenames
• HTML/CSS:
– classes, ids
• Javascript:
– I18n object
– functions
• Multi-lingual
– I18n text domain
Choose your plugin name carefully & implement consistently
Slide 52
Slide 52 text
Don’t reinvent the wheel
Slide 53
Slide 53 text
Don’t reinvent the wheel
• Dashboard Widgets
API
• Database API
• HTTP API
• File Header API
• Filesystem API
• Heartbeat API
• Metadata API
• Options API
• Plugin API
• Quicktags API
• Rewrite API
• Settings API
• Shortcode API
• Theme modification API
• Theme customization API
• Transients API
• Widgets API
• XML-RPC WordPress
API
Slide 54
Slide 54 text
Avoid conflict
Slide 55
Slide 55 text
Avoid conflict
• function_exists()
• class_exists()
• Jquery no conflicts mode
• Use bundled libraries
Slide 56
Slide 56 text
Libraries shipped with WP
• common /wp-admin/js/common.js
• sack /wp-includes/js/tw-sack.js
• quicktags /wp-includes/js/quicktags.js
• colorpicker /wp-includes/js/colorpicker.js
• editor /wp-admin/js/editor.js
• wp-fullscreen /wp-admin/js/wp-fullscreen.js
• prototype /wp-includes/js/prototype.js
• wp-ajax-response /wp-includes/js/wp-ajax-response.js
• wp-pointer /wp-includes/js/wp-pointer.js
• autosave /wp-includes/js/autosave.js
• wp-lists /wp-includes/js/wp-lists.js
•
• scriptaculous-root /wp-includes/js/scriptaculous/wp-
scriptaculous.js
• scriptaculous-builder /wp-
includes/js/scriptaculous/builder.js
• scriptaculous-dragdrop /wp-
includes/js/scriptaculous/dragdrop.js
• scriptaculous-effects /wp-
includes/js/scriptaculous/effects.js
• scriptaculous-slider /wp-
includes/js/scriptaculous/slider.js
• scriptaculous-sound /wp-
includes/js/scriptaculous/sound.js
• scriptaculous-controls /wp-
includes/js/scriptaculous/controls.js
• scriptaculous scriptaculous-dragdrop,
scriptaculous-slider, scriptaculous-controls, scriptaculous-root
• cropper /wp-includes/js/crop/cropper.js
•
•
• thickbox /wp-includes/js/thickbox/thickbox.js
• jcrop /wp-includes/js/jcrop/jquery.Jcrop.js
• swfobject /wp-includes/js/swfobject.js
• plupload /wp-includes/js/plupload/plupload.js
• plupload-html5 wp-
includes/js/plupload/plupload.html5.js
• jquery /wp-includes/js/jquery/jquery.js (v1.7.2 as of WP 3.3,
v1.8.3 as of WP 3.5)
• jquery-ui-core /wp-
includes/js/jquery/ui/jquery.ui.core.min.js
• jquery-effects-core /wp-
includes/js/jquery/ui/jquery.effects.core.min.js
• jquery-effects-blind /wp-
includes/js/jquery/ui/jquery.effects.blind.min.js
• jquery-effects-bounce /wp-
includes/js/jquery/ui/jquery.effects.bounce.min.js
• jquery-effects-clip /wp-
includes/js/jquery/ui/jquery.effects.clip.min.js
• jquery-effects-drop /wp-
includes/js/jquery/ui/jquery.effects.drop.min.js
• jquery-effects-explode /wp-
includes/js/jquery/ui/jquery.effects.explode.min.js
• jquery-effects-fade /wp-
includes/js/jquery/ui/jquery.effects.fade.min.js
• jquery-effects-fold /wp-
includes/js/jquery/ui/jquery.effects.fold.min.js
• jquery-effects-highlight /wp-
includes/js/jquery/ui/jquery.effects.highlight.min.js
• jquery-effects-pulsate /wp-
includes/js/jquery/ui/jquery.effects.pulsate.min.js
• jquery-effects-scale /wp-
includes/js/jquery/ui/jquery.effects.scale.min.js
• jquery-effects-shake /wp-
includes/js/jquery/ui/jquery.effects.shake.min.js
• jquery-effects-slide /wp-
includes/js/jquery/ui/jquery.effects.slide.min.js
• jquery-effects-transfer /wp-
includes/js/jquery/ui/jquery.effects.transfer.min.js
• jquery-ui-accordion /wp-
includes/js/jquery/ui/jquery.ui.accordion.min.js
• jquery-ui-autocomplete /wp-
includes/js/jquery/ui/jquery.ui.autocomplete.min.js
• jquery-ui-button /wp-
includes/js/jquery/ui/jquery.ui.button.min.js
• jquery-ui-datepicker /wp-
Slide 57
Slide 57 text
Be lazy, stay lean
Slide 58
Slide 58 text
Be lazy, be lean
• Use the available is_...() functions
• Conditional loading of include files
• Conditional loading of css / js both on
admin as well as frontend!
• Minify js and css
• New in WP3.6: has_shortcode()
Slide 59
Slide 59 text
Be safe
Slide 60
Slide 60 text
Be safe
• Check early & check often
• Validation all input
sanitize_text_field(),
sanitize_title(), sanitize_meta() etc
• Escape all output
esc_html(), esc_attr(), esc_url(),
esc_textarea(), esc_js() etc
• Use wp_nonce
Slide 61
Slide 61 text
Be wordly
Slide 62
Slide 62 text
Be worldly
• GetText
• UTF-8
• Impact on data validation
load_plugin_textdomain('my_plugin', false, dirname(
plugin_basename( __FILE__ ) ) . '/languages/' );
sprintf(
__( 'Post updated. View post',
'my_plugin' ),
esc_url( get_permalink( $post_ID ) )
),
esc_html__( 'Custom field updated.', 'my_plugin' );
Slide 63
Slide 63 text
Let others hook in
Slide 64
Slide 64 text
Let others hook in
• Offer your own action hooks
• Offer your own filter hooks
do_action( 'my_unique_action_hook',
$var_to_pass );
$filtered_var = apply_filters(
'my_unique_filter_hook', $var_to_pass );
• Document using the @api tag
Slide 65
Slide 65 text
Make it beautiful
Slide 66
Slide 66 text
Pay your dues
Slide 67
Slide 67 text
Pay your dues
• Keep the WP requirements in mind
• Document your code
• Use the coding standards
• WordPress coding standards:
http://make.wordpress.org/core/handbook/coding-
standards/php/
• CodeSniffs available:
https://github.com/WordPress-Coding-
Standards/WordPress-Coding-Standards
Slide 68
Slide 68 text
Get involved
Slide 69
Slide 69 text
Help someone who’s
struggling
Slide 70
Slide 70 text
Find an abandoned project
Slide 71
Slide 71 text
Have fun!
Slide 72
Slide 72 text
Image Credits
• Anatomy - Eva di Martino
http://www.pureblacklove.com
• Conflict - Asaf Antman
http://www.flickr.com/photos/asafantman/5134136997/
• Help - Green Kozi
http://www.flickr.com/photos/themacinator/3445776069/
• Hooks - Raul Lieberwirth
http://www.flickr.com/photos/lanier67/185311136/
• Hooks – Macroman (red background)
http://www.flickr.com/photos/macroman/34644959/
• Alone – Jon
http://www.flickr.com/photos/jb-london/3594171841/
• Fun - Justin Beckley
http://www.flickr.com/photos/justinbeckleyphotography/8452437969/
• Lazy - Kevin Cauchi
http://www.flickr.com/photos/kpcauchi/5376768095/
• Loop - Gabe Kinsman
http://www.flickr.com/photos/auguris/5286612308/
Slide 73
Slide 73 text
Image Credits
• Security – kismihok
http://www.flickr.com/photos/kismihok/9686252463/
• Unique - Luca Volpi (leafs)
http://www.flickr.com/photos/luca_volpi/2974346674/
• Wheel - Pauline Mak
http://www.flickr.com/photos/__my__photos/5025541044/
• WordPress - mkhmarketing (crayons)
http://www.flickr.com/photos/mkhmarketing/8469030267/
• WordPress - Saad Irfan (core, plugins, themes)
http://www.flickr.com/photos/saadirfan/5722057280/
• CMS Landscape - Philippe Martin
http://www.flickr.com/photos/lafabriquedeblogs/5997969999/
• World - Kenneth Lu
http://www.flickr.com/photos/toasty/1540997910/
• Bike - Pauline Mak
http://www.flickr.com/photos/__my__photos/6399028713/
• Daisies - Steve Wall
http://www.flickr.com/photos/stevewall/4780035332/
Slide 74
Slide 74 text
Keep in touch!
(I’m self-employed, you can hire me ;-) )
Juliette Reinders Folmer
Email: [email protected]
Web: http://www.adviesenzo.nl/
LinkedIn: http://nl.linkedin.com/in/julietterf
Twitter: http://twitter.com/jrf_nl
GitHub: http://github.com/jrfnl/
WordPress: http://profiles.wordpress.org/jrf
Please rate this talk on joined.in/9495
Endorsements and recommendations on
LinkedIn are much appreciated too!