I have covered the basics of that here in my tutorial series How to create WordPress plugins

so lets get going with the widget…

after you have created the file for your plugin/widget and the necessary details for it to be activated, add the following code…

function widget_content(){
$sdstr = “this is where your widget code goes.”;
return $sdstr;
}

function cc_widget($args) {
extract($args);
echo $before_widget;
echo $before_title;
echo “YOUR WIDGET TITLE”;
echo $after_title;
echo widget_content();
echo $after_widget;
}

function cc_widget_init()
{
register_sidebar_widget(__(‘YOUR WIDGET NAME’), ‘cc_widget’);
}

add_action(“plugins_loaded”, “cc_widget_init”);

activate your plugin/widget and add it to your sidebar throught the admin dashboard->appearance->widgets then of you go…

The Hawud Currency converter widget is a good widget to add if you have an online shop on your wordpress website. This will help your international clients decide on their purchase as they will be able to check how much it would cost them on their local currency.

The widget utilizes jquery for loading up the results so your users will not be redirected to another page/ have their page reloaded. This is for the ease of using the widget while browsing your products.

Check on the sidebar of this page to view a live demo of the widget.

INSTALLATION

1. Download the package. click here.

2. login to your wordpress admin dashboard.

3. go to Plugins->Add New

4. on the Install Plugins page select “upload”. then browse for the currency converter widget package and click “Install”. Let wordpress do its thing and then click “Activate”

To show the widget on your sidebar

5.  go to Appearance->Widgets.

6. the widget will already be listed on the available widget and you could now click “Add” to add the widget to the sidebar(or others depending on your site’s theme) of your site.

Developer’s Notes:

-  This is my first version of the plugin/widget.

-  I plan on extending the code to have a shortcode if in anycase you would want to show the converter form on the content area.

-  You are very much welcome to suggest enhancements to the features of the widget.

first let us create our database table. this will be the table holding the data that will be saved from the form that we will be creating.

execute the following Mysql command on your wordpress database to create the table.

