Let’s say that you’ve in the process of writing a new e-book and you want to give the opportunity to your blog readers to submit their details in a form so they can receive a notification when the e-book is ready. You need a plugin. Ok, there are a few mailing list plugins out there that you can use quickly, but the point of this article is to show you how you can build such a plugin from scratch so you can modify it in any way you want, etc. You get the idea, so let’s start.

Have a look at the demo page (opens in a new tab). You can also download the tutorial’s source code.

First, make a new .php file, naming it whatever you want. I named mine “quickndirty.php” (like the one you downloaded). The first lines (the comments) are just for informative reasons (the info displayed in the “Plugins” section of your WordPress administration panel):

/*
Plugin Name: Quick'n'Dirty
Plugin URI: http://www.burnmind.com/howto/how-to-build-a-quick-n-dirty-wordpress-plugin
Version: v1.00
Author: <a href="http://www.burnmind.com/">burnmind.com</a>
Description: A Quick'n'Dirty WordPress plugin
 */

The whole plugin consists of one class, named “Qnd” (Quick’n'dirty). All the functions (unless stated so) are going to be included in this class. We declare 2 private variables, one to hold the database table name (make sure to use a unique name to avoid any conflicts with other tables) and one to hold an instance of wpdb:

if (!class_exists("qnd"))
{
    class Qnd
    {
        private $wpdb;
        private $qndTable;

        public function __construct ()
        {
            global $wpdb;
            $this->wpdb = $wpdb;
            $this->qndTable = $wpdb->prefix . "qnd";
        }
    }
}

The first function we are going to create is the one that will be executed when the plugin is activated and it’s going to be responsible to create the table into the database. The table is going to be created only if it is not present and it will not be deleted when the plugin is deactivated. The table consists of 4 (self-explanatory) fields:

        function createTable()
        {
            if($this->wpdb->get_var("show tables like '$this->qndTable'") != $this->qndTable)
            {
                $create =   "CREATE TABLE " . $this->qndTable . " (
                            id int(20) NOT NULL AUTO_INCREMENT,
                            name varchar(300) NOT NULL,
                            email varchar(300) NOT NULL,
                            location varchar(300) NOT NULL,
                            PRIMARY KEY (id)
                            ) ENGINE=MyISAM DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci AUTO_INCREMENT=1; ";

                require_once(ABSPATH . 'wp-admin/includes/upgrade.php');
                dbDelta($create);
            }
        }

Next is the controller function. It’s functionality is quite straightforward: If a POST request have been made try to insert the details into the database and if not, display the form:

        function controler()
        {
            if (isset($_POST['nameField']))
            {
                return $this->submitDetails();
            }
            else
            {
                return $this->displayForm(false);
            }
        }

We’ll first explore the displayForm function. It’s really just a simple form. The $error variable is used to check if there is an error and if there is to display a message.

function displayForm($error)
{
?>
<p>Please complete the form to send you the e-book when it's published.</p>

<?php if ($error) { ?>
<p style="color:#FF0000;"><strong>Please complete all the required fields!</strong></p>
<?php } ?>

<form method="post" action="<?php echo $_SERVER["REQUEST_URI"]; ?>">
<ul>
   <li>
      <label>Name:</label><br /> <input type="text" name="nameField" value="<?php echo $_POST['nameField'] ?>" /> (required)
   </li>
   <li>
      <label>E-mail:</label><br /> <input type="text" name="emailField" value="<?php echo $_POST['emailField'] ?>" /> (required)
   </li>
   <li>
      <label>Location:</label><br /> <input type="text" name="locationField" value="<?php echo $_POST['locationField'] ?>" />
   </li>
</ul>
<input type="submit" value="Submit" onclick="return validate()" />
</form>
<?php
}

