29 December 2008

Creating Your own WordPress Plug-in and Widget

Until now, whenever I needed to have something displayed on the sidebar of my WordPress blog, I simply input my HTML code into a Text Widget and added it to the sidebar. This worked fine until I needed something with a bit of intelligence to it.

I labored for a couple of days about this and eventually solved my problem, even with my limited PHP skills.

But what I discovered was that there did not seem to be a ready made, easy to use template for creating a Sidebar Widget or a WordPress plug-in. So I have created this easy to use template for everyone to copy and use as they see fit:

Plugin Name: Your Plug-in Name
Plugin URI: People are sent to this URL when they click on the name of your plugin in the Plug-ins page
Description: A description of your plug-in or widget. This is displayed on the plug-ins page as the plug-in description
Author: Your Name
Version: 1.0
Author URI: People are sent to this URL when they click on your name from the plug-ins page.

function displayWidgetContent() {?>
Your HTML or PHP code goes here.
<?php }

function widget_myWidget($args) {
echo $before_widget;
echo $before_title;?>Plug-in/Widget Title goes here<?php echo $after_title;
echo $after_widget;

function myWidget_init()
register_sidebar_widget(__(‘My Widget’), ‘widget_myWidget’);
add_action("plugins_loaded", "myWidget_init");

Now for some description about how to customize this for your needs.

First, note that PHP code is wrapped in tags like this

&#60;?php ?&#62;

. This plug-in is written in PHP and HTML so we open and close these tags frequently.

At the top, there is a section that starts with a ‘/*’ and ends with a ‘*/’. Between these two lines is some critical information about your plug-in. The labels for each should not be changed as WordPress uses these for displaying information about your plug-in on the Plug-ins page of your WordPress admin panel. But the information next to each label should be updated to reflect the proper information for your plug-in.

If your a beginner, you should also understand that PHP uses ‘functions’ to group program instructions together. I have separated out a function that should be used for your custom code ‘displayWidgetContent’. You can simply put HTML code here starting with the opening <p> tag up to and including the closing </p> tag. For the more adventurous, try your hand at putting some PHP code in here. Just remember to wrap it in the PHP tags.

To customize the heading of your plug-in as it would appear in the sidebar, change the specified text in the function called ‘widget_myWidget’. The remaining code inside this function should remain as is to comply with the look and feel of your theme.

The last function initializes the widget and registers it with the WordPress system. The last line sees to it that the widget code is run when the plug-in is active.

This topic may be a little bit advanced for some. If you are having any difficulties or would like some assistance, please feel free to contact me and I can give you some assistance.