Today we are going to learn how to use admin-ajax.php in WordPress.

Using Ajax will allow you to create a better user experience and to change the content of the page without reloading the entire page and without loading information until it’s needed.

For the example I choose to create a small code to display a random posts.

show me something else

We are going to use our theme’s functions.php file.

The purpose of this project is to create a tool that will allow us to display a random post wherever we want in the website.

For this we are going to add a new shortcode.


add_shortcode('display-random-post', 'display_random_post_callback');

function display_random_post_callback() {
}

For more information about creating your own shorcodes in WorrdPess, you can see this post.

Using the shortcode is now very easy. You can use

show me something else


in you posts content or

do_shortcode('
show me something else
');

in your templates.

We need to make the shortcode do something now because it does not do anything.


function display_random_post_callback() {
$final_str = '
<div class="random_post_wrapper">
<div class="random_post_container"></div>
<div class="load_new_post">show me something else</div>
</div>';
return $final_str;
}

Now we have to load the random post using Ajax.

for this we are going to create a .js file in our child theme. For my example I am using Avada-Child-Theme so I made the following file:

/wp-content/themes/Avada-Child-Theme/files/js/random_post_script.js

and we need to make sure this script file is available in the shortcode:

function display_random_post_callback() {
$dir_url = get_template_directory_uri();

wp_enqueue_script (‘random_post_script’, $dir_url.’-Child-Theme/files/js/random_post_script.js’ );
wp_localize_script(‘random_post_script’, ‘ajax_object’, array( ‘ajax_url’ => admin_url( ‘admin-ajax.php’ )) );

$final_str = ‘
<div class=”random_post_wrapper”>
<div class=”random_post_container”></div>
<div class=”load_new_post”>show me something else</div>
</div>’;
return $final_str;
}

So the first thing we need to do is trigger loading the posts when the page loads:


jQuery(document).ready(function(){
load_new_post();
});

And we want to load a new post every time visitors will click on show me something else. For this we will add the following:

jQuery('.load_new_post').on('click', function(){
jQuery('.random_post_container').append('<div class="overlay"></div>');
load_new_post();
});

Now we need to define this load_new_post_function() that makes it all possible.

For this I have made 2 functions, 2 versions of the code:

function load_new_post(){
data = {
action : 'ajax_load_random_post_callback',
exclude_post : jQuery('.random_post_container').find('h2').attr('data-postid')
};
jQuery.post(ajax_object.ajax_url, data, function(response) {
jQuery('.random_post_container').html(response);
});
}

function load_new_post_2 (){
jQuery.ajax({
url : ajax_object.ajax_url,
type : ‘post’,
data : {
action : ‘ajax_load_random_post_callback’,
exclude_post : jQuery(‘.random_post_container’).find(‘h2’).attr(‘data-postid’)
},
success : function( response ) {
jQuery(‘.random_post_container’).html(response);
}
});
}

Now in the functions.php we have to define the ajax_load_random_post_callback

add_action( 'wp_ajax_nopriv_ajax_load_random_post_callback', 'ajax_load_random_post_callback' );
add_action( 'wp_ajax_ajax_load_random_post_callback' , 'ajax_load_random_post_callback' );

function ajax_load_random_post_callback() {
(isset($_POST[‘exclude_post’]) ) ? $exclude_posts[] = $_POST[‘exclude_post’] : $exclude_posts = array();
$args = array(
‘posts_per_page’ => 1,
‘offset’ => 0,
‘post__not_in’ => $exclude_posts,
‘category’ => ‘2’,
‘category_name’ => ”,
‘orderby’ => ‘rand’,
‘order’ => ‘DESC’,
‘include’ => ”,
‘exclude’ => ”,
‘meta_key’ => ”,
‘meta_value’ => ”,
‘post_type’ => ‘post’,
‘post_mime_type’ => ”,
‘post_parent’ => ”,
‘post_status’ => ‘publish’,
‘suppress_filters’ => true
);
$posts = get_posts($args);
$post = $posts[0];

echo ‘< h2 data-postid=”‘.$post->ID.'”><a href=”‘.get_the_permalink($post->ID).'”>’.$post->post_title.'</a></h2>’;
echo get_the_post_thumbnail($post->ID);

wp_die();
}

Also we need to add some style to our little shortcode:
for this we create a css file:

/wp-content/themes/Avada-Child-Theme/files/css/random_post_script.css

and we includei it in the shortcode:

wp_enqueue_style ('random_post_style', $dir_url.'-Child-Theme/files/css/random_post_script.css' );


.random_post_container .overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(236, 236, 236, 0.3);
}

.random_post_container {
text-align: center;
position: relative;
}

.load_new_post {
text-align: center;
cursor: pointer;
}

.random_post_wrapper {
padding: 10px;
border: 1px solid #cdcdcd;
border-radius: 5px;
}