Posts tagged ‘wordpress’

Adding Options to Wordpress Widget

In two previous Posts (Create a Widget for Wordpress and Create a Simple Plugin for Wordpress) I showed how I created a plug in to add content from files into the displayed theme.  Now I am going to also add an options page to the admin panel and an option to the widget for setting the displayed title.

First I’ll show how I added the option of changing the Title of the widget.  This was done following a post on Lonewolf Designs.

Previously I activated the widget using

<?php
add_action("plugins_loaded", "init_technixa");

function init_technixa() {
     register_sidebar_widget("Technixa", "technixa_widget");
}
?>

Now we also need to activate a control page on the widget by adding a line to make it

<?php

function init_technixa() {
    register_sidebar_widget("Technixa", "technixa_widget");
    register_widget_control('Technixa', 'technixa_widget_control');

}

?>

The extra line register_widget_control(’Technixa’, ‘technixa_widget_control’); registers the control panel which will be contained within the function called technixa_widget_control.

<?php
function technixa_widget_control() {

    $options = get_option("plugin_technixa_options"); 

    if ($_POST['technixa-Submit']) {
        $options['widget_title'] = htmlspecialchars($_POST['technixa-WidgetTitle']);
        update_option("plugin_technixa_options", $options);
    }

// html to show input box

?>

<p>
<label for="technixa-WidgetTitle">Widget Title: </label>
<input type="text" id="technixa-WidgetTitle" name="technixa-WidgetTitle" value="<?php echo $options['widget_title']; ?>" />

<input type="hidden" id="technixa-Submit"  name="technixa-Submit" value="1" />
</p>

<?php

}
?>

Here $options = get_option(”plugin_technixa_options”); will get any previously saved configuration options from the wordpress database.

Update option is what will store the content of $options in the wordpress database under plugin_technixa_options.  These saved options can be called upon using get_options.

For more on this try the following links

Create a Wordpress Widget From Scratch.

Writing a WordPress Plugin using PHP (PDF download from here)

Creating a Widget for Wordpress.

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.