submitDetails is the last function of Qnd class. First, it escapes the user’s input to prevent SQL injection. Then it checks if either the name or the e-mail fields are blank. If any of them is, it displays the form with an error message. Please note that in a proper implementation it’s recommended to use better error reporting, to check if the e-mail is valid, etc. Finally, if the required fields are there, it inserts the data into the database and displays a success message instead of the form.

        function submitDetails()
        {
            $name = $this->wpdb->escape($_POST['nameField']);
            $email = $this->wpdb->escape($_POST['emailField']);
            $location = $this->wpdb->escape($_POST['locationField']);

            if($name=='' || $email=='')
            {
		$this->insertForm(true);
            }
            else
            {
                $insert = "INSERT INTO $this->qndTable
                           (name, email, location)
                           VALUES ('$name', '$email', '$location')";

                $this->wpdb->query($insert);
                echo 'Your details have been submitted. Thank you!';
            }
        }

The plugin is almost ready. Place the following code outside of the Qnd class and you’re ready. The code creates an instance of the Qnd class, registers the shortcode “QUICKNDIRTY” to be used to call the plugin and sets the function createTable to be executed every time the plugin is activated from the WordPress administration panel.

if (class_exists("qnd"))
{
    $qnd = new Qnd();
}

if (isset($qnd))
{
    add_shortcode('QUICKNDIRTY', array( &$qnd, 'controler'));
    register_activation_hook(__FILE__, array(&$qnd, 'createTable'));
}

To use the plugin, place the .php file into your plugins folder, activate it in the administration panel, create (or edit) a post/page and insert the shortcode QUICKNDIRTY in brackets ([]).

Have a look at the demo page (opens in a new tab). You can also download the tutorial’s source code.

Recently, I had to use jQuery UI’s Autocomplete widget. Its use is straightforward when you have a static datasource. When the datasource is larger though (from a few thousand to several million records) and you need to feed the Autocomplete widget with a remote dataset (provided in the example by a php script which queries a database) this are becoming a bit more complex because the documentation is a little vague on the matter and it lacks of a proper example.

Have a look at the demo page (opens in a new tab). You can also download the tutorial’s source code.

We’re going to use a text field with the id “auto”:

<input type="text" id="auto" />

The JavaScript code is quite straightforward. Inside the document.ready function, we bind the Autocomplete widget to the text field with the id “auto”. As a source for the Autocomplete widget we specify the php script “search.php”. We also set the minimum length of characters (3) that the Autocomplete widget needs before it activates itself.

$(document).ready(function()
{
    $('#auto').autocomplete(
    {
        source: "search.php",
        minLength: 3
    });
});

The php script is where all the magic happens. The most important piece of information is that the Autocomplete widget sends the content of the text field to the php script via the GET method in a variable called “term”.

$mysqli = new mysqli('localhost', 'yourUserName', 'yourPassWord', 'yourDatabase');
$text = $mysqli->real_escape_string($_GET['term']);

$query = "SELECT name FROM bands WHERE name LIKE '%$text%' ORDER BY name ASC";
$result = $mysqli->query($query);
$json = '[';
$first = true;
while($row = $result->fetch_assoc())
{
    if (!$first) { $json .=  ','; } else { $first = false; }
    $json .= '{"value":"'.$row['name'].'"}';
}
$json .= ']';
echo $json;

The above script will connect to the database, perform a query based on the term written by the user in the text field and will echo the results (to be used by the Autocomplete widget) in the following JSON format: [{"value":"Nirvana"},{"value":"Pink Floyd"}].

If you haven’t done it already, have a look at the demo page (opens in a new tab). You can also download the tutorial’s source code.

Hello! A couple of months ago I was in need of a script that figures out the location of the visitors of a website (using their IP) and displays a “hello” in their own language. After building this script I wrapped it up as a WordPress plugin under the name “hello in all languages”.

Hello in all languages is a free WordPress plugin that displays a “hello” word translated to the official language of the country the visitor’s IP belongs to. You can find more information on its official page and you can download it from WordPress Plugin Directory.

