Nice question!
But, as your code starts with a bad practice – require_once('wp-load.php');
-, I decided to pick one of my working snippets and adapt it.
Observations:
- Differently from your code, no external
quotes.txt
is being grabbed, here a Post Type is used as source (post
), in the methodget_random_post
- There can only be one instance of the shortcode in a given page, as it is based on specific element ID’s (
#newpost-shortcode
and#randomposts
) - As usual, it’s better to create a plugin for this. Follow the code comments.
/wp-content/plugins/so-ajax-shortcode/so-ajax-shortcode.php
<?php
/**
* Plugin Name: (SO) Ajax Shortcode
* Description: Demonstration of WordPress Ajax working as a shortcode.
* Plugin URI: http://stackoverflow.com/a/13614297/1287812
* Version: 2013.10.25
* Author: Rodolfo Buaiz
* Author URI: https://wordpress.stackexchange.com/users/12615/brasofilo
* License: GPLv3
*/
add_action(
'plugins_loaded',
array ( B5F_SO_13498959::get_instance(), 'plugin_setup' )
);
class B5F_SO_13498959
{
private $cpt="post"; # Adjust the CPT
protected static $instance = NULL;
public $plugin_url="";
public function __construct() {}
public static function get_instance()
{
NULL === self::$instance and self::$instance = new self;
return self::$instance;
}
/**
* Regular plugin work
*/
public function plugin_setup()
{
$this->plugin_url = plugins_url( "https://stackoverflow.com/", __FILE__ );
add_shortcode( 'randomposts', array( $this, 'shortcode') );
add_action( 'wp_enqueue_scripts', array( $this, 'enqueue' ) );
add_action( 'wp_ajax_query_rand_post', array( $this, 'query_rand_post' ) );
add_action( 'wp_ajax_nopriv_query_rand_post', array( $this, 'query_rand_post' ) );
}
/**
* SHORTCODE output
*/
public function shortcode( $atts )
{
# First post
if( ! $random_post = $this->get_random_post() )
$random_post = __( 'Could not retrieve a post.' );
# Prepare output
$output = sprintf(
'<div id="randomposts">%s</div>
<button id="newpost-shortcode" type="button" title="%s">%s</button>',
$random_post,
__( 'Gimme a new one!' ),
__( 'New random post' )
);
return $output;
}
/**
* ACTION Enqueue scripts
*/
public function enqueue()
{
# jQuery will be loaded as a dependency
## DO NOT use other version than the one bundled with WP
### Things will BREAK if you do so
wp_enqueue_script(
'ajax-random-post',
"{$this->plugin_url}ajax.js",
array( 'jquery' )
);
# Here we send PHP values to JS
wp_localize_script(
'ajax-random-post',
'wp_ajax',
array(
'ajaxurl' => admin_url( 'admin-ajax.php' ),
'ajaxnonce' => wp_create_nonce( 'ajax_post_validation' ),
'loading' => 'http://i.stack.imgur.com/drgpu.gif'
)
);
}
/**
* AJAX query random post
*
* Check for security and send proper responses back
*/
public function query_rand_post()
{
check_ajax_referer( 'ajax_post_validation', 'security' );
$random_post = $this->get_random_post();
if( !isset( $random_post ) )
wp_send_json_error( array( 'error' => __( 'Could not retrieve a post.' ) ) );
else
wp_send_json_success( $random_post );
}
/**
* AUX FUNCTION
* Search a random Post Type and return the post_content
*/
public function get_random_post()
{
$array = get_posts(
array(
'post_type' => $this->cpt,
'numberposts' => -1
)
);
if( empty( $array ) )
return false;
# Select a random post index number from the current array
$r = rand( 0, count($array) - 1 );
return $array[$r]->post_content;
}
}
/wp-content/plugins/so-ajax-shortcode/ajax.js
/*
* @plugin SO Ajax Shortcode
*/
jQuery( document ).ready( function( $ )
{
var data = {
action: 'query_rand_post',
security: wp_ajax.ajaxnonce
};
var image="<img src="" + wp_ajax.loading + '" alt="Loading ..." width="16" height="16" />';
$( '#newpost-shortcode' ).click( function(e)
{
e.preventDefault();
$( '#randomposts' ).html( image );
$.post(
wp_ajax.ajaxurl,
data,
function( response )
{
// ERROR HANDLING
if( !response.success )
{
// No data came back, maybe a security error
if( !response.data )
$( '#randomposts' ).html( 'AJAX ERROR: no response' );
else
$( '#randomposts' ).html( response.data.error );
}
else
$( '#randomposts' ).html( response.data );
}
);
}); // end click
});