WordPress – filter image gallery using ajax

I’m using WordPress, and I’m trying to learn how to create a filterable gallery on my own using ajax. To achieve this, I’ve created a page with a template called filterable-gallery-template.php. The file is located in my child theme. In my page, I’ve added a JavaScript snippet using wpcode and calling it with a shortcode.

What I’m attempting to do is to obtain the category value when a button is clicked, send this value to my PHP template, and then filter my gallery (I’ve added categories for my images using a plugin). However, I’m facing a 500 error. I’ve tried to retrieve the value of var_dump($category), and I have succeeded in getting the category name only once when visiting the page for the first time. After that, the buttons don’t work, and I don’t see any images. Here is my code, thanks in advance for your help 🙂

filterable-gallery-template.php

`<?php
/* Template Name: filterable Gallery */
?>

<nav class="filterable-gallery">
    <ul>
        <li><a class="wp-block-button__link filterable-gallery__btn on">Print</a></li>
        <li><a class="wp-block-button__link filterable-gallery__btn">Webdesign</a></li>
        <li><a class="wp-block-button__link filterable-gallery__btn">Branding</a></li>
        <li><a class="wp-block-button__link filterable-gallery__btn">Illustration</a></li>
    </ul>
</nav>

<div class="gallery">
    <?php
    
   $category = isset($_POST['category']) ? $_POST['category'] : 'Print';
    
    
    echo '<pre>';
    var_dump($category);
    echo '</pre>';
    
    $args = array(
        'numberposts'    => -1,
        'orderby'        => 'menu_order',
        'order'          => 'ASC',
        'post_mime_type' => 'image',
        'post_parent'    => get_the_ID(),
        'post_status'    => null,
        'post_type'      => 'attachment',
        'tax_query'      => array(
            array(
                'taxonomy' => 'attachment_tag',
                'field'    => 'slug',
                'terms'    => $category,
            ),
        ),
    );

    $images = get_posts($args);

    if ($images) {
        foreach ($images as $image) {
            $image_id = $image->ID;
            $title = get_the_title($image_id);
            ?>
            <div class="gallery-item">
                <img src="<?php echo wp_get_attachment_url($image_id); ?>" alt=""/>
                <div class="overlay">
                    <h5><?php echo $title; ?></h5>
                </div>
            </div>
            <?php
        }
    } else {
        echo '<p>Aucune image trouvée avec la catégorie "' . esc_html($category) . '".</p>';
    }
    ?>
</div>
`

Javascript snippet

`jQuery(document).ready(function($) {
    let isActive = document.getElementsByClassName('on');
    let buttons = document.getElementsByClassName('filterable-gallery__btn');

    for (let buttonIndex = 0; buttonIndex < buttons.length; buttonIndex++) {
        buttons[buttonIndex].addEventListener('click', function(event) {
            activer(event);
        });
    }

    function activer(e) {
        let categoryClicked = null;

        if (!e.target.classList.contains('on')) {
            for (let i = 0; i < isActive.length; i++) {
                isActive[i].classList.remove('on');
            }
            e.target.classList.add('on');
            categoryClicked = e.target.innerText.toLowerCase();
        } else {
            return;
        }
        console.log(categoryClicked);
        // Utilisation de jQuery pour simplifier la requête AJAX
        $.ajax({
            type: 'POST',
            url: '/wp-content/themes/twentytwentyone-child/filterable-gallery-template.php',
            dataType: 'html',
            data: {category: categoryClicked },
            success: function(response) {
                console.log(response);
            },
        });
    }
});
`