'Show random post in Wordpress and update content without refreshing page

I'm building a Wordpress website where I need to display a random post (via WP_Query) and reload its content with a click of a button without refreshing the whole page.

This is my HTML

<div id="randompost"></div>
<button type="button" id="reloadpost">Reload post</button>

And this is my WP_Query

<?php

    $args = array(
        'post_type' => 'post',
        'post_status' => 'publish',
        'posts_per_page' => 1,
        'orderby' => 'rand',
    );

    $arr_posts = new WP_Query( $args );
        if ( $arr_posts->have_posts() ) : while ( $arr_posts->have_posts() ) : $arr_posts->the_post(); ?>

                <h2><?php the_title();?></h2>
                <p><?php the_content();?></p>

    <?php endwhile; endif; ?>

I've read online about AJAX but I'm not that great at JS development and I could't find a way to make it work.

phpjqueryajaxwordpresswhile-loop


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source

Related Questions