To help explain how this can be achieved, we will be creating a plugin called “Ajax Example“, stored in the folder “ajax-example” inside the plugin directory of your WordPress install.

Further information on creating a WordPress plugin can be found on WordPress.org and other resources, so won’t go into too much detail here.

First we need to create a file called “index.html” and copy the following into this file:

<?php
/*
Plugin Name: Ajax Example
Plugin URI: http://wp.me/pWbfz-dB
Description: Simple example of how to integrate front-end ajax requests via your plugin.
Version: 0.1
Date: 2011-09-01
Author: Steve Whiteley
Author URI: http://flav36rs.com
*/

class Ajax_Example
{
	public function __construct()
	{
		// ...
 	}
}

$ajaxExample = new Ajax_Example();

?>

We will be using the OOP structure for this plugin instead of the prefixed function format, however could be converted with ease. This class provides the skeleton structure of our plugin, you should save this file to our “ajax-example” folder before we start to add more functionality.

The next step is to include the JavaScript file that performs the AJAX request, which is called by the “init” action hook added to the class constructor method:

add_action( 'init', array( &$this, 'init' ) );

Then we add the init function to the plugin, which includes calls to insert the JavaScript file (wp_enqueue_script) and set the parameters required by the external file (wp_localize_script).

public function init()
{
	wp_enqueue_script( 'ajax-example', plugin_dir_url( __FILE__ ) . 'ajax.js', array( 'jquery' ) );
	wp_localize_script( 'ajax-example', 'AjaxExample', array(
		'ajaxurl' => admin_url( 'admin-ajax.php' ),
		'nonce' => wp_create_nonce( 'ajax-example-nonce' )
	) );
}

Additional parameters can be added to array if they are required, the two mentioned should be the minimum that are required.

While we’re here, we should add the function that handles the response generated by the AJAX request. Notice here that we check the nonce value that is defined in the function above and set the content type before returning the encoded JSON array.

public function ajax_call()
{
	if ( ! isset( $_REQUEST['nonce'] ) || ! wp_verify_nonce( $_REQUEST['nonce'], 'ajax-example-nonce' ) )
		die ( 'Invalid Nonce' );
	header( "Content-Type: application/json" );
	echo json_encode( array(
		'success' => true,
		'time' => time()
	) );
	exit;
}

Create “ajax-example/ajax.js” and copy the following snippet into this file. In order to perform the AJAX request, we use the jQuery .getJSON() method. Alternative methods could be used depending on the type of request you are performing.

jQuery.getJSON(
    AjaxExample.ajaxurl,
    {
        action: 'ajax-example',
        nonce: AjaxExample.nonce
    },
    function( response ) {
    	alert( response.success );
    }
);

Unfortunately this won’t actually do anything until we add two hooks to extend the built in AJAX functionality. These are added to the class constructor, the first (wp_ajax_nopriv_ajax-example) provides access for logged in users, the second (wp_ajax_ajax-example) for anonymous / non-logged in visitors.

if ( is_admin() ) {
	add_action( 'wp_ajax_nopriv_ajax-example', array( &$this, 'ajax_call' ) );
	add_action( 'wp_ajax_ajax-example', array( &$this, 'ajax_call' ) );
}

Please be aware that when using these hooks, they are called from within is_admin(), otherwise they are not correctly set.

The full contents of the plugin file “ajax-example/index.php” should be as follows:

<?php
/*
Plugin Name: Ajax Example
Plugin URI: http://wp.me/pWbfz-dB
Description: Simple example of how to integrate front-end ajax requests via your plugin.
Version: 0.1
Date: 2011-09-01
Author: Steve Whiteley
Author URI: http://flav36rs.com
*/

class Ajax_Example
{
	public function __construct()
	{
		if ( is_admin() ) {
			add_action( 'wp_ajax_nopriv_ajax-example', array( &$this, 'ajax_call' ) );
			add_action( 'wp_ajax_ajax-example', array( &$this, 'ajax_call' ) );
		}
		add_action( 'init', array( &$this, 'init' ) );
	}

	public function init()
	{
		wp_enqueue_script( 'ajax-example', plugin_dir_url( __FILE__ ) . 'ajax.js', array( 'jquery' ) );
		wp_localize_script( 'ajax-example', 'AjaxExample', array(
		    'ajaxurl' => admin_url( 'admin-ajax.php' ),
		    'nonce' => wp_create_nonce( 'ajax-example-nonce' )
		) );
	}

	public function ajax_call()
	{
		if ( ! isset( $_REQUEST['nonce'] ) || ! wp_verify_nonce( $_REQUEST['nonce'], 'ajax-example-nonce' ) )
			die ( 'Invalid Nonce' );
		header( "Content-Type: application/json" );
		echo json_encode( array(
			'success' => true,
			'time' => time()
		) );
		exit;
	}

}

$ajaxExample = new Ajax_Example();

?>

Other things to consider when using the example code provided above are that you should probably ensure jQuery is loaded and possibly only add the the scripts to the pages that they are required, rather than globally.

This functionality was tested with WordPress 3.2.1, it may however change and be simplified in future releases.

The problem with using this plug-in is that the WordPress WYSIWYG Editor (TinyMCE), will remove any tags and attributes that it believes to be invalid according to it’s configuration. As two of the attributes used by this plug-in are custom attributes (escaped/line) they are removed, causing some unexpected output.

One solution to this problem is to add the custom attributes to the list of valid elements by using the ‘tiny_mce_before_init‘ filter and appending them to the ‘extended_valid_elements’ string.

The function below can be added to the functions.php file within your theme directory:

function tinymce_wp_syntax($init) {
	$values = 'pre[lang|escaped=true|line]';
	if (empty($init['extended_valid_elements'])) {
		$init['extended_valid_elements'] = $values;
	} else {
		$init['extended_valid_elements'] .= ','.$values;
	}
	return $init;
}
add_filter('tiny_mce_before_init', 'tinymce_wp_syntax');

Adding this to my blog enables me to continue using the visual editor instead of disabling it and at the same time will allow the other HTML filters to continue as normal .

Note: You may have to force refresh (ctrl + f5) the post / page editing page for the changes to take effect.

EDIT: This solution does not fully solve the problem in WordPress MU installations, as you need to adjust the allowed post tags used by the content filter.

if (!CUSTOM_TAGS) {
	$allowedposttags['pre'] =  array(
		'lang' => array(),
		'escaped' => array('true' => array()),
		'line' => array()
	);
}

$("#id").css({opacity: 0.8});

It turns out that the latest version of jQuery (1.3.1) doesn’t believe that Opera 9.2 supports CSS opacity, and therefore it is ignored completely.

There are two possible fixes for this, the first is to simply upgrade Opera to a newer version (the latest is 9.6.3).

The second option is to tell jQuery that opera does support opacity using the following – or similar – within your script:

if ($.browser.opera) {
    $.support.opacity = true;
}