preload
Nov 05

This post will describe what you need to do to get started with WordPress plugin development.

First you should install WordPress on your localhost to make it easy to test what you are developing. Good instructions about installing WordPress on your own computer can be found at wordpress.org Installing WordPress. I am using Windows 7 so I first installed Windows Web Platform Installer and then launched the WordPress installation from Web PI. I just used the default settings for ISS and selected to create a new database for this installation.  WordPress is now installed and I can access it at http://localhost/wordpress. I also find all the installed WordPress files in the inetpub directory on my drive.

After getting some tips on Twitter I downloaded and installed PhpStorm by JetBrains to use as my IDE for php development. There is a 45 days free trial license available.

To make live testing while developing I decided to work directly on the inetpub directory. I created a folder for my plugin called “divebook”. In PhpStorm open directory to work on. For my plugin the directory is: C:/inetpub/wwwroot/wordpress/wp-content/plugins/divebook/

Then I created a new php file called divebook.php and added the standard plugin header.

<?php
/*
Plugin Name: DiveBook
Description: Plugin with dive log functionality
Version: 0.1
Author: Per Ola Saether
Author URI: http://www.breathingtech.com/about
License: GPL2
*/
?>

When I go to the plugin section in my localhost WordPress, the newly created DiveBook plugin shows in the list. Aksimet and Hello Dolly (default installed plugins) are good examples to look at to learn about plugin development.

I also recommend to take a look at Writing a Plugin and Plugin API at wordpress.org

Next I made a settings page for my plugin. This page will be available in the Settings menu. I do not like large code classes and files so I created a new php file called settings.php for this purpose and included the file in my main php file (divebook.php).

Settings.php

<?php
/**
 * Description: Settings page for editing plugin settings.
 * Author: Per Ola Saether
 */

add_action('admin_menu', 'my_plugin_menu');

function my_plugin_menu() {

  add_options_page('DiveBook Settings', 'DiveBook', 'manage_options', 'DiveBookSettings', 'my_plugin_options');

}

function my_plugin_options() {

  if (!current_user_can('manage_options'))  {
    wp_die( __('You do not have sufficient permissions to access this page.') );
  }

  echo '<div class="wrap">';
  echo '<h2>DiveBook settings</h2>';
  echo '<p>Settings for your DiveBook plugin</p>';
  echo '</div>';

}
?>

Include settings.php in divebook.php

<?php
#Include the setting page
include("settings.php"); ?>

When this is done you can activate the plugin (disregard the warnings you will get). You will now see the DiveBook in the Settings menu and when you select DiveBook a very simple page, ready to act as your settings page, is displayed.

Next step now is to create a WordPress Widget for the plugin. As for the settings page I create a new php file called widget.php. In widget.php I add code to register the widget so it appears in the available widgets list and I add a simple control where the user can set the title and number of dives displayed in the sidebar when the widget is activated. I added some simple code that will display the widget in the sidebar. A good tutorial on creating widgets can be found at Programming Blog.

widget.php

<?php
/**
 * Description: Widget page for the plugin. Widget will display most recent logged dives.
 * Author: Per Ola Saether
 */

//Initialize widget
function divebook_init() {

    if (!function_exists('register_sidebar_widget'))
        return;

    // Widget sidebar layout
    function divebook_sidebar($args) {

        extract($args);
        // Get stored widget options
        $options = get_option('divebook');
        $title = $options['title'];
        $numdives = $options['numdives'];

        //Sidebare widget layout
        echo $before_widget . $before_title . $title . $after_title;
        echo '<div style="margin-top:5px;text-align:left;">';
        echo '<ul>';
        for ($i = 0; $i < $numdives; $i++){
        echo '<li> Dive number'; $i;
        echo '</li>';
        }
        echo '</ul></div>';
        echo $after_widget;
    }

    // Control form where the user can change settings
    // for the widget
    function divebook_control() {

        // Get stored options
        $options = get_option('divebook');
        //Default options
        if (!is_array($options))
            $options = array('numdives' => 5, 'title' => 'DiveBook');

        //Store and keep new options
        if ($_POST['divebook-submit']) {
            $options['title'] = strip_tags(stripslashes($_POST['divebook-title']));
            $options['numdives'] = strip_tags(stripslashes($_POST['divebook-numdives']));
            update_option('divebook', $options);
        }
        // Format options to be valid HTML
        $title = htmlspecialchars($options['title'], ENT_QUOTES);
        $numdives = htmlspecialchars($options['numdives'], ENT_QUOTES);

        //Control form layout
        echo '<p style="text-align:left;">
        <label for="divebook-title"> ' . __('Title:') . '
        <input style="width: 200px;" id="divebook-title" name="divebook-title" type="text" value="' . $title . '" />
        </label>
        <label for="divebook-numdives"> ' . __('Number of dives to display:') . '
        <br/><input style="width: 30px;" id="divebook-numdives" name="divebook-numdives" type="text" value="' . $numdives . '" />
        </label>
        </p>';
        echo '<input type="hidden" id="divebook-submit" name="divebook-submit" value="1" />';
    }

    //Register Widget so it appears in available widgets
    register_sidebar_widget(array('DiveBook', 'Dives'), 'divebook_sidebar');
    register_widget_control(array('DiveBook', 'Dives2'), 'divebook_control');
}

add_action('widgets_init', 'divebook_init');

?>

Include widget.php in divebook.php

<?php
#Include the setting page
include("settings.php");
#Include the Widget page
include("widget.php");
?>

You will now see the DiveBook plugin when you go to Widgets in WordPress. You can drag the widget over to the active widgets area and enter display title and numbers of dive to be displayed. When you now take a look at the main page the DiveBook widget is displayed in the right sidebar.

This is all you need to do to get started with WordPress plugin development. There is a lot more coding that must be done to make this a useful plugin but I will cover that in a later post.

Follow me on twitter @PerOla

Share & enjoy
You can subscribe to my comments feed to keep track of new comments.

4 Comments to “Getting started with WordPress plugin development”

  1. HTML might be more difficult to update, but it is definitely less vulnerable with less chances of people exploiting it (ie, javascript and ajax)

  2. Saiful says:

    Thanks Grate Help for me.

  3. Saiful,
    I’m glad that you found it useful.

  4. I like the way you describe this plugin screen shots and explanation is so professional thanks for sharing it.

2 Pingbacks to “Getting started with WordPress plugin development”

  1. […] Lire cet article: Getting started with WordPress plugin development […]

  2. […] Getting started with WordPress plugin development Nov 07 […]

Leave a Reply

Subscribe to my comments feed

Subscribe to my feeds Follow me on Twitter
DZone MVB