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

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)

Read More

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

Related posts

Leave a Reply

1 comment

  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!