When I  rewrote my WP-DenyHost plugin, I wanted to do it as fast as possible. Instead of reinventing the wheel (again), I googled after a plugin template and found a very good one at Pressography. It had most of what I needed in a plugin template.

Modifications to the Pressography plugin template

I’ve made some changes to the Pressography plugin template and I have explained them below. Before you continue to read this article, you should view the video at Pressography, it presents the idea behind the plugin template and how it works. You get the full source of my modified plugin template by using my WordPress Plugin Template Creator

Being able to use new functionality in WordPress, I’ve decided that my plugins will only support WordPress one minor version lower than the current i.e. the current is 2.9 and hence my plugins and this plugin template will only supports WordPress 2.8 and later.

plugins_url()

WordPress 2.8 extended the plugins_url() function which makes it easy to find the plugin location. In the plugin template constructor, I use plugins_url() to find the languages files and the plugin itself:

function __construct(){
	//Language Setup
	$locale = get_locale();
	$mo = plugins_url("/languages/" . $this->localizationDomain . "-".$locale.".mo", __FILE__);
	load_textdomain($this->localizationDomain, $mo);

	//"Constants" setup
	$this->url = plugins_url(basename(__FILE__), __FILE__);
	$this->urlpath = plugins_url('', __FILE__);

	//Initialize the options
	$this->getOptions();

	//Actions
	add_action("admin_menu", array(&$this,"admin_menu_link"));
	add_action('wp_print_scripts', array(&$this,'{plugin_slug}_script'));
	add_action("init", array(&$this,"{plugin_slug}_init"));
}

Adding JavaScript

I’ve done it and I still see plugin authors adding scripts using the wp_head function. There’s only one correct way of adding scripts, and that’s using wp_enqueue_script via one of the script hooks (admin_print_scripts, wp_print_scripts etc). wp_enqueue_script makes sure that the script loads in the correct order and that a script is only loaded once (e.g. If another plugin has already loaded jQuery, my plugin will not load jQuery, but use the script already loaded).

I’ve added the wp_print_scripts hook to the plugin template (see the constructor above)  since it’s the generic load-script-hook. The wp_print_scripts hook adds the  {plugin_slug}_script function in which  I enqueue the scripts:

function {plugin_slug}_script() {
	if (is_admin()){ // Only run when in wp-admin. Other conditional tags at http://codex.wordpress.org/Conditional_Tags
		wp_enqueue_script('jquery'); // other scripts included with Wordpress: http://tinyurl.com/y875age
		wp_enqueue_script('jquery-validate', 'http://ajax.microsoft.com/ajax/jquery.validate/1.6/jquery.validate.min.js', array('jquery'));
		wp_enqueue_script('{plugin_slug}_script', $this->url.'?{plugin_slug}_javascript', array('jquery-validate')); // load embedded javascript
		wp_localize_script( '{plugin_slug}_script', '{plugin_slug}_lang', array(
			'required' => __('Please enter a number.', $this->localizationDomain),
			'number'   => __('Please enter a number.', $this->localizationDomain),
			'min'	   => __('Please enter a value greater than or equal to 1.', $this->localizationDomain),
		));
	}
}

wp_localize_script, in the code above, creates a JavaScript object that passes the language strings to the embedded JavaScript:

<script type='text/javascript'>
/* CDATA[ */
var {plugin_slug}_lang = {
	required: "Please enter a number.",
	number: "Please enter a number.",
	min: "Please enter a value greater than or equal to 1."
};
/* ]]> */
</script>

Embedding JavaScript

When I write my plugins I like to keep the code in one file, that’s why I also embed the JavaScript code:

if (isset($_GET['{plugin_slug}_javascript'])) {

	Header("content-type: application/x-javascript");
	echo<<<ENDJS
/**
* @desc {Full Plugin Name}
* @author {Author} - {URL}
*/

jQuery(document).ready(function(){
	jQuery("#{plugin_slug}_options").validate({
		rules: {
			{plugin_slug}_option1: {
				required: true,
				number: true,
				min: 1
			}
		},
		messages: {
			{plugin_slug}_option1: {
				// the {plugin_slug}_lang object is define using wp_localize_script() in function {plugin_slug}_script()
				required: {plugin_slug}_lang.required,
				number: {plugin_slug}_lang.number,
				min: {plugin_slug}_lang.min
			}
		}
	});
});

ENDJS;
}

