Home Forums General Issues Conditional button to display shortcode Reply To: Conditional button to display shortcode

  • To create a selection process using buttons to choose the category and date of an event, and then display a corresponding shortcode for a table of raffle numbers, you can utilize a combination of HTML, JavaScript, and PHP. Here’s an example of how you can achieve this:



    <div id=”category-buttons”>
    <button class=”category-button” data-category=”category1″>Category 1</button>
    <button class=”category-button” data-category=”category2″>Category 2</button>
    <button class=”category-button” data-category=”category3″>Category 3</button>
    <button class=”category-button” data-category=”category4″>Category 4</button>

    <div id=”date-buttons” style=”display: none;”>
    <button class=”date-button” data-date=”date1″>Date 1</button>
    <button class=”date-button” data-date=”date2″>Date 2</button>
    <button class=”date-button” data-date=”date3″>Date 3</button>
    <button class=”date-button” data-date=”date4″>Date 4</button>

    <div id=”shortcode-output” style=”display: none;”></div>



    document.addEventListener(‘DOMContentLoaded’, function() {
    var categoryButtons = document.querySelectorAll(‘.category-button’);
    var dateButtons = document.querySelectorAll(‘.date-button’);
    var shortcodeOutput = document.getElementById(‘shortcode-output’);

    // Add event listeners to category buttons
    categoryButtons.forEach(function(button) {
    button.addEventListener(‘click’, function() {
    var category = this.getAttribute(‘data-category’);

    // Show date buttons corresponding to selected category
    document.getElementById(‘date-buttons’).style.display = ‘block’;

    // Hide previous shortcode output, if any = ‘none’;

    // Remove active class from all category buttons
    categoryButtons.forEach(function(btn) {

    // Add active class to the clicked category button

    // Add event listeners to date buttons
    dateButtons.forEach(function(button) {
    button.addEventListener(‘click’, function() {
    var date = this.getAttribute(‘data-date’);

    // Generate shortcode based on selected category and date
    var shortcode = ‘[raffle_table category=”‘ + getCategory() + ‘” date=”‘ + date + ‘”]’;

    // Display the generated shortcode
    shortcodeOutput.textContent = shortcode; = ‘block’;

    // Remove active class from all date buttons
    dateButtons.forEach(function(btn) {

    // Add active class to the clicked date button

    // Function to get the selected category
    function getCategory() {
    return document.querySelector(‘’).getAttribute(‘data-category’);



    // Shortcode callback function for displaying the raffle table
    function raffle_table_shortcode($atts) {
    $atts = shortcode_atts(array(
    ‘category’ => ”,
    ‘date’ => ”,
    ), $atts);

    // Code to generate and return the raffle table based on the provided category and date

    // Example code:
    $table = ‘<table>’;
    // … Generating the table based on the category and date …
    $table .= ‘</table>’;

    return $table;
    add_shortcode(‘raffle_table’, ‘raffle_table_shortcode’);

    Make sure to enqueue the JavaScript code and the necessary stylesheets in your theme or plugin to ensure they are loaded on the relevant pages.

    In this example, the HTML structure includes two sets of buttons: the category buttons and the date buttons. When a category button is clicked, it activates the corresponding date buttons and displays them. When a date button is clicked, it generates the shortcode based on the selected category and date, and displays the shortcode output.

    The JavaScript code handles the button clicks, adds or removes the active class from the buttons, and generates the shortcode. The PHP code registers a shortcode callback function that generates and returns the raffle table based on the provided category and date.