How to Filter multiple Posts in WordPress by tag Using AJAX, without using any plugin

Step-1:
Html Checkbox Like this:

<div>



<p>display all tabs or subjects container:<br>
</p>

<pre class="brush:php;toolbar:false"><!-- Container to display worksheets -->
<div>



<p><strong>Step-2:</strong><br>
create js file:<br>
</p>

<pre class="brush:php;toolbar:false">jQuery(document).ready(function ($) {
    // Fetch Subjects on any checkbox change
    $('.subject-filter').on('change', function () {
        // Gather all selected grades
        var taxonomy = $(this).data('taxonomy'); // Taxonomy name
        var terms = []; // Array to hold selected terms
        $('.subject-filter:checked').each(function () {
            terms.push($(this).val());
        });

        // Fetch Subjects for selected grades
        fetchSubjects(taxonomy, terms);
    });

    // Function to fetch Subjects
    function fetchSubjects(taxonomy = '', terms = []) {
        $.ajax({
            url: ajax_object.ajax_url,
            type: 'POST',
            data: {
                action: 'fetch_subjects',
                nonce: ajax_object.nonce,
                taxonomy: taxonomy,
                terms: terms, // Send array of selected terms
            },
            beforeSend: function () {
                $('.worksheet-container').html('<p>Loading...</p>');
            },
            success: function (response) {
                if (response.success) {
                    $('.worksheet-container').html(response.data.html);
                } else {
                    $('.worksheet-container').html('<p>' + response.data.message + '</p>');
                }
            },
            error: function () {
                $('.worksheet-container').html('<p>An error occurred. Please try again.</p>');
            },
        });
    }
});

Step-3:
Create Functions in functions.php:

// Register AJAX action for logged-in users (you can add for non-logged-in users too)
add_action('wp_ajax_fetch_subjects', 'fetch_subjects');
add_action('wp_ajax_nopriv_fetch_subjects', 'fetch_subjects');
function fetch_subjects() {
    // Verify nonce for security
    if (!isset($_POST['nonce']) || !wp_verify_nonce($_POST['nonce'], 'ajax_nonce')) {
        wp_send_json_error(array('message' => 'Nonce verification failed.'));
        wp_die();
    }

    // Get taxonomy and terms from the AJAX request
    $taxonomy = isset($_POST['taxonomy']) ? sanitize_text_field($_POST['taxonomy']) : '';
    $terms = isset($_POST['terms']) ? array_map('sanitize_text_field', $_POST['terms']) : array();

    // Default query arguments
    $args = array(
        'post_type'      => 'worksheet',
        'posts_per_page' => -1, // Fetch all posts
    );

    // If terms are selected, modify the query
    if (!empty($taxonomy) && !empty($terms)) {
        $args['tax_query'] = array(
            array(
                'taxonomy' => $taxonomy,
                'field'    => 'slug',
                'terms'    => $terms, // Pass the array of selected terms
                'operator' => 'IN',   // Match any of the selected terms
            ),
        );
    }

    // Run WP_Query to fetch posts
    $query = new WP_Query($args);

    // Check if any posts were found
    if ($query->have_posts()) {
        $html = '';
        while ($query->have_posts()) {
            $query->the_post();
            // Output the post HTML
            $html .= '<div>




          

            
        

The above is the detailed content of How to Filter multiple Posts in WordPress by tag Using AJAX, without using any plugin. For more information, please follow other related articles on the PHP Chinese website!