Note: If you prefer to keep your JavaScript code in a separate file, you can add it by adding the following to {plugin_slug}_script:

function {plugin_slug}_script() {
	if (is_admin()){ // Only run when in wp-admin. Other conditional tags at http://codex.wordpress.org/Conditional_Tags
		wp_enqueue_script('jquery'); // other scripts included with Wordpress: http://tinyurl.com/y875age
		wp_enqueue_script('jquery-validate', 'http://ajax.microsoft.com/ajax/jquery.validate/1.6/jquery.validate.min.js', array('jquery'));
		wp_enqueue_script('{plugin_slug}_script', $this->urlpath.'/myscript.js', array('jquery)); //load your script
		wp_localize_script( '{plugin_slug}_script', '{plugin_slug}_lang', array(
			'required' => __('Please enter a number.', $this->localizationDomain),
			'number'   => __('Please enter a number.', $this->localizationDomain),
			'min'	   => __('Please enter a value greater than or equal to 1.', $this->localizationDomain),
		));
	}
}

WordPress Plugin Template Creator

While writing this article, I decided to create a tool that will create a personalized plugin template. The WordPress Plugin Template Creator takes your input, creates the necessary slugs and returns a personalized plugin template you can build your own plugin with.

Curious? 4GuysFromRolla has a nice article about .LESS

btw, if you’re not doing ASP.NET, you can create css from .less by using the command line compiler:

dotless.Compiler.exe -m Styles.less Styles.css

1, Modify your existing form page

1. Add <input type="hidden" name="isAjax" id="isAjax" value="0" /> to your form. This field will tell the processing script, process_input.php in my example, if the values in the form were submitted using ajax or as an ordinary form submit, defaulting to isAjax = 0 (false).
2. Add class="required" to the fields that requires input
3. Add the <div id="result"></div> where you want the ajax output

<form id="form1" name="form1" method="post" action="process_input.php">
	<input type="hidden" name="isAjax" id="isAjax" value="0" />
	Name: <input type="text" name="name" class="required" id="name" value="" /> <br />
	<input type="submit" name="submit" id="submit" value="submit" />
</form>
<div id="result"></div>

2, update your process_input.php code

The process_input.php, uses the value in isAjax to decide how output is displayed

<?php
if ($_POST['isAjax']) {
	// out will be return, using ajax, to the calling form page
	echo "Hello " . $_POST['name'];
} else {
	// no javascript, this page will do the output
	echo "<h1>Welcome</h1>";
	echo $_POST['name'];
}
?>

3, Add the jQuery code

<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.js"></script>
<script type="text/javascript" src="http://github.com/malsup/form/raw/master/jquery.form.js?v2.38"></script>
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery.validate/1.6/jquery.validate.min.js"></script>

<script type="text/javascript">
jQuery(document).ready(function(){        // wait until the page is loaded before executing the jQuery code
    var v = $("#form1").validate({        // enable form validation
        submitHandler: function(form) {
            $("#isAjax").val(1),          // set the hidden input isAjax to 1 (true)
                $(form).ajaxSubmit({      // submit the form using ajax
                    target: "#result"     // put output from process_input.php into <div id="result"></div>
                });
        }
    });
});
</script>

Here’s the complete form page

<head>
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.js"></script>
<script type="text/javascript" src="http://github.com/malsup/form/raw/master/jquery.form.js?v2.38"></script>
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery.validate/1.6/jquery.validate.min.js"></script>

<script type="text/javascript">
jQuery(document).ready(function(){
	var v = $("#form1").validate({
		submitHandler: function(form) {
			$("#isAjax").val(1),
			$(form).ajaxSubmit({
				target: "#result"
			});
		}
	});
});
</script>
</head>
<body>
<form id="form1" name="form1" method="post" action="process_input.php">
	<input type="hidden" name="isAjax" id="isAjax" value="0" />
	Name: <input type="text" name="name" class="required" id="name" value="" /> <br />
	<input type="submit" name="submit" id="submit" value="submit" />
</form>
<div id="result"></div>
</body>

I use the Akismet and WP-DenyHost anti-spam plugins for WordPress. Akismet is a must-have and has, since I installed it, caught 304,056 spams (!!).  When Akismet catch a spammer, it logs the spammers IP address. WP-DenyHost, written by me, prevents spammers from getting access to my site a second time by blocking access from this IP address.

I installed WP-DenyHost in the fall 2009 and, as you can see from the graph above, the number of spam has dropped dramatically.

.

Click here to view the embedded video.

Earlier WordPress.org has release their WordPress for iPhone and WordPress for Blackberry, today they released WordPress for Android

You’ll find WordPress for Android in the Android Market. If you are visiting my site from an Android device, you can download it here

It has a lot of new features and enhancements like the examples below:

jQuery("<div>", {
    "class": "test",
    text: "Click me!",
    click: function(){
        $(this).toggleClass("test");
    }
}).appendTo("body");

jQuery("<input>", {
    type: "text",
    val: "Test",
    focusin: function() {
        $(this).addClass("active");
    },
    focusout: function() {
        $(this).removeClass("active");
    }
}).appendTo("form");

Friday November 27th over 1,4 million Norwegians watched parts of “Bergensbanen” on NRK2. The longest documentary ever? At least the longest we have made, almost 7 1/2 hours, showing every minute of the scenic train ride between Bergen on the Norwegian west coast, crossing the mountains to the capital of Oslo.
.. source: http://nrkbeta.no/2009/12/18/bergensbanen-eng/

To wet your appetite, here’s a 10 minute video, from Finse:

Click here to view the embedded video.

Facts:

• 7 hours continues front view recording.
• Recorded on a Sony 700 camera in XDCAM HD 1080 50i.
• Available as 720 50P, 1280×720 version, 22 GB file, and as a 1080i 50P ProRes file (NOTE, it’s a 246GB file !)
• Released under Creative Commons

Trivia:

• Filming for Star Wars Episode V: The Empire Strikes Back took place at Finse in 1979 to represent Echo Base on the planet Hoth.

For more information, and the download, head over to http://nrkbeta.no/2009/12/18/bergensbanen-eng/

What’s new:

• Drool Radio is now integrated with SHOUTcast.com
• You can now listen to 30 000 radio stations from around the world
• Set volume on Radio Alarm Clock
• Support for ACC+
• Stops playing when you remove the headset
• Stops playing when removed from docking station
• Other minor bug fixes

• The Best jQuery Plugins
• The Best Free WordPress Themes
• The Best Photoshop Tutorials
• The Best Free Icon Sets
• The Best Free Fonts

Demo: http://soderlind.no/bookmarks/

Plugin: You’ll find the plugin at http://wordpress.org/extend/plugins/delicious-tagroll-shortcode/

Installation: Download the plugin and save it in wp-content/plugins (remember to activate in Plugins) or wp-content/mu-plugins or install it from inside WordPress in Plugins->Add New (search for “delicious tagroll”)

Usage: Add the shortcode to a Page. The shortcode supports the following parameters (the parameters are also “documented” at http://delicious.com/help/tagrolls):

• Mandatory:
  • username=”delicious username” (if you forget it, my tagroll is displayed instead )
• Optional:
  • title=”tagroll title” (default =”My Delicious Tags”, use ” ” if you don’t want a tagroll title)
  • icon=”true or false” (default=”true”)
  • count=”number of tags” (default=”100″)
  • sort=”alpha or freq” (default = “alpha”)
  • flow=”cloud or list” (default = “cloud”)
  • showname=”true or false”(default = “true”, show your delicious name)
  • showadd=”true or false”  (default = “true”, show add to network)
  • showcounts=”true or false” (default = “false”, show tag counts)
  • mincolor=”73adff”
  • maxcolor=”3274d0″
  • minfont=”12″
  • maxfont=”35″

Change log

v 1.1

• changed parameter name=”true” to showname=”true”
• added missing parameter showcounts=”false”

v 1.0

• initial release