Are you cluttered with posts? Are you having difficulties with viewing and managing all your old posts? Don’t worry we have just what you want.Our Random Post Generation will allow you to generate posts randomly. With Ajax we have been able to simplify random post generation with a special button function and we have also brought you this tutorial with sample codes.

The Required Pages are functions.php and randompost.js. Happy Coding!!!

First of all , Lets have a look for a simple query that allows you to display random posts.Here the magic is done by ‘orderby’=’rand’.

[php]

<?php $random_posts = new WP_Query(array( ‘post_type’ =’post’,’posts_per_page’=5,’orderby’ =’rand’ )); ?>

[/php]

This will definitely load your posts randomly but the tedious part over here, you have to refresh your page everytime.

Dealing with ajax call for the first time?Here we have simplified the code,at the end of this tutorial you will be able to load your posts randomly with the button function using AJAX.

Lets have an example !

Start  by creating an input button on your html page.

<input id=”random_posts” type=”button” value=”Load random posts” /;>

Then add this code below the button tag. Id “ajax-posts” will trigger when you click button while reloading posts.

<div id=”ajax-posts” class=”layout”>

[php]

<?php $random_posts = new WP_Query ( array ( ‘post_type’ =’post’,’posts_per_page’ =2,’orderby’ =’rand’ )); if ( $random_posts->have_posts() ) : while ( $random_posts->have_posts() ) : $random_posts->the_post();
?>

<?php the_title(); the_content(); endwhile; ?>
</div>
<?php wp_reset_postdata();?>
endif;
[/php]

Add this below code on your functions.php

[php]

<?php function post_loadscript() { wp_register_script( ‘randomposts’, get_template_directory_uri(). ‘/js/randomposts.js’, ‘1.0’, ”, true); wp_localize_script( ‘randomposts’, ‘ajax_posts’,array( ‘ajaxurl’=> admin_url( ‘admin-ajax.php’ ), ));
wp_enqueue_script(‘randomposts’);

}

?>
add_action(‘wp_enqueue_scripts’,’post_loadscript’);

<?php function random_post_ajax() { $random_posts = new WP_Query ( array ( ‘post_type’ =’post’,’posts_per_page’ =2,’orderby’ =’rand’ )); if ( $random_posts->have_posts() ) : while ( $random_posts->have_posts() ) : $random_posts->the_post();

?>

<?php the_title(); the_content(); ?>

<?php endwhile; wp_reset_postdata(); endif; } add_action(‘wp_ajax_nopriv_random_post_ajax’, ‘random_post_ajax’); add_action(‘wp_ajax_random_post_ajax’, ‘random_post_ajax’); ?>

[/php]

Finally its almost done .Now you have to simple copy paste this code on your js file.

[code lang=”js”]jQuery(document).ready(function($) {
function load_posts(){
var value = ‘&action=random_post_ajax’;
$.ajax({
type: "POST",
dataType: "html",
url: ajax_posts.ajaxurl,
data: value,
success: function(data){
var $data = $(data);
if($data.length){
$("#ajax-posts").html($data);
$("#random_posts").addClass(‘random_posts_loading’);
} else{
$("#random_posts").removeClass(‘random_posts_loading’).addClass(‘no_more_posts’);
}
$("#random_posts").removeAttr("disabled");
},
error : function(jqXHR, textStatus, errorThrown) {
$loader.html(jqXHR + " :: " + textStatus + " :: " + errorThrown);
$("#random_posts").removeAttr("disabled");
}
});
return false;
}
$("#random_posts").on("click",function(){ // When Button is Pressed.
$("#random_posts").attr("disabled",true); // Disable the button for temporary time.
load_posts();
});
});
[/code]

This is all about loading random post using Ajax.Hope this tutorial helps you. 🙂