SlideShare a Scribd company logo
Write your first
WordPress plugin
Anthony Montalbano          @italianst4

         anthony@ambrdetroit.com
Who is Anthony Montalbano?
Passionate for code
  Bachelor's in Computer Science
Passionate for WordPress
  WordCamp Detroit Organizer

Passionate for open source
  WordPress plugin developer

Passionate for words
  Serial blogger

Passionate for possibilities
  Co-founder of flipfrog and AMBR Detroit
What is a WordPress plugin?
"Plugins are tools to extend the functionality of WordPress."
                                      ~ http://codex.wordpress.org/Plugins




MEGA IMPORTANT!
The Codex

         The online manual for WordPress and a living
         repository for WordPress information and
         documentation.
What can plugins do?
WordPress Plugins by the Numbers

21,214                                                         345,389,937
# of plugins                                                 # of plugin downloads

                                         63
                                 % of users that use
                                 10 plugins or less                  9,783+
                                                                     # of plugin
    12,134,168                                                       developers
 # of downloads of the most popular
    plugin - All in One SEO Pack
Sources:
http://wordpress.org/extend/plugins/
http://digwp.com/2010/01/poll-results-how-many-plugins-do-you-use/
http://www.daveligthart.com/top-1000-wordpress-plugin-authors/
Your WordPress plugin "Google"
Let's make a plugin!


●   Find and replace a word in the title.
●   Show what is being replaced as a sidebar widget.
●   Admin menu to change the find word and replace word.
●   Email me when a new post is published.
Filter Hooks and Action Hooks
WordPress plugins rely on the many hooks
within the system to get things done.
Filter Hooks
Filters are the hooks that WordPress launches to modify
text of various types before adding it to the database or
sending it to the browser screen.

Action Hooks
Actions are the hooks that the WordPress core launches at
specific points during execution, or when specific events
occur.
                                  Source: http://codex.wordpress.org/Plugin_API
How Hooks Work
WordPress Plugin API provides you with a set
of PHP functions that allow you to signal your
own functions to be called when that hook is
called.

Filter Example:
add_filter('the_title', function($title) { return '<b>'.
$title. '</b>';})
                        Filters: http://codex.wordpress.org/Plugin_API/Filter_Reference


Action Example:
add_action( 'save_post', 'my_save_post', 10, 2 );
                      Actions: http://codex.wordpress.org/Plugin_API/Action_Reference
How Hooks Work (continued)
Hooks have 4 parameters
● Tag (required)
  ○ This is the WordPress named location where the
     hook takes place.
● Function (required)
  ○ This is the function to be called when the hook is
     executed.
● Priority (optional)
  ○ This determines the order your function is run, the
     lower, the earlier.
● Parameters (optional)
  ○ This is the number of parameters your function takes
Set the Foundation
● Create a new folder in wp-content/plugins
● Create a php file with a plugin header
  comment box
     /*
     Plugin Name: My First Plugin
     Plugin URI: http://wordpress.org/extend/plugins/
     Description: This is a description of a plugin
     Author: Anthony Montalbano
     Version: alpha
     Author URI: http://www.ambrdetroit.com
     */




                         http://codex.wordpress.org/Writing_a_Plugin#File_Headers
Activation and Uninstall
What will your plugin do when it is first
activated?
   ● Create database tables, data, and files
   ● Update database tables, data, and files


What will your plugin do when it is uninstalled?
   ● Delete databases tables, data, files
On Activation
Add the following hook:
register_activation_hook( __FILE__, 'demo_activate' );

Create a new function called 'demo_activate'
 function demo_activate() {
    //do something when the plugin first initializes

 };




             Source: http://codex.wordpress.org/Function_Reference/register_activation_hook
On Uninstall
Create a file called uninstall.php in the root directory.



Add the following code:
 <?php
 if(!defined('WP_UNINSTALL_PLUGIN'))
    exit();

 delete_option('demo_myValue');




             Source: http://codex.wordpress.org/Function_Reference/register_deactivation_hook
