WordPress loadmore posts ajax without plugin

In this tutorial, I will walk you through how to implement “WordPress loadmore posts ajax without plugin”

Step 1 – Add the shortcode to functions.php

Add the following code to make shortcode into active theme’s functions.php file

/**
 * shortcode for listing blog posts
 * Author: Deepak anand
 */
add_shortcode('ajaxloadmoreblogdemo','ajaxloadmoreblogdemo');
function ajaxloadmoreblogdemo($atts, $content = null){
	ob_start();
	$atts = shortcode_atts(
        array(
			'post_type' => 'post',
			'initial_posts' => '4',
			'loadmore_posts' => '4',
		), $atts, $tag
    );
	$additonalArr = array();
	$additonalArr['appendBtn'] = true;
	$additonalArr["offset"] = 0; ?>
	<div class="dcsAllPostsWrapper"> 
		<input type="hidden" name="dcsPostType" value="<?=$atts['post_type']?>">
    	<input type="hidden" name="offset" value="0">
    	<input type="hidden" name="dcsloadMorePosts" value="<?=$atts['loadmore_posts']?>">
    	<div class="dcsDemoWrapper">
			<?php dcsGetPostsFtn($atts, $additonalArr); ?>
		</div>
	</div>
	<?php
    return ob_get_clean();
}

/**

* shortcode for listing blog posts

* Author: Deepak anand

add_shortcode('ajaxloadmoreblogdemo','ajaxloadmoreblogdemo');

function ajaxloadmoreblogdemo($atts, $content = null){

ob_start();

$atts = shortcode_atts(

array(

'post_type' => 'post',

'initial_posts' => '4',

'loadmore_posts' => '4',

), $atts, $tag

);

$additonalArr = array();

$additonalArr['appendBtn'] = true;

$additonalArr["offset"] = 0; ?>

<?php dcsGetPostsFtn($atts, $additonalArr); ?>

</div>

<?php

return ob_get_clean();

}

Note line number 23 in the above code. There is a call to function “dcsGetPostsFtn”.

Now we will define the same function. Add the following code the active theme’s functions.php again

function dcsGetPostsFtn($atts, $additonalArr=array()){ 
   	$args = array(
	    'post_type' => $atts['post_type'],
	    'posts_per_page' => $atts['initial_posts'],
	    'offset' => $additonalArr["offset"]
	);
	$the_query = new WP_Query( $args );
	$havePosts = true;
	if ( $the_query->have_posts() ) {
	    while ( $the_query->have_posts() ) {
	        $the_query->the_post(); ?>
	        <div class="loadMoreRepeat">
	        	<div class="innerWrap">
	    			<h2 class="card-title"><?=get_the_title()?></h2>
	        		<p class="card-text"><?php the_excerpt(); ?></p>
	        	</div>
		  	</div>
	        <?php
	    }
	} else {
	   $havePosts = false; 
	}
	wp_reset_postdata();
   	if($havePosts && $additonalArr['appendBtn'] ){ ?>
	   	<div class="btnLoadmoreWrapper">
	   		<a href="javascript:void(0);" class="btn btn-primary dcsLoadMorePostsbtn">Load More</a>
	  	</div>
	  	
	  	<!-- loader for ajax -->
	  	<div class="dcsLoaderImg" style="display: none;">
		    <svg version="1.1" id="L9" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 100 100" enable-background="new 0 0 0 0" xml:space="preserve" style="
		    color: #ff7361;">
			    <path fill="#ff7361" d="M73,50c0-12.7-10.3-23-23-23S27,37.3,27,50 M30.9,50c0-10.5,8.5-19.1,19.1-19.1S69.1,39.5,69.1,50">
			      <animateTransform attributeName="transform" attributeType="XML" type="rotate" dur="1s" from="0 50 50" to="360 50 50" repeatCount="indefinite"></animateTransform>
			  </path>
			</svg>
		</div>

	  	<p class="noMorePostsFound" style="display: none;">No More Posts Found</p>
    <?php
	}
}

function dcsGetPostsFtn($atts, $additonalArr=array()){

$args = array(

'post_type' => $atts['post_type'],

'posts_per_page' => $atts['initial_posts'],

'offset' => $additonalArr["offset"]

);

$the_query = new WP_Query( $args );

$havePosts = true;

if ( $the_query->have_posts() ) {

while ( $the_query->have_posts() ) {

$the_query->the_post(); ?>

</div>

<?php

}

} else {

$havePosts = false;

}

wp_reset_postdata();

if($havePosts && $additonalArr['appendBtn'] ){ ?>

</div>

color: #ff7361;">

</path>

</svg>

</div>

<p class="noMorePostsFound" style="display: none;">No More Posts Found</p>

<?php

}

Step 2 – Create & Enqueue custom js file

Its time to create and enqueue a custom js file which we will use to add our script to load more posts. First of all, simply create a file with the name loadmoreposts.js Â inside the js folder of your active theme.

Now add the following code in the active theme’s functions.php file to enqueue the loadmoreposts.js file.

/**
 * Enqueue scripts and styles for the front end.
 */