If you try it, I would be happy to receive your feedback. I hope you enjoy it!

I’ll explain a simple way to create an automatic image rotator using jQuery. First have a look at the demo page (opens in a new tab) to understand what we’re trying to accomplish. You can also download the tutorial’s source code.

In the example, the initial image will be displayed on the left of a paragraph containing some sample text:

<div id="test">
  <img id="myImage" src="test1.png" alt="image test" />
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
</div>

First, we have to store the filenames of our images in an array. We also have to initialise a counter.

var images = new Array ('test1.png', 'test2.png', 'test3.png');
var index = 1;

The next step is to create the function which will rotate the images. We’ll call it rotateImage(). At the beginning, the currently displayed image fades out. Then, we load the next image from the images array (the counter we introduced before is being used here) and we fade it in. At the end of the function, we deal with the counter (either increment it, or reset it if all the imaged were displayed).

function rotateImage()
{
  $('#myImage').fadeOut('fast', function()
  {
    $(this).attr('src', images[index]);

    $(this).fadeIn('fast', function()
    {
      if (index == images.length-1)
      {
        index = 0;
      }
      else
      {
        index++;
      }
    });
  });
}

The last step is to call the rotateImage function repeatedly inside the $(document).ready function using setInterval. In the example, the function rotateImage() is being executed every 2.5 seconds (2500 milliseconds).

$(document).ready(function()
{
  setInterval (rotateImage, 2500);
});

The complete JavaScript code:

var images = new Array ('test1.png', 'test2.png', 'test3.png');
var index = 1;

function rotateImage()
{
  $('#myImage').fadeOut('fast', function()
  {
    $(this).attr('src', images[index]);

    $(this).fadeIn('fast', function()
    {
      if (index == images.length-1)
      {
        index = 0;
      }
      else
      {
        index++;
      }
    });
  });
} 

$(document).ready(function()
{
  setInterval (rotateImage, 2500);
});

HTML:

<div id="test">
  <img id="myImage" src="test1.png" alt="image test" />
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
</div>

If you haven’t done it already, have a look at the demo page (opens in a new tab). You can also download the tutorial’s source code.

As far as I can remember in my life, like every music lover does, I’m relating specific songs or sometimes whole albums with events, places, emotions etc. Even working on a project is not an exception.

Recently, it came into my attention that in every project I’m working on, there are two albums that are always part of my playlist, so they can qualify to be called my projects’ soundtrack. On certain times in a project, especially when a lot of mental engergy and even fantasy is required, I find myself listening to those two albums because their music inspires me and provides me with a rhythm that helps me think without distracting me at all.

The fist one is from a Greek songwriter called Konstantinos Vita and it’s the music composed for Dimitris Papaioannou’s (the art director of the Athens 2004 Olympic Ceremony) theatrical production called “2″. Below is the video of his song called “Funky Beep”.

www.youtube.com/watch?v=QGfN6bdFauc

The other one is Moby‘s famous album called “Play”. Below is the video of his song called “Natural Blues”.

www.youtube.com/watch?v=wGxA6-dGOmc

What do you prefer to listen while working?

Machinarium is a point and click adventure game which brought me back to the good old days of such games. You control a small and cute (this is my feminine side speaking) robot through its journey to find its lost beloved one in a cruel robot world!

It has beautiful hand-made style graphics (as you can see on the screenshots) and the robot world is designed almost as I would have imagined it. Its music is a great company to the graphics. Note that when you buy the game you also receive its soundtrack in MP3 format! There is a lack of speech, but the communication is being done well using speech bubbles which explains everything clearly. After all, in a robot world English (or any other human language) can’t be an option!

It incorporates a large number of puzzles, in a great variety, from simple games (e.g. a large tic-tac-toe variation and an arcade asteroids game) to more complicated puzzles. Some of them are hard enough even for an experienced adventure games player (maybe due to the lack of explanation) but everything is solvable with some attention and patience.