Adding a Filter
Add the following filter hook:
add_filter( 'the_title, 'demo_title_change' );

Create a new function called 'demo_title_change'
 function demo_title_change($title) {
    //do something with the title
    str_replace( 'world', 'something', $title);
    return $title;
 };




                        Source: http://codex.wordpress.org/Function_Reference/add_filter
Adding an Action
Add the following filter hook:
add_action( 'publish_post, 'demo_email_me' );

Create a new function called 'demo_title_change'
 function demo_email_me($post_id) {
    wp_mail('anthony@ambrdetroit.com', 'New post!', 'New
 post on my demo blog, go check it out:' . get_bloginfo
 ('url'));
    return $post_id;
 };




                        Source: http://codex.wordpress.org/Function_Reference/add_filter
Adding a Settings Page
First we need add a hook to where the settings
page will show in the admin:
   add_action('admin_menu', 'my_plugin_menu');



Next we need to add a function to define the
menu:
   function my_plugin_menu() {
      add_options_page('Demo Plugin Options', 'Demo
   Plugin', 'manage_options', 'demo-plugin',
   'demo_plugin_options');
   }

                Source: http://codex.wordpress.org/Function_Reference/add_options_page
Adding a Settings Page (continued)
Finally we need to generate the HTML and
functionality of the admin menu:
function demo_plugin_options() {
   //get the option
    $replaceWord = get_option('demo_myValue');

   //save functionality
   if(isset($_REQUEST['demo_update_admin']) && $_REQUEST
['demo_update_admin']) {
       update_option('demo_myValue', $_POST['myValue']);
       $replaceWord = $_POST['myValue'];
       echo "<div id='message' class='updated fade'><p>Demo Plugin
Settings Saved!</p></div>";
   }

    //display the page
    include_once(dirname(__FILE__) . '/demo_admin.php');
}
Adding a Widget
First we need to add a hook to load the widget
on widget initialization:
  add_action( 'widgets_init', 'demo_load_widgets' );



Next, we need to create a function to register
the widget:
  function demo_load_widgets() {
         register_widget( "demo_widget" );
  }




                               Source: http://codex.wordpress.org/Widgets_API
Adding a Widget (continued)
Finally we create the widget by extending the
WordPress Widget class:
  class Demo_Widget extends WP_Widget {

      public function __construct() {
          // widget actual processes
          parent::__construct(
              'demo_widget', // Base ID
              'Demo Widget', // Name
              array( 'description' => __( 'My Little Demo Widget', 'text_domain' ), ) //
  Arrgy
          );
      }

      public function widget( $args, $instance ) {
          // outputs the content of the widget
          extract( $args );
          $replaceWord = get_option('demo_myValue');

          echo $before_widget;
          if ( ! empty( $replaceWord ) )
              echo $before_title . 'My value' . $after_title . $replaceWord;
          echo $after_widget;
      }
  }
Tip 1: Use a plugin prefix
When creating a plugin, create a unique plugin
prefix that can be used for all functions and
variables.

Since there are many plugins, it's important that
your functions and variables don't conflict with
other plugins.
Tip 2: Never use PHP MySQL calls
WordPress has a great database class called
WPDB and makes it very each to plugin to the
WordPress database.
                   http://codex.wordpress.org/Class_Reference/wpdb



For simple name/value pairs you can use
WordPress options
           http://codex.wordpress.org/Function_Reference/add_option
Tip 3: Queuing Scripts and Styles
There are many cases where you may want to
include a javascript or style sheet with your
plugin. WordPress has this functionality built
in. By default WordPress has many scripts
included, such as jQuery.

       http://codex.wordpress.org/Function_Reference/wp_enqueue_script
Tip 4: Use WordPress Admin Styles
The WordPress admin has a style sheet that
should be used when creating admin menus.
The goal is to make your plugin fit seamless
with WordPress.

   http://codex.wordpress.org/User:TECannon/UI_Pattern_and_Style_Guide
Tip 5: Prepare your SQL Statements
WordPress Database class has a function
called prepare(). Use this function to properly
prepare your SQL statements.

                                                  http://codex.wordpress.
 org/Class_Reference/wpdb#Protect_Queries_Against_SQL_Injection_Attacks
There's a Plugin for That

         WordCamp Detroit 2010




          http://bit.ly/wcdetplugins
Thank you!

  Anthony Montalbano

      @italianst4

anthony@ambrdetroit.com

More Related Content

Write your first WordPress plugin

  • 1. Write your first WordPress plugin Anthony Montalbano @italianst4 anthony@ambrdetroit.com
  • 2. Who is Anthony Montalbano? Passionate for code Bachelor's in Computer Science Passionate for WordPress WordCamp Detroit Organizer Passionate for open source WordPress plugin developer Passionate for words Serial blogger Passionate for possibilities Co-founder of flipfrog and AMBR Detroit
  • 3. What is a WordPress plugin? "Plugins are tools to extend the functionality of WordPress." ~ http://codex.wordpress.org/Plugins MEGA IMPORTANT! The Codex The online manual for WordPress and a living repository for WordPress information and documentation.
  • 5. WordPress Plugins by the Numbers 21,214 345,389,937 # of plugins # of plugin downloads 63 % of users that use 10 plugins or less 9,783+ # of plugin 12,134,168 developers # of downloads of the most popular plugin - All in One SEO Pack Sources: http://wordpress.org/extend/plugins/ http://digwp.com/2010/01/poll-results-how-many-plugins-do-you-use/ http://www.daveligthart.com/top-1000-wordpress-plugin-authors/
  • 7. Let's make a plugin! ● Find and replace a word in the title. ● Show what is being replaced as a sidebar widget. ● Admin menu to change the find word and replace word. ● Email me when a new post is published.
  • 8. Filter Hooks and Action Hooks WordPress plugins rely on the many hooks within the system to get things done. Filter Hooks Filters are the hooks that WordPress launches to modify text of various types before adding it to the database or sending it to the browser screen. Action Hooks Actions are the hooks that the WordPress core launches at specific points during execution, or when specific events occur. Source: http://codex.wordpress.org/Plugin_API
  • 9. How Hooks Work WordPress Plugin API provides you with a set of PHP functions that allow you to signal your own functions to be called when that hook is called. Filter Example: add_filter('the_title', function($title) { return '<b>'. $title. '</b>';}) Filters: http://codex.wordpress.org/Plugin_API/Filter_Reference Action Example: add_action( 'save_post', 'my_save_post', 10, 2 ); Actions: http://codex.wordpress.org/Plugin_API/Action_Reference
  • 10. How Hooks Work (continued) Hooks have 4 parameters ● Tag (required) ○ This is the WordPress named location where the hook takes place. ● Function (required) ○ This is the function to be called when the hook is executed. ● Priority (optional) ○ This determines the order your function is run, the lower, the earlier. ● Parameters (optional) ○ This is the number of parameters your function takes
  • 11. Set the Foundation ● Create a new folder in wp-content/plugins ● Create a php file with a plugin header comment box /* Plugin Name: My First Plugin Plugin URI: http://wordpress.org/extend/plugins/ Description: This is a description of a plugin Author: Anthony Montalbano Version: alpha Author URI: http://www.ambrdetroit.com */ http://codex.wordpress.org/Writing_a_Plugin#File_Headers
  • 12. Activation and Uninstall What will your plugin do when it is first activated? ● Create database tables, data, and files ● Update database tables, data, and files What will your plugin do when it is uninstalled? ● Delete databases tables, data, files
  • 13. On Activation Add the following hook: register_activation_hook( __FILE__, 'demo_activate' ); Create a new function called 'demo_activate' function demo_activate() { //do something when the plugin first initializes }; Source: http://codex.wordpress.org/Function_Reference/register_activation_hook
  • 14. On Uninstall Create a file called uninstall.php in the root directory. Add the following code: <?php if(!defined('WP_UNINSTALL_PLUGIN')) exit(); delete_option('demo_myValue'); Source: http://codex.wordpress.org/Function_Reference/register_deactivation_hook
  • 15. Adding a Filter Add the following filter hook: add_filter( 'the_title, 'demo_title_change' ); Create a new function called 'demo_title_change' function demo_title_change($title) { //do something with the title str_replace( 'world', 'something', $title); return $title; }; Source: http://codex.wordpress.org/Function_Reference/add_filter
  • 16. Adding an Action Add the following filter hook: add_action( 'publish_post, 'demo_email_me' ); Create a new function called 'demo_title_change' function demo_email_me($post_id) { wp_mail('anthony@ambrdetroit.com', 'New post!', 'New post on my demo blog, go check it out:' . get_bloginfo ('url')); return $post_id; }; Source: http://codex.wordpress.org/Function_Reference/add_filter
  • 17. Adding a Settings Page First we need add a hook to where the settings page will show in the admin: add_action('admin_menu', 'my_plugin_menu'); Next we need to add a function to define the menu: function my_plugin_menu() { add_options_page('Demo Plugin Options', 'Demo Plugin', 'manage_options', 'demo-plugin', 'demo_plugin_options'); } Source: http://codex.wordpress.org/Function_Reference/add_options_page
  • 18. Adding a Settings Page (continued) Finally we need to generate the HTML and functionality of the admin menu: function demo_plugin_options() { //get the option $replaceWord = get_option('demo_myValue'); //save functionality if(isset($_REQUEST['demo_update_admin']) && $_REQUEST ['demo_update_admin']) { update_option('demo_myValue', $_POST['myValue']); $replaceWord = $_POST['myValue']; echo "<div id='message' class='updated fade'><p>Demo Plugin Settings Saved!</p></div>"; } //display the page include_once(dirname(__FILE__) . '/demo_admin.php'); }
  • 19. Adding a Widget First we need to add a hook to load the widget on widget initialization: add_action( 'widgets_init', 'demo_load_widgets' ); Next, we need to create a function to register the widget: function demo_load_widgets() { register_widget( "demo_widget" ); } Source: http://codex.wordpress.org/Widgets_API
  • 20. Adding a Widget (continued) Finally we create the widget by extending the WordPress Widget class: class Demo_Widget extends WP_Widget { public function __construct() { // widget actual processes parent::__construct( 'demo_widget', // Base ID 'Demo Widget', // Name array( 'description' => __( 'My Little Demo Widget', 'text_domain' ), ) // Arrgy ); } public function widget( $args, $instance ) { // outputs the content of the widget extract( $args ); $replaceWord = get_option('demo_myValue'); echo $before_widget; if ( ! empty( $replaceWord ) ) echo $before_title . 'My value' . $after_title . $replaceWord; echo $after_widget; } }
  • 21. Tip 1: Use a plugin prefix When creating a plugin, create a unique plugin prefix that can be used for all functions and variables. Since there are many plugins, it's important that your functions and variables don't conflict with other plugins.
  • 22. Tip 2: Never use PHP MySQL calls WordPress has a great database class called WPDB and makes it very each to plugin to the WordPress database. http://codex.wordpress.org/Class_Reference/wpdb For simple name/value pairs you can use WordPress options http://codex.wordpress.org/Function_Reference/add_option
  • 23. Tip 3: Queuing Scripts and Styles There are many cases where you may want to include a javascript or style sheet with your plugin. WordPress has this functionality built in. By default WordPress has many scripts included, such as jQuery. http://codex.wordpress.org/Function_Reference/wp_enqueue_script
  • 24. Tip 4: Use WordPress Admin Styles The WordPress admin has a style sheet that should be used when creating admin menus. The goal is to make your plugin fit seamless with WordPress. http://codex.wordpress.org/User:TECannon/UI_Pattern_and_Style_Guide
  • 25. Tip 5: Prepare your SQL Statements WordPress Database class has a function called prepare(). Use this function to properly prepare your SQL statements. http://codex.wordpress. org/Class_Reference/wpdb#Protect_Queries_Against_SQL_Injection_Attacks
  • 26. There's a Plugin for That WordCamp Detroit 2010 http://bit.ly/wcdetplugins
  • 27. Thank you! Anthony Montalbano @italianst4 anthony@ambrdetroit.com