function dcsEnqueue_scripts() {
	wp_enqueue_script( 'dcsLoadMorePostsScript', get_template_directory_uri() . '/js/loadmoreposts.js', array( 'jquery' ), '20131205', true );
	wp_localize_script( 'dcsLoadMorePostsScript', 'dcs_frontend_ajax_object',
		array( 
			'ajaxurl' => admin_url( 'admin-ajax.php' )
		)
	);
}
add_action( 'wp_enqueue_scripts', 'dcsEnqueue_scripts' );

/**

* Enqueue scripts and styles for the front end.

function dcsEnqueue_scripts() {

wp_enqueue_script( 'dcsLoadMorePostsScript', get_template_directory_uri() . '/js/loadmoreposts.js', array( 'jquery' ), '20131205', true );

wp_localize_script( 'dcsLoadMorePostsScript', 'dcs_frontend_ajax_object',

array(

'ajaxurl' => admin_url( 'admin-ajax.php' )

)

);

}

add_action( 'wp_enqueue_scripts', 'dcsEnqueue_scripts' );

Step 3 – Add script to custom js file

Now open the loadmoreposts.js file and paste the following code to that file.

jQuery(document).ready(function(){
	jQuery(document).on('click','.dcsLoadMorePostsbtn',function(){
		var ajaxurl = dcs_frontend_ajax_object.ajaxurl;
		var dcsPostType = jQuery('input[name="dcsPostType"]').val();
		var offset = parseInt(jQuery('input[name="offset"]').val() );
		var dcsloadMorePosts = parseInt(jQuery('input[name="dcsloadMorePosts"]').val() );
		var newOffset = offset+dcsloadMorePosts;
		jQuery('.btnLoadmoreWrapper').hide();
		jQuery.ajax({
			type: "POST",
			url: ajaxurl,
			data: ({
				action: "dcsAjaxLoadMorePostsAjaxReq",
				offset: newOffset,
				dcsloadMorePosts: dcsloadMorePosts,
				postType: dcsPostType,
			}),
			success: function(response){
				if (!jQuery.trim(response)){ 
					// blank output
					jQuery('.noMorePostsFound').show();
				}else{
					// append to last div
					jQuery(response).insertAfter(jQuery('.loadMoreRepeat').last());
					jQuery('input[name="offset"]').val(newOffset);
					jQuery('.btnLoadmoreWrapper').show();
				}
			},
			beforeSend: function() {
				jQuery('.dcsLoaderImg').show();
			},
			complete: function(){
				jQuery('.dcsLoaderImg').hide();
			},
		});
	});
});

jQuery(document).ready(function(){

jQuery(document).on('click','.dcsLoadMorePostsbtn',function(){

var ajaxurl = dcs_frontend_ajax_object.ajaxurl;

var dcsPostType = jQuery('input[name="dcsPostType"]').val();

var offset = parseInt(jQuery('input[name="offset"]').val() );

var dcsloadMorePosts = parseInt(jQuery('input[name="dcsloadMorePosts"]').val() );

var newOffset = offset+dcsloadMorePosts;

jQuery('.btnLoadmoreWrapper').hide();

jQuery.ajax({

type: "POST",

url: ajaxurl,

data: ({

action: "dcsAjaxLoadMorePostsAjaxReq",

offset: newOffset,

dcsloadMorePosts: dcsloadMorePosts,

postType: dcsPostType,

}),

success: function(response){

if (!jQuery.trim(response)){

// blank output

jQuery('.noMorePostsFound').show();

}else{

// append to last div

jQuery(response).insertAfter(jQuery('.loadMoreRepeat').last());

jQuery('input[name="offset"]').val(newOffset);

jQuery('.btnLoadmoreWrapper').show();

}

beforeSend: function() {

jQuery('.dcsLoaderImg').show();

complete: function(){

jQuery('.dcsLoaderImg').hide();

});

Step 4 – define ajax callback function

Now to define the ajax callback function, add the following code to your active theme’s functions.php file

add_action("wp_ajax_dcsAjaxLoadMorePostsAjaxReq","dcsAjaxLoadMorePostsAjaxReq");
add_action("wp_ajax_nopriv_dcsAjaxLoadMorePostsAjaxReq","dcsAjaxLoadMorePostsAjaxReq");
function dcsAjaxLoadMorePostsAjaxReq(){
	extract($_POST);
	$additonalArr = array();
	$additonalArr['appendBtn'] = false;
	$additonalArr["offset"] = $offset;
	$atts["initial_posts"] = $dcsloadMorePosts;
	$atts["post_type"] = $postType;
	dcsGetPostsFtn($atts, $additonalArr);
	die();
}

add_action("wp_ajax_dcsAjaxLoadMorePostsAjaxReq","dcsAjaxLoadMorePostsAjaxReq");

add_action("wp_ajax_nopriv_dcsAjaxLoadMorePostsAjaxReq","dcsAjaxLoadMorePostsAjaxReq");

function dcsAjaxLoadMorePostsAjaxReq(){

extract($_POST);

$additonalArr = array();

$additonalArr['appendBtn'] = false;

$additonalArr["offset"] = $offset;

$atts["initial_posts"] = $dcsloadMorePosts;

$atts["post_type"] = $postType;

dcsGetPostsFtn($atts, $additonalArr);

die();

}

Step 5 – Add styling (optional)

This step is optional if you want to add your own styling.

/* load more posts demo styles */
.dcsDemoWrapper {
    display: flex;
    flex-wrap: wrap;
}
.dcsDemoWrapper .loadMoreRepeat {
    width: 50%;
    padding: 10px;
}
.dcsDemoWrapper .loadMoreRepeat .innerWrap {
    background: #fff;
    padding: 15px;
}
.btnLoadmoreWrapper {
    text-align: center;
    margin-top: 10px;
    width: 100%;
}
p.noMorePostsFound {
    text-align: center;
    width: 100%;
    margin-top: 20px;
    color: red;
    font-size: 18px;
}
svg {
  width: 100px;
  height: 100px;
  margin: 20px;
  display: inline-block;
}
.dcsLoaderImg {width: 100%;text-align: center;}

