Call wordpress shortcode with AJAX

Question

I would like to run shortcodes using a switch button. If the switch is " ON", I call a shortcode and if it is "OFF" I call another .

As a test I tried calling a shortcode at the click on a single link with AJAX, it gives me this:

File "page-recherche.php" :

<a href="" id="clicklien">CLICK HERE</a>


<script>
$("#clicklien").click(function(e){
      e.preventDefault();
    $.ajax({
    url: 'http://www.capitainebar.com/wp-content/themes/Capitaine-Bar/shortcode-recherche.php',
    success: function (data) {
        // this is executed when ajax call finished well
        console.log('content of the executed page: ' + data);
        $('body').append(data);

    },
    error: function (xhr, status, error) {
        // executed if something went wrong during call
        if (xhr.status > 0) alert('got error: ' + status); // status 0 - when load is interrupted
    }
});

});
</script

The file called is "shortcode-recherche.php" :

<?php echo do_shortcode( '[search-form id="1" showall="1"]' ); ?>

The result is a FATAL error . As if the code was running in "shortcode-recherche.php" rather than "page-recherche.php".

Notice that the shortcode works fine if I write it directly into my page, without the AJAX call.

You can see the result here

Answer 1

When you call a PHP file directly, WordPress is not involved. This means that functions like do_shortcode() do not even exist.

Instead, you need to request a file that is caught by WordPress (even if normally 404). Then, make your plugin aware of the URL. You can do this with query variables (easy) or rewrite rules (difficult, prettier). For example:

Query variable: example.org/?custom_shortcode=gallery

Rerwrite rule: example.org/custom_shortcode/gallery/

---

Whichever option you choose, your plugin needs to be aware when you access this URL and intercept it. When you are done, you need to exit the script to prevent WordPress from trying to show a 404 page.

Here is an example which you can simply drop in to your functions.php file.

function shortcode_test() {
  if ( !empty($_REQUEST['shortcode']) ) {
    // Try and sanitize your shortcode to prevent possible exploits. Users typically can't call shortcodes directly.
    $shortcode_name = esc_attr($_REQUEST['shortcode']);

    // Wrap the shortcode in tags. You might also want to add arguments here.
    $full_shortcode = sprintf('[%s]', $shortcode_name);

    // Perform the shortcode
    echo do_shortcode( $full_shortcode );

    // Stop the script before WordPress tries to display a template file.
    exit;
  }
}
add_action('init', 'shortcode_test');

You can test this by visiting your site with this added on the end of the URL:

?shortcode=gallery

This should display the gallery shortcode expanded as HTML. Once this is working, just tie it in to your existing AJAX function.