CREATE TABLE IF NOT EXISTS `wp_contactf` (
  `contactid` bigint(10) NOT NULL AUTO_INCREMENT,
  `c_name` char(40) NOT NULL,
  `c_email` varchar(40) NOT NULL,
  `c_message` text NOT NULL,
  PRIMARY KEY (`contactid`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1 AUTO_INCREMENT=1 ;

take note that the prefix wp_ on the table name wp_contactf may vary depending on your wordpress installation. apply the prefix accordingly.

after the database table creation, create a directory on your wp-content/plugins named contactform and inside it contactform.php

on your contactform.php put in this code as our starter file.

<?php
/*
Plugin Name: Sample contactform
Plugin URI: http://www.ombing.com
Description: sample of a simple contact form
Author: your name
Version: 1.0
Author URI: http://www.ombing.com/
*/

function contactform($content=”){

}

add_filter(‘the_content’, ‘contactform’);

?>

let us assign a short code for showing the contact form. “show_contact_form”.

and modify the contactform function as follows:

function contactform($content=”){
     $shortcode=”show_contact_form”;

     if(!preg_match(‘|['.$shortcode.']|’, $content)) {  
           return $content;
     }#preg_match

     $sdstr = “”;
     if(strstr($content, “[".$shortcode."]“)) {
           $sdstr .= ccf_show_contactform();
           $content = str_replace(‘['.$shortcode.']‘, $sdstr, $content);
     }#if shortcode

     return $content; 
}#contact form

what we did here was we specified a shortcode to show our form “show_contact_form” and if that shortcode exists on the content call up a function ccf_show_contactform() with the following line:

$sdstr .= ccf_show_contactform();

needless to say lets create that function… and put in an html code to show the form.

function ccf_show_contactform(){
$sdstr =’
    <form cellpadding=”2″ cellspacing=”2″ method=”post”>
    <p>
    <label Name:</label><BR>
    <input type=”text” name=”c_name” id=”c_name” size=40>    </p>

    <p>
    <label>Email:</label><BR>
    <input type=”text” name=”c_email” id=”c_email” size=40>   </p>
    <p>
    <label>Message:</label><BR>
    <textarea name=”c_message” id=”c_message” cols=40 style=”vertical-scroll=yes;”></textarea>    </p>

    <p>
    <input type=”hidden” name=”isposted” id=”isposted” value=”1″>
    <input type=”submit” name=”submit” id=”submit” value=”Save Message”>     </p>

    </form>
    ’;
    return $sdstr;

}#function ccf_show_contactform

now, have your plugin activated and add the [show_contact_form] shortcode. on one of your pages then navigate to that page to view what we have done so far.

now let us work on the function that would be saving our form data to the database. let us create a function named ccf_save_data();

function ccf_save_data($postdata){
    $sdstr = “”;
    global $wpdb;
    $tblname=$wpdb->prefix.”contactf”;
    $rows_affected = $wpdb->insert( $tblname, array( ‘c_name’ => $post['c_name'], ‘c_email’ => $post['c_email'], ‘c_message’ => $post['c_message']);
    if($rows_affected > 0){
        $sdstr .= “Your message was successfully recorded.”;    
    }#rows affected
    return $sdstr;
}#function ccf_save_data

$wpdb is the global wordpress database class that handles the interface between the site and its database.. to read more about it click here.

and add the following code on our contactform function below the $sdstr .= ccf_show_contactform(); line.

       if(isset($_POST["isposted"]) && $_POST["isposted"]==1){
             $sdstr .= ccf_save_data($_POST);
        }

test out your code. you would be able to have your data saved now to your database. To check your data use whatever mysql client(like phpmyadmin) that you like.

I do not think anyone could actually get lost on its admin dashboard cause that is also relatively simple.

Creating plugins for wordpress is also simple. That fact contributes greatly on the very rich library on wordpress plugins.

So, without complicating things, lets start creating our “Hello World” plugin.

First, you should have installed your wordpress on your localhost or your server. for a guide on how to install wordpress click here.

if you have not yet noticed, plugins installed are located on wp-content/plugins

though it is not necessary to put your plugin code file into a directory, it goes with out saying that it is recommended to do so.

so go on and create a directory under the wp-content/plugins and name it as hello_world

then lets create a php file on our hello_world directory and name it helloworld.php

so, you will now have wp-content/plugins/hello_world/helloworld.php

open up your helloworld.php using your preferred editor and insert the text below.

<?php

/*
Plugin Name: Hello World
Plugin URI: http://www.ombing.com/hello-world
Description: My Hello World Plugin
Author: Norbert Christian L. Feria
Version: 1.0
Author URI: http://www.ombing.com
*/

?>

of course, you could change the values of their but maintain the fields.

right after that, we will create a function that will serve as the main function to handle our plugin on the front-end.

<?php

function helloworld(content=”){

 $shortcode=”show_helloworld”;

if(!preg_match(‘|['.$shortcode.']|’, $content)){

return content;

}#if not preg_match

if(strstr($content, “[".$shortcode."]“)) {

$content =  “hello world!”;

return $content;

}#if strstr

}#function

?>

what just happened!?! well, we created a function that would identify if our predefined shortcode is in the content.. and if so, then we will show the “hello world!” on the content.

so we have the plugin file, and we have the function to handle it.. but when and how will wordpress know when to use the plugin?

for that we need to use actions or filters… in a nutshell, these are called by wordpress whenever there are activity on the site…

so, let us add the code below right after the function

<?php

add_filter(‘the_content’, ‘helloworld’);

?>

there you go, your helloworld.php is done and your plugin is ready… but before that let us first activate the plugin.. go to your wordpress admin dashboard and click on plugins->installed plugins look for the hello world plugin and click “Activate” right below the plugin name.

now that our plugin is activated, create a post or a page and on the content textarea put in the shortcode that we have specified [show_helloworld] then your done. congratulations.. when you navigate to the page or post that you have created the hello world! text will show up.

How to create WordPress plugins Part 2: Working with data and Forms

How to create WordPress plugins Part 3: Creating Admin Options

The other day I was installing a theme for one of our wordpress sites and I got the following email from our host ….

”
Dear customer,

This is a courtesy notice that we have found and corrected exploitable timthumb.php file(s) on your _____.com account, which are listed below. While we have corrected these files, we do recommend you ensure all potential exploits are corrected on your account. This is best done by updating all scripts, plugins, modules and themes on your account to the latest version…….

The timthumb.php file is a script commonly used in WordPress’s (and other software’s) themes and plugins to resize images. The exploit allows an attacker to arbitrarily upload and create files and/or folders on your account, which can then be used for a number of malicious tasks, including but not limited to defacement, browser high-jacking and infection, data harvesting and more. After a site has been exploited, it may lead to becoming labeled a “Malicious Website” by Google or other security authorities.Any timthumb.php file below version 1.35, but above version 1.09 is considered vulnerable, unless patched. To prevent being compromised, we advise you update all instances of timthumb.php to version 2.0, or patch the existing vulnerable files. Note that patching the files requires more in-depth knowledge of the PHP scripting language.

The updated version of timthumb.php can be found here:

http://timthumb.googlecode.com/svn/trunk/timthumb.php

Additional information regarding the compromise can be found at the following two websites, as well as others; ….

http://markmaunder.com/2011/08/01/zero-day-vulnerability-in-many-wordpress-themes/

http://redleg-redleg.blogspot.com/2011/08/malware-hosted-newportalsecom.html
“

You actually just have to update your timthumb.php file by replacing it with the one from the link provided above

This must have been an old vulnerability but for those who have downloaded WordPress themes that were using the problematic version, then this article could most certainly help them with their security as did mine.

timthumb.php script is a very great php script and I like using it. Used it to most sites(if not all) I helped create. For more detailed information about the script visit the project’s website at

http://www.binarymoon.co.uk/projects/timthumb/

In this tutorial series you will be able to learn how to create WordPress plugins from the very start of every programming learning the “Hello world” up to the creation of Administration options for your plugin.

This is not the only article about creating wordpress plugins that is for sure, but this is how I learned how to do it as a noob.

So, With out further delay here are the links for the tutorial series:


How to create WordPress plugins Part 1: Hello World

How to create WordPress plugins Part 2: Working with data and Forms

How to create WordPress plugins Part 3: Creating Admin Options

Read up and I would be very happy to read additional inputs you may have for the series..

1. first download the latest version of xampp which is 1.7.3a (at the time that i wrote this tut)

here is the link.

2. from where you have downloaded the package execute this on the terminal

$ sudo tar xvfz xampp-linux-1.7.3a.tar.gz -C /opt

when the execution of the above script is done, you now have an installed xampp and to start enter this on the terminal

$ sudo /opt/lampp/lampp start

note: to stop the lamp

$ /opt/lampp/lampp stop

now, as mentioned lampp is already installed for you. but there several things that we need to do to ensure that everything is working.

by default, the web root directory is /opt/lampp/htdocs

and at first you would not be able to create files on this directory. run this command on the terminal while your on /opt/lampp

ls -l

and you will be able to see that the user associated with the htdocs directory is not the user that you are currently using.
to “own” the directory enter this command:

/opt/lampp# chown -R yourusername:yourusername htdocs

then, edit the httpd.conf so you could add your username:

sudo gedit /opt/lampp/etc/httpd.conf

look for the following lines:

User nobody
Group nogroup
</IfModule>
</IfModule>

and change them to :

User yourusername
Group nogroup
</IfModule>
</IfModule>

we should also “own” the config.inc.php of the phpmyadmin that goes with the installer. to do this

cd /opt/lampp/phpmyadmin
chown yourusername:yourusername config.inc.php

now, restart your lampp

$ sudo /opt/lampp/lampp restart

and now your ready to go on your way….

Just a warning your lampp installation is not fully secured yet

The MySQL administrator (root) has no password.

• The MySQL daemon is accessible via network.
• ProFTPD uses the password “lampp” for user “nobody”.
• PhpMyAdmin is accessible via network.
• Examples are accessible via network.

to fully secure your installation: run the following command and follow on screen instructions

/opt/lampp/lampp security

now, your of to go. I hope I had helped someone up. ^^

<table border=”0″ cellpadding=”2″ cellspacing=”2″>
<?php
while($result = mysql_fetch_array($query))
{
?>
<tr>
<td><?php echo $result["name"];?></td>
<td><?php echo $result["address"];?></td>
</tr>
<?php } ?>
</table>

With the example above the backend programming with php is mixed up with the html tags which are used to present the data. The problem with this when working in a team is that the backend programmer will have to deal with the presentation layer while doing his job and when the design has to be changed or modified the designer will have to deal with the backend side thus forfeiting the idea of having a design focused developer and a backend focused programmer. This will result to have the two to compromise in order for their work to be harmonious.

In an effort to find solution for this hurdle, I tried to develop a sensible templating system that would separate the html front end from the php files. I was however stopped when I discovered the PEAR ITX Templating system. Unlike other templating systems that are beefed up with so many features that as a programmer I have no intention of using, the ITX templating system is as simple as it can be.

To start of with PEAR ITX templating system you need to have PEAR installed with your php. For info on how to do this, visit http://www.php.net.

You could also include these files to your code”
IT.PHP
IT_ERROR.PHP
ITX.PHP

Let us start with the html side”. Create a html file named index.html

<html>
<head><title>IT TEMPLATE SAMPLE</title></head>
<body>
{var_message}
</body>
</html>

* note that we inserted a token inside the body. a token is inclosed with the { } brackets. In this example we have the var_message token.

Now let us move on to the php file. Create a php file and name it as index.php.

<?php
include(“IT.php”);

$tpl = new HTML_Template_IT(“./”);
$tpl->loadTemplatefile(“index.html”);

$tpl->setVariable(“var_message “,”Hello World”);

$tpl->show();
?>

What we did here was
1. first we included IT.PHP
2. Then we initiated the template object and named it as $tpl.
$tpl = new HTML_Template_IT(“./”);
the argument for the HTML_Template_IT is “./” which means the current directory” you could put your html files on a different location and would just have to specify through this argument the location of the html file.
3. after which we loaded the Template file which is the html file we created a while ago.
$tpl->loadTemplatefile(“index.html”);
4. we then replaced the token on the template file with our desired content.
$tpl->setVariable(“var_message “,”Hello World”);
5. Lastly, we parsed the tpl object.
$tpl->show();

There you have it. when you point your browser to index.php it will display Hello World. This is the basic way of using the ITX system. ITX system also enables you to process tokens by blocks which will let you show data on a tabular format.

Let me take you back to this.

<table border=”0″ cellpadding=”2″ cellspacing=”2″>
<?php
<while $result = mysql_fetch_array($query)>
{
?>
<tr>
<td><?php echo $result["name"];?></td>
<td><?php echo $result["address"];?></td>
</tr>
<?php } ?>
</table>

let us modify this by elimating the php code and inserting tokens and a block

<table border=”0″ cellpadding=”2″ cellspacing=”2″>
<!– BEGIN row –>
<tr>
<td></td>
<td></td>
</tr>
<!– END row –>
</table>

now to process this on the php side,

while($result = mysql_fetch_array($query))
{
$tpl->setCurrentBlock(“row”);
$tpl->setVariable(“var_name”,$result["name"]);
$tpl->setVariable(“var_address”,$result["address"]);
$tpl->parseCurrentBlock(“row”);
}

That is how simple it is to process tabular data through ITX. You just have to set the template directory and the load the template file as we did a while ago then

set the current block
$tpl->setCurrentBlock(“row”);
replace the tokens inside that block with your desired output.
$tpl->setVariable(“var_name”,$result["name"]);
$tpl->setVariable(“var_address”,$result["address"]);
then parse the current block
$tpl->parseCurrentBlock(“row”);
you will just have to parse the entire template with
$tpl->show();
and your good to go!

As you can see clearly, with the PEAR ITX Templating system the presentation layer(html) is separated with the backend php file. This will enable your designer to design the page at will and the programmer to do his thing uninterrupted with the design hurdle. This website uses PEAR ITX TEMPLATING SYSTEM.