/* load more posts demo styles */

.dcsDemoWrapper {

display: flex;

flex-wrap: wrap;

}

.dcsDemoWrapper .loadMoreRepeat {

width: 50%;

padding: 10px;

}

.dcsDemoWrapper .loadMoreRepeat .innerWrap {

background: #fff;

padding: 15px;

}

.btnLoadmoreWrapper {

text-align: center;

margin-top: 10px;

width: 100%;

}

p.noMorePostsFound {

text-align: center;

width: 100%;

margin-top: 20px;

color: red;

font-size: 18px;

}

svg {

width: 100px;

height: 100px;

margin: 20px;

display: inline-block;

}

.dcsLoaderImg {width: 100%;text-align: center;}

Step 6 – Make a page and add shortcode

Now make a new page and simply add the following shortcode to the content of that page

[ajaxloadmoreblogdemo post_type="post" initial_posts="4" loadmore_posts="2"]

1	[ajaxloadmoreblogdemo post_type="post" initial_posts="4" loadmore_posts="2"]

In this shortcode, we have used the following attributes

post_type – This is used to define the post type for which you want to implement the load more functionality.
initial_posts – Set the amount for initial posts to load when page is rendered.
loadmore_posts – Set how many posts you want to append on each load more button click.

your WordPress load more posts ajax without plugin is ready. Feel free to comment if you have a suggestion for better code improvements and you can ask the questions in Our Questionsbank section