How to change category of post in WP_Query

Question

How can I pass a category name to new WP_Query when I click specific button with category name?

I've got this in my functions.php

<?php
add_action('wp_ajax_my_action', 'data_fetch');
add_action('wp_ajax_nopriv_my_action', 'data_fetch');
function data_fetch(){
    $the_query = new WP_Query(array('post_type'=>'wydarzenie','posts_per_page'=>2, 'category_name'=>'2017'));
    if($the_query->have_posts()):
        while($the_query->have_posts()): $the_query->the_post(); ?>
              <h2><?php the_title(); ?></h2>
              <p><?php the_content(); ?></p>
        <?php endwhile;
        wp_reset_postdata();
    endif;
    die();
}
?>

and this on page with my default loop posts

function fetch(){
    $.post('/PRACA/FundacjaWP/wp-admin/admin-ajax.php', {'action':'my_action'}, function(response){
        $("#pick-event").html(response);
    });
}

$(".show-specific-events").on("click", function(e){
    e.preventDefault();
    var category = $(this).text();
    fetch();
});

I want load a new query with new loop based on category choose when I click a button. Now I set category '2017' but I want it to be dynamic.

Answer 1

Here we will learn how to use AJAX in WordPress. We will see how WordPress AJAX works as Beginner level. In this, we will pass a variable from JavaScript and pass it to WordPress theme function file. After doing the necessary process, we will pass the resulting content back to the JavaScript.

We are assuming that you already know how to enqueue JavaScript, etc.

JavaScript:

 jQuery(document).ready(function($) {        
     $(".show-specific-events").on("click", function(e){
    e.preventDefault();
    var category = $(this).text();
    
     // This does the ajax request
     $.ajax({
      url: codecanal_ajax_object.ajax_url,
      data: {
       'action':'codecanal_ajax_request',
       'category_name' : category
      },
      success:function(data) {
      // The OutPut after successfull receiveing content
      console.log(data);
      },
      error: function(errorThrown){
      console.log(errorThrown);
      }
     });
});
    });

Implementation of Argument

If you are using in theme custom coding then put the below code in theme's functions.php file

 function codecanal_ajax_request() {
    
     // The $_REQUEST contains all the data sent via ajax
     if ( isset($_REQUEST) ) {
    
     // You can check what data is received in the function by debugging it
     // print_r($_REQUEST);
    
     $category_name = $_REQUEST['category_name'];
    
$the_query = new WP_Query(array('post_type'=>'wydarzenie','posts_per_page'=>2, 'category_name'=> $category_name));
    if($the_query->have_posts()):
        while($the_query->have_posts()): $the_query->the_post(); ?>
              <h2><?php the_title(); ?></h2>
              <p><?php the_content(); ?></p>
        <?php endwhile;
        wp_reset_postdata();
    endif;
    die();
     
    }
    
    // To return to the front page, always finish after echoing the desired content.
    die();
    }
    add_action( 'wp_ajax_codecanal_ajax_request', 'codecanal_ajax_request' );
    
    // For allowing non-logged in users to use AJAX function
    // add_action( 'wp_ajax_nopriv_codecanal_ajax_request', 'codecanal_ajax_request' );
    
    /* We can define the AJAX url with using wp_localize_script */
    function codecanal_ajax_enqueue() {
     wp_localize_script( 'ajax-script', 'codecanal_ajax_object',
     array( 'ajax_url' => admin_url( 'admin-ajax.php' ) ) );
    }
    add_action( 'wp_enqueue_scripts', 'codecanal_ajax_enqueue' );

Answer 2

Your code should look like this.

$args=array(
    'posts_per_page' => 50, 
    'post_type' => 'my_custom_type'
    'cat' => $cat_id,
);
$wp_query = new WP_Query( $args );

and when you use jquery at that time you need to pass category id on that.