Creating Extensible Plugins for WordPress

Hristo ChakarovWordUp! Conference, Sofia, 2013

Who am I?

● I'm in the web since 2002○ professionally since 2007

● Currently working as a Senior JavaScript developer @ Netclime Inc.○ one product - SiteKreator (website builder)

http://sitekreator.com

● Love WordPress○ 2 plugins on the official plugins page○ several commercial projects on top of the platform○ co-founder of WordPress Bulgarian User Group

(WPBGUG)http://wpbgug.org/

Why WordPress?

● Which is the best CMS in the World?○ In fact, there's no such

● However, WordPress is much, much better than its most famous competitors○ Great Admin UI○ Rich & well documented API○ Easy to extend

■ you don't have to be very experienced programmer in order to create a plugin

○ Huge community■ tons of free & paid Themes & Plugins

○ But last 2 might be problematic

Today:

1. Why do we need to make plugins extensible2. Anatomy of WordPress hooks3. Differences between actions & filters

+ examples4. Overwriting OOP-style plugins5. Tips6. Demo, plugin examples, good to read

Quick Questions

● How many of you have contributed at least 1 plugin in WordPress' Plugin Directory?

● How often do you feel the need to tweak a 3rd party plugin in order to fit 100% in your project(s)?

● When you start coding new plugin, have you ever felt the need to reuse functionality from another your plugin?

Consider the following scenario:

1. You need extra functionality for your WP project

2. You enjoy a plugin and you download it3. There's that very tiny thing that this plugin

does not bring to you4. You modify plugin's source code5. You forget about modifying the source6. A new version of the plugin is available. You

update your copy and after the update you look at your site and...

...Damn! My changes got lost!

Shooting at the developer won't solve the problem

What can be done?

Nothing.But at least we can start making our own plugins extensible and make the World better :)

Benefits of extensible plugin

● other developers can easily extend your plugins so they serve their needs

● code reuse - we may have a base plugin (core) and a lot of extensions (other plugins) built on top of it

OK, but how do we make our WP plugin extensible?

How do you extend WordPress?● by using the platform's hooks

add_actionremove_actionadd_filterremove_filter

It's the same if you want to make your plugin extensible - just register your own hooks!● do_action● apply_filters

How actions & filters work(Minimum Theory)

● add_action & add_filter register handlers (functions) to be executed on certain event( hook_id, fn_name, priority, num_args )

● do_action & apply_filters execute all handlers when called

Difference between Actions & Filters

● filters accept, modify & return data○ strings○ arrays○ objects

● actions just execute○ actions are just like events - they "trigger"

● to modify strings (can be HTML or any other)

// in your core plugin echo apply_filters( 'my_plugin_html', '<strong>Hello, world!</strong>');

// in extending pluginadd_filter( 'my_plugin_html', 'custom_html_filter' );function custom_html_filter( $html ) { return '<div>' . $html . '</div>';}

Use filters:

Use filters:

● for HTML its better to work on DOM level○ Simple HTML DOM library is good for that$dom = str_get_html('<b>Hello, world!</b>');apply_filters( 'my_plugin_dom', $dom );echo $dom->save();

add_filter( 'my_plugin_dom', 'custom_dom_filter' );function custom_dom_filter( $dom ) { // replace the <b> with <strong> foreach ( $b as $dom->find('b') ) $b->outerhtml = '<strong>'.$b->innertext.'</strong>'; return $dom;}

Use filters:

● to modify WP Query// define initial set of query params$query_args = array( 'post_type' => 'books', 'author' => 3);$books = new WP_Query( apply_filters( 'myplugin_query', $query_args) );

add_filter('myplugin_query', 'modify_query');function modify_query( $query_args ) { $query_args['posts_per_page'] = 5; return $query_args;}

Use actions:

● to spice HTML markup

Use actions:

● to print resources// in the core plugin

do_action( 'myplugin_print_resources' );

// in the extending plugin

add_action(

'myplugin_print_resources',

'myplugin_print_scripts'

);

function myplugin_print_scripts() {

echo '<script src=".."></script>

}

Lets make our plugin more OOP!

● define a main class for your plugin● instantiate the class on WordPress <init>

class MyPlugin {

function myMethod() {

// ...

}

}

add_action( 'init', 'myplugin_init' );

function myplugin_init() {

global $plugin_instance;

$plugin_instance = new MyPlugin();

}

Overwrite

● define extending class & overwrite base● instantiate the class on WordPress <init>

class ExtendingPlugin extends MyPlugin { function myMethod() { $this->parent(); // not necessary // .. extra functionality here }}remove_action( 'init', 'myplugin_init' );add_action( 'init', 'extending_init' );function extending_init() { global $plugin_instance; $plugin_instance = new ExtendingPlugin();}

Tips

● plan your actions & filters carefully○ think where you will need to provide a hook○ try to use descriptive & easy to remember names

filter_html (too generic)wpplg_tpl_html (what?)a_really_awesome_filter_html (too long)myplugin_filter_html (almost perfect)

○ don't overhook● its good to create a documentation page● comment, comment, comment!

○ comments can be your best friend

● Image Widgethttp://wordpress.org/extend/plugins/image-widget/

● NextGEN Galleryhttp://wordpress.org/extend/plugins/nextgen-gallery/

● bbPresshttp://wordpress.org/extend/plugins/bbpress/

● WPMLhttp://wpml.org/

● WooCommercehttp://www.woothemes.com/woocommerce/

Extensible plugins for inspiration

Extending NextGEN Gallery pluginwith custom template

Demo

I recommend you to read

● Anatomy of a WordPress Pluginhttp://www.packtpub.com/article/anatomy-wordpress-plugin

● Inside WordPress Actions And Filtershttp://wp.smashingmagazine.com/2012/02/16/inside-wordpress-

actions-filters/

● Writing Extensible Plugins With Actions and Filtershttp://wp.tutsplus.com/tutorials/plugins/writing-extensible-

plugins-with-actions-and-filters/

● 5 Things I’ve Learned About Writing Flexible Pluginshttp://www.kungfugrep.com/5-learned-writing-flexible-

plugins/

Time for questions

Your turn - word up!

mail (at) ickata.netblog.ickata.net

facebook.com/ickatanetgithub.com/ickata

Thank You!