Technixa

Why make your own widget?

If you want to add something to your Blog sidebar you could either find a widget that already does the job or alternatively add it yourself to the template.  However with your own widget you can make it what you want and if you change theme it would cut down on the edits required to move the functionality to the new template.

Create a Simple Plugin.

The plugin will be a php file installed to the wp-content/plugins directory of your website, this could be in its own folder or just the php file on its own.  In this example I will create it as plugins/technixa/technixa.php.

In order for wordpress to recognise the plugin the php file needs some information added.  The following Header is what I used it contains the information wordpress will need to register the file as a plugin.

<?php
/*
Plugin Name: Technixa
Plugin URI: http://www.technixa.com/
Description: Test widget
Author: Gordon Brown
Version: 1
Author URI: http://www.technixa.com/
*/
?>

At this point Wordpress will show the file as an addon in the control panel and let you activate it, it doesn’t currently do anything or show as a widget.

First we need to define something for the widget to do so we will add a function.

<?php
function technixa_widget() {
   echo "HELLO WORLD";
}
?>

At this point we now have a fully functioning simple plugin, we could add <?php technixa_widget(); ?> somewhere in the template and it would insert the plugin function at that point.  However we want a widget we can drag and drop into the sidebar of a compatible theme so some more code is now required.

<?php
add_action("plugins_loaded", "init_technixa");
function init_technixa() {
     register_sidebar_widget("Technixa", "technixa_widget");
}
?>

add_action tells wordpress to call a function whenever it does a certain action, in this case when the plugins are loaded it carries out the function called init_technixa.

One final thing we can also do is to use the layout from the Theme.  To do this we need to use import($args) which will import the information needed.  Now function technixa_widget() will change to:

<?php
function technixa_widget($args) {
   extract($args);
   echo $before_widget;
   echo $before_title; echo “Title”; echo $after_title;
   echo “HELLO WORLD”;
   echo $after_widget;
}
?>

The whole code together gives the basic widget, echo “HELLO WORLD”; can be replaced with whatever you want the widget to contain.

<?php
/*
Plugin Name: Technixa
Plugin URI: http://www.technixa.com/
Description: Test widget
Author: Gordon Brown
Version: 1
Author URI: http://www.technixa.com/
*/ 

add_action("plugins_loaded", "init_technixa");
function init_technixa() {

    register_sidebar_widget("Technixa", "technixa_widget");
} 

function technixa_widget($args) {    extract($args);    echo $before_widget;    echo $before_title; echo “Title”; echo $after_title;

    echo “HELLO WORLD”;

    echo $after_widget;

}
?>

The final file can be downloaded from here.

There is also an online tool to generate widgets called widgetifyr.

See also the next post which extends this into a full plugin with additional functionallity.