After successfully using an item, it is disposed so the inventory isn’t full with unusable items (actually when I finished the game, I had 2 items left in my inventory but it wasn’t annoying at all).

But enough with the praise, let’s talk for the bad stuff: It’s a little bit annoying that you cannot just deselect an item in use and instead you have to return it to the inventory. Also, it might become boring at some point to have to watch the full animation of the robot walking up the stairs to go to another floor etc.

The only actual downfall of the game is the use of Flash as the development platform. Right-click does nothing (actually it displays the frustrating Flash player menu) when it could be used for example to deselect an item of the inventory (if another development platform was used since Flash doesn’t support right-click functionality as far as I’m aware). Also, the point-and-click system isn’t as precise as someone would expect it to be, so you might find yourself at some point clicking in the wrong place and making a wrong move.

But these facts couldn’t prevent even a huge Flash hater like myself to play and enjoy this amazing game! Before I forget, you cannot die in the game, so feel free to explore and try anything that you can think!

You can download the demo and/or buy the full game from its official website. Also, since you’re clearly interested in games I would suggest that you visit zuckr.com, where you can find news and reviews for the best free online games!

After my first collection of useful android applications, here’s another one:

AK Notepad: Set a reminder based on your note, share note with others through SMS, email & stick a note on your home screen. You can customize the note’s appearance, organize by label(hash tags),sort & search notes.

Astrid Task/Todo List: Astrid is the highly-acclaimed open-source task list that is simple enough to not get in your way, powerful enough to help you get stuff done! Tags, reminders, RememberTheMilk sync, Locale plug-in & more!

mAnalytics: Is a program to view your basic Google Analytics stats on your Android phone. Supports multiple accounts, profiles, basic statistics and charts for visits and pageviews.

eBuddy IM: One of the best instant messaging apps. Fast and reliable messenger. Chat with multiple MSN, Facebook, Yahoo, AIM, ICQ, GTalk & MySpace accounts. All IM friends in one buddy list. Run in background. Messages sent as data, not SMS/Text.

twidroid for twitter: Twidroid is the leading full-featured Twitter client for Android.

Dolphin Browser (Social&Smart): Dolphin Browser gives you a better Mobile Internet experience. Gestures, Sync Google bookmarks, Download youtube videos.

Flashlight: Grow small plants in your pocket. Build a new Pharos of Alexandria. Interrogate suspects. Find your keys. The only limit is your imagination! This app maximizes brightness and keeps the screen on while in use. Look elsewhere if you want colors, streamers, and wacky sounds… This is a flashlight.

Some of the applications listed here have also a paid version, but this post refers only to their free versions.

Do you have a favorite android application? Feel free to share it by leaving a comment!

The “404″ or “Not Found” error message is an HTTP standard response code indicating that the client was able to communicate with the server but the server could not find what was requested (read more about the HTTP 404 error).

The motivation towards a custom 404 error page is to create a more (visually) appealing, usable and user-friendly page than the default (and dull) 404 error page of your Web server. The main reason to do it is to give the option to a user that landed on the error page to stick to the website. There’s nothing new about it but a lot of Web developers overlook or underestimate it.

There is a number of elements you can use in a custom 404 page:

• First, an image or some text to explain to the user what happened. If the website’s visitors don’t have a technical background, a “404 error” message won’t explain anything to them, so try to explain it without any technical details. You can also have a humorous message or image. After all, an amused visitor is always better than a frustrated one!
• A must have, is a link to the homepage so the user can have an alternative of closing the browser or re-typing a URL.
• Another good idea is to include a search box.
• You can also provide some links to popular or interesting content of your website.

Below is the image I’m using for my 404 error page:

Finally, some resources (external links) for 404 error pages:

• The Perfect 404 (@ A List Apart)
• 404 Error Pages, One More Time (@ Smashing Magazine)
• 50 Creative and Inspiring 404 Pages (@ Webdesigner Depot)

