Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • How to Use AJAX in a WordPress Shortcode?

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 1.93k
    Comment on it

    We are going to process ajax request in wordpress shortcode on button click. First of all you need to add the shortcode in wordpress. Kindly write below code in function.php

    <?php
    function callback_listing($atts, $content = null)
    {
        extract(shortcode_atts(array(
            'number' => '3',
            'columns' => '3',
            'order' => 'date',
            'role' => '',
            'ids' => '',
        ), $atts));
        $users=get_users($args);
        echo '<ul>';
        foreach($users as $user) {
        ?>
        <li><a href="<?php echo $user->ID; ?>" class="post_listing">Click here</a> to get the posts of user(<?php  echo $user->first_name; ?>) </li>
        <?php
        }
        echo '</ul>';
        echo '<h3>Post listing goes here</h3>';
        echo '<ul class="post_table">';
        echo '</ul>';
    }
    add_shortcode('user_list','callback_listing');
    ?>
    

    In above php script, we added a short code named user_list which is useful to display the user listing and we are going to get posts of these user by ajax call. Kindly write below script in footer page and it is useful to process the ajax request. When any one click on the user listed in user list, an ajax request will be fired to get his post listing.

    <script>
    jQuery(function($){
    
     jQuery(".post_listing").click(function(e){
    e.preventDefault();
    var user_d = jQuery(this).attr('href');
    var formData = {
              'action':'user_post_listing'
              'user_id':user_id
    };
    
     $.ajax({
        type        : 'POST', 
        url         : "<?php echo admin_url( 'admin-ajax.php' ); ?>", 
        data        : formData 
    }).done(function(data){
        $('.post_table').html($args);
    });
    
    
    
     });
    
    
    });
    </script>
    

    Kindly write down below script in function.php which is useful to fetch the post listing for particular user.

    function user_post_list(){
       $user_one = $_POST['user_id'];
       $args = array('post_author'=>$user_one);
       query_posts( $args );
    
    
    while ( have_posts() ) : the_post();
        echo '<li>';
        the_title();
        echo '</li>';
    endwhile;
    
    
    wp_reset_query();
    
        exit;
    
    }
    add_action('wp_ajax_user_post_listing','user_post_list');
    add_action('wp_ajax_nopriv_user_post_listing','user_post_list');
    

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: