How to get Ajax into a theme - without writing a plugin?

Question

Okay, I'm starting out with some AJAX stuff in a wordpress theme

1) I'm building a child theme OFF the thematic framework 2) My child theme has a header.php, index.php, functions.php and style.css (at this stage)

In my header.php I have the following (btw: the code is adapted from http://codex.wordpress.org/AJAX_in_Plugins):

<?php
    if( !is_admin() ) {
 add_action('wp_ajax_my_special_action', 'my_action_callback');
 add_action('wp_ajax_nopriv_my_special_action', 'my_action_callback');
 $_ajax = admin_url('admin-ajax.php');    
}
?>
<script type="text/javascript" >
jQuery(document).ready(function($) {

 var data = {
  action: 'my_special_action',
  whatever: 1234
 };

 jQuery.post('<?php echo($_ajax); ?>', data, function(response) {
  jQuery('#output').html('Got this from the server: ' + response);
 });

});
</script>
</head>

Right so that's all cool - and it updates the OUTPUT div on the page with "Got this from the server: 0"

I need a PHP function called "my_action_callback" - so in my theme's functions.php I have the following:

function my_action_callback() {

 $whatever = $_POST['whatever'];

 $whatever += 10;

    echo 'whatever now equals: ' . $whatever;

 die();
}

This is the ONLY function in my functions.php

To make sure the PHP function is working I stick my_action_callback() into my index.php - and it outputs "whatever now equals: 10" as expected.

HOWEVER - the AJAX response is always 'Got this from the server: 0' Ajax never seems to get the response from the PHP function.

I tried adding .ajaxError() to see if there were any errors - nope.

I tried adding the PHP functions to another plugin of mine - nope.

What am I missing that jQuery isn't doing the ajax bit for me?

Thanks in advance

Answer 1

Put those add_action functions in your functions.php file too. If they're in header.php, WordPress never registers them since header isn't loaded in AJAX. Also, you don't need that is_admin() check. The theme's header will never load in admin. So, your functions file should look like this:

add_action('wp_ajax_my_special_action', 'my_action_callback');
add_action('wp_ajax_nopriv_my_special_action', 'my_action_callback');
function my_action_callback() {

 $whatever = $_POST['whatever'];

 $whatever += 10;

    echo 'whatever now equals: ' . $whatever;

 die();
}

And the beginning of that part of your theme's header file should look like this:

<?php
$_ajax = admin_url('admin-ajax.php');
?>
<script type="text/javascript" >
jQuery(document).ready(function($) {

Other than that, your code looks like it's good to go!