Of course, the web is full of creative and innovative 404 error pages. Feel free to post a link to your own!

In order to complete this tutorial you will need to apply for a flickr API key. You will also need to download a copy of phpFlickr API Kit. The use of an API Kit makes the use of flickr’s API methods easier. You can also view the demo page of the tutorial (opens in a new tab).

Let’s begin. First, we need to include the phpFlickr main file and then create a new phpFlickr object which is stored in the $phpFlickrObj variable. Make sure you enter the correct path (where you extracted the phpFlickr files) and also enter your flickr API key.

require_once("phpFlickr/phpFlickr.php");
$phpFlickrObj = new phpFlickr('Your_Flickr_API_Key');

The next step is to obtain your NSID by using your flickr username (in the example I’m using my flickr username), which is stored in the $user variable. Using this NSID, we get the url to the specific user’s photos and we store it in the $user_url variable. Finally, we get an array ($photos) containing all the relevant information (id, title, etc.) of the last four (if you want to change the number of photos, just change the number) photos appearing in the user’s photostream.

$user = $phpFlickrObj->people_findByUsername('stathisg');
$user_url = $phpFlickrObj->urls_getUserPhotos($user['id']);
$photos = $phpFlickrObj->people_getPublicPhotos($user['id'], NULL, NULL, 4);

In this example we use only the id and the title of each photo. If you want to view all the information contained in the array, you can use print_r($photos).

The final step to display the photos, is to convert the multidimensional array into an array of one dimension and use a loop to display everything. The following code, displays the photos. The photos can be displayed in six different sizes. To change the size, you need to alter the “square” value. The available sizes are: square, thumbnail, small, medium, large and original.

foreach ($photos['photos']['photo'] as $photo)
{
  echo '<a href="'.$user_url.$photo['id'].'" title="'.$photo['title'].' (on Flickr)" target="_blank">';
  echo '<img alt="'.$photo['title'].'" src="'.$phpFlickrObj->buildPhotoURL($photo, "square").'" />';
  echo '</a>';
}

The complete code is diplayed below. You can also view the demo page of the tutorial (opens in a new tab).

require_once("phpFlickr/phpFlickr.php");
$phpFlickrObj = new phpFlickr('46dea5f6abb12aed7a823adb7ecf5816');

$user = $phpFlickrObj->people_findByUsername('stathisg');
$user_url = $phpFlickrObj->urls_getUserPhotos($user['id']);
$photos = $phpFlickrObj->people_getPublicPhotos($user['id'], NULL, NULL, 4);

foreach ($photos['photos']['photo'] as $photo)
{
  echo '<a href="'.$user_url.$photo['id'].'" title="'.$photo['title'].' (on Flickr)" target="_blank">';
  echo '<img alt="'.$photo['title'].'" src="'.$phpFlickrObj->buildPhotoURL($photo, "square").'" />';
  echo '</a>';
}

Recently, I acquired an android Smartphone and while browsing in several android forums and the android market, I discovered the following useful applications:

Gmote: An amazing application that turns Android into a remote control for a computer, allowing users to run movies and music at a distance. It supports all of the standard remote control features such as play, pause, rewind, volume controls etc. It also has a built-in file browser that lets you select what to play.

TasKiller free: Let you close (kill) any running application in one click.

BatteryLife: Displays the percent of the remaining battery.

Power manager: Adds new power settings to the phone (e.g. how long the screen is on during a call, if device stays on while the keyboard is open, etc.) and allows you to quickly view and change other phone settings depending on different conditions (e.g. low battery).

Quick Uninstaller: Uninstalls applications from the phone using a desktop-style view. The uninstall is performed by only two clicks.

Any Cut: Allows you to create Home shortcuts to anything! Popular shortcuts like directly calling a phone number or sending an SMS are supported.

Some of the applications listed here have also a paid version, but this post refers only to their free versions.