Many of you have wonder about the making of WordPress widgets. It’s quite easy to do.

Of course, you need to have the PHP scripts of your application already coded and  preferably styled correctly.

Allow me to take the example of tizozote – Refer to: http://blog.fadil.fr/2009/08/20/making-a-simple-twitter-client-using-php-tizozote/

Knowing that the script which contains my main form is tizozote.php, I’ll re-code it to fit wordpress. The plugin will be called wptizozote and the script will be saved as wptizozote.php.

So, wptizozote.php will contain the following piece of codes.

*Adding the description*


<?php

/*

Plugin Name: WPtizozote

Plugin URI: http://blog.fadil.fr/2009/08/20/creating-a-wordpress-widget

Description: Ene ti widget pou zozote (tweet) online

Author: Fadil

Version: 1.0

Author URI: http://blog.fadil.fr

*/

Refer to tizozote.php – *adding the following*


function wptizozote_widget() {

require_once('functions.php');

if (isset($_POST['posted']) && $_POST['posted'] == 'yes') {

echo "

Message: ".$_POST['tweet']."

";

echo "Wee Messaze la fine zozoter!

";

tweet($_POST['twitter_username'],$_POST['twitter_password'],$_POST['tweet']);

} else {

echo "

Now, I add the form codes.


<form action='tizozote.php' method='post'>

<p><label for='twitter_username'>To nom ta zozo:</label>

<input type='text' name='twitter_username' id='twitter_username' /></p>

<p><label for='twitter_password'>Done to pass:</label>

<input type='password' name='twitter_password' id='twitter_password' /></p>

<p><label for='tweet'>Tape to zozote:</label>

<textarea name='tweet' id='tweet' maxlength='140'></textarea></p>

<input type='submit' value='Zozote'/>

<input type='hidden' name='posted' id='posted' value='yes' />

</form>

";

}

It’s not over yet.  I need to make the bloody thing appear in the widget section ready to be added to the WP sidebar.


function init_wptizozote(){

register_sidebar_widget("wptizozote", "wptizozote_widget");

}

add_action("plugins_loaded", "init_wptizozote");

?>

Done!

In case you do intend to write as above and use wptizozote.php, do copy functions.php and twitter.php to your root folder.

Copy wptizozote to wp-content/plugins. Go to your wordpress dashboard and plugins page to activate wptizozote plugin. Head to the widgets section and drag wptizozote to your sidebar. Tweak the bloody tizozote and have some fun.

Like I mentioned earlier, if you’ve the scripts to your application, turning it into a WP widget is not hard at all. Still find it hard? Go through tizozote.php and compare the codes to the above. The differences are self-explanatory.

:)

Share and Enjoy:
  • Print
  • Digg
  • del.icio.us
  • Facebook
  • Mixx
  • Google Bookmarks
  • Fark
  • FriendFeed
  • MySpace
  • Slashdot
  • Tumblr
  • Twitter
  • Yahoo! Buzz
  • blogmarks
  • Live
  • StumbleUpon
  • Suggest to Techmeme via Twitter
  • Technorati