I'm new to wordpress but have knowledge in php and javascript.

I read a lot of blogs about ajax call in wordpress. I also read some posts on this forum. However, I still have some difficulties making an ajax call with wordpress.

It's a little confusing in my mind where add_action and hook must be written (inside my custom php function file or inside function.php file? or in an other way).

When my jquery script is called, wp_ajax is not defined... I don't understand how my jquery script can get wp_ajax url or other variable from php before it is ran.

Here my different scripts:

In my function.php (I really don't know if I need to put this here or in my custom php file):

wp_enqueue_script('load_post', get_template_directory_uri().'/js/load_post.js', array('jquery'), '1.0', 1 );
wp_localize_script( 'load_post', 'wp_ajax',
        array( 'url' => admin_url( 'admin-ajax.php' ), 'nonce' => wp_create_nonce('ajax_nonce') )); 

In load_post.php


add_action('wp_ajax_load_post', 'load_post_callback');
add_action('wp_ajax_nopriv_load_post', 'load_post_callback');

function load_post_callback() {

if (isset($_POST['post_ids'])) {

    $nonce = $_POST['nonce']; 
    if ( ! wp_verify_nonce( $nonce, 'ajax-nonce' ) ) {
        die ( 'Interdit !');

    $ids = array(); 
    $ids[] = $_POST['post_ids'];

    $posts_per_page = 8;
    global $wp_query;
    query_posts(array('post_type' => array('post', 'portfolio'), 'post__not_in' => $ids, 'posts_per_page' => $posts_per_page));
    while (have_posts()) : the_post();

    $post_type = get_post_type( $post->ID );
    if ($post_type == 'post') {
        $post_type = 'blog';

//I do some stuff echo...


And load_post.js

jQuery(document).ready(function($) { 

    jQuery('#next-container').click(function() { 

        var IDs = [];
        $(".element").each(function(){ IDs.push(this.id); });


            type: 'POST',
            url: wp_ajax.url,
            data: {  action: 'load_post',  
                     ajax_nonce: wp_ajax.nonce,
                    'post_ids': IDs,  
                  },  //{'post_ids[]': IDs },//'post_ids='+IDs,
            success: function(data) {
                    $container.isotope( 'insert', $(data));

  • is load_post.php included in your functions.php file?
    – Milo
    Jul 10, 2013 at 3:47
  • yes like this : require_once ($admin_path . "load_post.php");.
    – freaky
    Jul 10, 2013 at 12:28

2 Answers 2


In your functions.php file you should add an action to enqueue your scripts.

function my_enqueue_scripts() {
        get_template_directory_uri() . '/js/load_post.js', 
        array( 'jquery' ), 
            'url' => admin_url( 'admin-ajax.php' ), 
            'nonce' => wp_create_nonce( 'ajax_nonce' )
add_action( 'wp_enqueue_scripts', 'my_enqueue_scripts' );
  • thank you for your answer. However with this code, I still have the same problem to get wp_ajax variables... I'm on loacal server by the way, may be it's a pathname problem...
    – freaky
    Jul 9, 2013 at 20:41
  • I really don't understand what I need to make it works... I spend so much hours on it... I miss a little thing I guess...
    – freaky
    Jul 9, 2013 at 21:18
  • In the source code (in the head section) I don't see the wp_ajax variable. That's the reason I can't access it in my js script. What do I need to make it works?
    – freaky
    Jul 10, 2013 at 12:19
  • @freaky - in your enqueue script call, you've set it to be output in footer (the 1 in the last argument) so you won't see it in head, it will be output in your theme when wp_footer() is called in your template. make sure that your theme is calling wp_footer().
    – Milo
    Jul 10, 2013 at 14:41
  • I solved it finally. It was a syntax error. Thank you.
    – freaky
    Jul 10, 2013 at 14:44

I am also having some problems, This is how I am calling the Fucntion via Ajax on Windows scroll

        // if ($(window).scrollTop() + $(window).height() == $(document).height())
        if ($(window).scrollTop() == $(document).height() - $(window).height())  {

function LoadonButton (){
var sessionCommentId =$(".message_box:last").attr("id"); jQuery('#slick-slidetoggle').show(); jQuery.ajax({ type:'POST', url: 'http://dino-dev.com/foodie/wp-admin/admin-ajax.php',
data: {
action: 'HomeComments', number: '10', CommentLoadedID:sessionCommentId },
success: function(data, textStatus, XMLHttpRequest){

error: function(MLHttpRequest, textStatus, errorThrown){  

}); }

But I am having trouble with the plugins I am calling in HomeComments. The plugin functions are called but the options table is not populated or other things are missing. How do I make sure my plugins are loaded properly. When I call this function directly it works perfectly.

  • answers should answer the original question. if you need help ask a new question.
    – Milo
    Jul 10, 2013 at 5:43

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.