WordPress Hacking – Creating a Plugin and Sidebar Widget

To follow-up from my previous post, I had a unique requirement for our personal blog which was to display images attached to a post on the sidebar and not in the post. The first item I needed to figure out was how do I hook into the WordPress system to make changes. WordPress has a well developed Plugin model. Additionally, the Sidebar  is populated by something called Widgets which can be implemented by Plugins. So I figured the first thing was to write a WordPress plugin that implemented a Sidebar widget.

For the purpose of this post, I will assume that you have SSH access to your web host and thus able to add files to the WordPress installation without relying on the web UX.

Creating a WordPress plugin consists of the following steps:

1. Create a new folder to host your plugin under your WordPress installation’s wp-content/plugins folder. I created a folder called wp-content/plugins/sidebarimage for my new plugin.
2. Create a <plugin>.php file to host your plugin code in this folder. I created a file called sidebarimage.php in my wp-content/plugins/sidebarimage folder.
3. Add a custom comment header to the php file so WordPress will recognize it as a plugin. The empty plugin file looks like this at this point:

<?php
/*
Plugin Name: Sidebar Image
Plugin URI: http://www.nramkumar.org/tech
Description: Hides images from single posts and shows them in the sidebar
Version: 0.5
Author: Ramkumar Natarajan
Author URI: http://www.nramkumar.org/tech
*/
?>

Now that we have an empty plugin, the next step was to create an empty widget. This is very straight-forward as well and covered here:

1. Create a class that extends WP_Widget
2. Implement a constructor, form, update and widget methods in the class
3. Register the widget by calling wp_register_sidebar_widget method

At this point, the plugin php file looks like this:

<?php
/*
Plugin Name: Sidebar Image
Plugin URI: http://www.nramkumar.org/tech
Description: Hides images from single posts and shows them in the sidebar
Version: 0.5
Author: Ramkumar Natarajan
Author URI: http://www.nramkumar.org/tech
*/

error_reporting(E_ALL);
add_action('widgets_init', array('SidebarImage_Widget', 'register'));

class SidebarImage_Widget extends WP_Widget {
    function SidebarImage_Widget() {
        parent::WP_Widget(false, 'Sidebar Image Widget');
    }

    function form($instance) {
    }

    function update($new_instance, $old_instance) {
        return $new_instance;
    }

    function widget($args) {
        extract($args);

        echo $before_widget;
        echo $before_title . 'Snapshots' . $after_title;
        echo $after_widget;
    }

    function register(){
        wp_register_sidebar_widget(
            'Sidebar_Image_Widget', 
            'Sidebar Image Widget', 
            array('SidebarImage_Widget', 'widget'));
    }
}
?>

The error_reporting(E_ALL) is used during development so any PHP errors are reported when you view your site. We register the widgets by hooking into the widgets_init action and calling the register method in our widget class. The register method itself registers the widget class and its output method widget by calling wp_register_sidebar_widget method.

At this point, we now have our empty plugin and widget. You should now be able to see the new widget in the WordPress dashboard under Appearance/Widgets. If you add this widget to a sidebar that gets displayed by your theme, you should see the widget show up with the title Snapshots. Note that we use $before_widget, $before_title, $after_title and $after_widget to format the widget output as recommended by the WordPress codex.