In this article, you will learn how to change the WordPress pagination system to the Load more button on your desire pages.
For this, we will not use any plugin and all this work will be done by automatically injecting a jQuery script in the WordPress pages.

Add load more button in WordPress without plugin

Step 1.Add The Following Code to the functions.php File

In the WordPress dashboard, go to Appearance ➡ Theme File Editor and copy the following code into the theme’s functions.php file and save it.

add_action( 'wp_footer', function () {   if( !is_admin() ) {  ?>
<script id="malinky-ajax-pagination-main-js-js-extra">
if ( document.querySelector("#red-ajax-pagination") ) {
var malinkySettings = {"1":{"theme_defaults":"Twenty Sixteen","posts_wrapper":posts_wrapper,"post_wrapper":post_wrapper,"pagination_wrapper":pagination_wrapper,"next_page_selector":next_page_selector,"paging_type":"load-more","infinite_scroll_buffer":"20","ajax_loader":"<img src=\"https:\/\/svgshare.com\/i\/nQm.svg\" alt=\"AJAX Loader\" \/>","load_more_button_text":"Load More","loading_more_posts_text":"Loading...","callback_function":""}}};
</script>
<script>
if ( document.querySelector("#red-ajax-pagination") ) {
!function(){function a(a,t){t=t||{bubbles:!1,cancelable:!1,detail:void 0};var n=document.createEvent("CustomEvent");return n.initCustomEvent(a,t.bubbles,t.cancelable,t.detail),n}return"function"!=typeof window.CustomEvent&&(console.log("hi"),a.prototype=window.Event.prototype,void(window.CustomEvent=a))}();var MalinkyAjaxPaging=function($){var init=function(mapVars){function debounce(a,t,n){var o;return function(){var i=this,e=arguments,p=function(){o=null,n||a.apply(i,e)},m=n&&!o;clearTimeout(o),o=setTimeout(p,t),m&&a.apply(i,e)}}var mymapAjaxLoader=mapVars.mapAjaxLoader,mymapCssLoadMore=mapVars.mapCssLoadMore,mymapCssLoadMoreButton=mapVars.mapCssLoadMoreButton,mymapInfiniteScrollBuffer=mapVars.mapInfiniteScrollBuffer,mymapLoadingTimer="",mymapLoadingMorePostsText=mapVars.mapLoadingMorePostsText,mymapLoadMoreButtonText=mapVars.mapLoadMoreButtonText,mymapPaginationClass=mapVars.mapPaginationClass,mymapPaginationClassPixelsToDocBottom=mapVars.mapPaginationClassPixelsToDocBottom,mymapPagingType=mapVars.mapPagingType,mymapPostsWrapperClass=mapVars.mapPostsWrapperClass,mymapPostClass=mapVars.mapPostClass,mymapNextPageSelector=mapVars.mapNextPageSelector,mymapNextPageUrl=mapVars.mapNextPageUrl,mymapPaginatorCount=mapVars.mapPaginatorCount,mymapUserCallback=mapVars.mapUserCallback,infiniteScrollRunning=!1,mapLoadPosts=function(){$.ajax({type:"GET",url:mymapNextPageUrl,dataType:"html",beforeSend:function(){var a=new CustomEvent("malinkyLoadPostsStart");document.dispatchEvent(a)},success:function(a){var t=$.parseHTML(a),n=($(t).find(mymapPostsWrapperClass),mapPaginatorTotalCount(t));mapAddPaginatorCount(t,n);var o=$(t).find(mymapPostsWrapperClass+'[data-paginator-count="'+mymapPaginatorCount+'"] '+mymapPostClass),i=$(mymapPostsWrapperClass+'[data-paginator-count="'+mymapPaginatorCount+'"] '+mymapPostClass).last(),e=$(mymapPostsWrapperClass+'[data-paginator-count="'+mymapPaginatorCount+'"] '+mymapPostClass);if(i.after(o),"infinite-scroll"!=mymapPagingType&&"load-more"!=mymapPagingType||(1==n?mapIsLastPage(t,mymapNextPageSelector)?mymapNextPageUrl=$(t).find(mymapNextPageSelector).attr("href"):($('#malinky-ajax-pagination-button[data-paginator-count="'+mymapPaginatorCount+'"]').parent().remove(),window.removeEventListener("scroll",mapInfiniteScroll)):mapIsLastPage(t,mymapNextPageSelector+'[data-paginator-count="'+mymapPaginatorCount+'"]')?mymapNextPageUrl=$(t).find(mymapNextPageSelector+'[data-paginator-count="'+mymapPaginatorCount+'"]').attr("href"):($('#malinky-ajax-pagination-button[data-paginator-count="'+mymapPaginatorCount+'"]').parent().remove(),window.removeEventListener("scroll",mapInfiniteScroll))),"pagination"==mymapPagingType){e.remove(),history.pushState(null,null,mymapNextPageUrl);var p=$(t).find(mymapPaginationClass+'[data-paginator-count="'+mymapPaginatorCount+'"]').first();$(mymapPaginationClass+'[data-paginator-count="'+mymapPaginatorCount+'"]').replaceWith(p)}mapLoaded()},error:function(a,t){mapFailed()},complete:function(requestObj){var malinkyloadPostsCompleteEvent=new CustomEvent("malinkyLoadPostsComplete");document.dispatchEvent(malinkyloadPostsCompleteEvent),"pagination"==mymapPagingType&&$("body,html").animate({scrollTop:$(mymapPostsWrapperClass+'[data-paginator-count="'+mymapPaginatorCount+'"]').offset().top-150},400),"infinite-scroll"==mymapPagingType&&(infiniteScrollRunning=!1),"load-more"==mymapPagingType&&$('#malinky-ajax-pagination-button[data-paginator-count="'+mymapPaginatorCount+'"]').removeClass("malinky-load-more__button-disable");var mapResponse=$.parseHTML(requestObj.responseText),paginatorTotalCountAjax=mapPaginatorTotalCount(mapResponse);mapAddPaginatorCount(mapResponse,paginatorTotalCountAjax);var $mapLoadedPosts=$(mapResponse).find(mymapPostsWrapperClass+'[data-paginator-count="'+mymapPaginatorCount+'"] '+mymapPostClass);!function(loadedPosts,url){eval(mymapUserCallback)}($mapLoadedPosts,this.url)}})},mapPaginatorTotalCount=function(a){var t=0;for(var n in malinkySettings)$(a).find(malinkySettings[n].posts_wrapper).length&&$(a).find(malinkySettings[n].post_wrapper).length&&$(a).find(malinkySettings[n].pagination_wrapper).length&&t++;return t},mapAddPaginatorCount=function(a,t){var n=1;for(var o in malinkySettings)$(a).find(malinkySettings[o].posts_wrapper).length&&$(a).find(malinkySettings[o].post_wrapper).length&&$(a).find(malinkySettings[o].pagination_wrapper).length&&(1==t?($(a).find(malinkySettings[o].posts_wrapper).attr("data-paginator-count",n),$(a).find(malinkySettings[o].pagination_wrapper).attr("data-paginator-count",n)):($(a).find(malinkySettings[o].posts_wrapper).attr("data-paginator-count",n),$(a).find(malinkySettings[o].posts_wrapper+" "+malinkySettings[o].pagination_wrapper).attr("data-paginator-count",n),$(a).find(malinkySettings[o].posts_wrapper+" "+malinkySettings[o].next_page_selector).attr("data-paginator-count",n),n++))},mapIsLastPage=function(a,t){return $(a).find(t).length},mapAddLoader=function(){$(mymapPaginationClass+'[data-paginator-count="'+mymapPaginatorCount+'"]').last().before('<div class="malinky-ajax-pagination-loading" data-paginator-count="'+mymapPaginatorCount+'">'+mymapAjaxLoader+"</div>")},mapLoading=function(){$('.malinky-ajax-pagination-loading[data-paginator-count="'+mymapPaginatorCount+'"]').show(),"load-more"!=mymapPagingType&&"infinite-scroll"!=mymapPagingType||$('#malinky-ajax-pagination-button[data-paginator-count="'+mymapPaginatorCount+'"]').text(mymapLoadingMorePostsText)},mapLoaded=function(){$('.malinky-ajax-pagination-loading[data-paginator-count="'+mymapPaginatorCount+'"]').hide(),"load-more"!=mymapPagingType&&"infinite-scroll"!=mymapPagingType||$('#malinky-ajax-pagination-button[data-paginator-count="'+mymapPaginatorCount+'"]').text(mymapLoadMoreButtonText),clearTimeout(mymapLoadingTimer)},mapFailed=function(){$('.malinky-ajax-pagination-loading[data-paginator-count="'+mymapPaginatorCount+'"]').hide(),clearTimeout(mymapLoadingTimer)},mapInfiniteScroll=debounce(function(){if(!infiniteScrollRunning){var a=($(document).height()-$(window).scrollTop()-$(window).height(),$(mymapPostsWrapperClass+'[data-paginator-count="'+mymapPaginatorCount+'"]').offset().top),t=$(mymapPostsWrapperClass+'[data-paginator-count="'+mymapPaginatorCount+'"]').outerHeight();$(window).height()+$(window).scrollTop()+mymapInfiniteScrollBuffer>a+t&&(infiniteScrollRunning=!0,mapLoading(),mapLoadPosts())}},250);"infinite-scroll"==mymapPagingType?$(mymapNextPageSelector+'[data-paginator-count="'+mymapPaginatorCount+'"]').attr("href")&&(mapAddLoader(),$(mymapPaginationClass+'[data-paginator-count="'+mymapPaginatorCount+'"]').remove(),window.addEventListener("scroll",mapInfiniteScroll)):"load-more"==mymapPagingType?$(mymapNextPageSelector+'[data-paginator-count="'+mymapPaginatorCount+'"]').attr("href")&&($(mymapPaginationClass+'[data-paginator-count="'+mymapPaginatorCount+'"]').last().after('<div class="malinky-load-more"><a href="'+mymapNextPageUrl+'" id="malinky-ajax-pagination-button" class="malinky-load-more__button" data-paginator-count="'+mymapPaginatorCount+'">'+mymapLoadMoreButtonText+"</a></div>"),mapAddLoader(),$(mymapPaginationClass+'[data-paginator-count="'+mymapPaginatorCount+'"]:not(:has(>a#malinky-ajax-pagination-button[data-paginator-count="'+mymapPaginatorCount+'"]))').remove(),$('#malinky-ajax-pagination-button[data-paginator-count="'+mymapPaginatorCount+'"]').click(function(a){a.preventDefault(),$(this).addClass("malinky-load-more__button-disable"),mymapLoadingTimer=setTimeout(mapLoading,750),mapLoadPosts()})):"pagination"==mymapPagingType&&(mapAddLoader(),$(document).on("click",mymapPaginationClass+'[data-paginator-count="'+mymapPaginatorCount+'"] a',function(a){a.preventDefault(),mymapLoadingTimer=setTimeout(mapLoading,750),mymapNextPageUrl=a.currentTarget.href,mapLoadPosts()}),window.addEventListener("popstate",function(a){mymapNextPageUrl=document.URL,mapLoadPosts()}))},setUp=function(){var a=0,t=1,n=0;for(var o in malinkySettings)$(malinkySettings[o].posts_wrapper).length&&$(malinkySettings[o].post_wrapper).length&&$(malinkySettings[o].pagination_wrapper).length&&$(malinkySettings[o].next_page_selector).length&&n++;for(var o in malinkySettings)if($(malinkySettings[o].posts_wrapper).length&&$(malinkySettings[o].post_wrapper).length&&$(malinkySettings[o].pagination_wrapper).length&&$(malinkySettings[o].next_page_selector).length){1==n?($(malinkySettings[o].posts_wrapper).attr("data-paginator-count",t),$(malinkySettings[o].pagination_wrapper).attr("data-paginator-count",t),$(malinkySettings[o].next_page_selector).attr("data-paginator-count",t)):($(malinkySettings[o].posts_wrapper).attr("data-paginator-count",t),$(malinkySettings[o].posts_wrapper+" "+malinkySettings[o].pagination_wrapper).attr("data-paginator-count",t),$(malinkySettings[o].posts_wrapper+" "+malinkySettings[o].next_page_selector).attr("data-paginator-count",t),t++);var i={mapAjaxLoader:malinkySettings[o].ajax_loader,mapCssLoadMore:malinkySettings[o].malinky_load_more,mapCssLoadMoreButton:malinkySettings[o].malinky_load_more_button,mapInfiniteScrollBuffer:parseInt(malinkySettings[o].infinite_scroll_buffer),mapLoadingTimer:"",mapLoadingMorePostsText:malinkySettings[o].loading_more_posts_text,mapLoadMoreButtonText:malinkySettings[o].load_more_button_text,mapPaginationClass:malinkySettings[o].pagination_wrapper,mapPagingType:malinkySettings[o].paging_type,mapPostsWrapperClass:malinkySettings[o].posts_wrapper,mapPostClass:malinkySettings[o].post_wrapper,mapNextPageSelector:malinkySettings[o].next_page_selector,mapPaginatorCount:++a,mapUserCallback:malinkySettings[o].callback_function};i.mapPaginationClassPixelsToDocBottom=jQuery(document).height()-jQuery(i.mapPaginationClass).offset().top,1==n?i.mapNextPageUrl=$(malinkySettings[o].next_page_selector).attr("href"):i.mapNextPageUrl=$(malinkySettings[o].posts_wrapper+" "+malinkySettings[o].next_page_selector).attr("href"),init(i);var e=new CustomEvent("malinkyPaginationInitialized");document.dispatchEvent(e)}};return setUp(),{setUp:setUp}}(jQuery); }
</script>
<style>
.malinky-ajax-pagination-loading{display:none;margin:15px auto;text-align:center}.malinky-ajax-pagination-loading img{width:50px;height:50px,margin: auto;}.malinky-load-more{text-align:center}.malinky-load-more__button-disable{pointer-events:none} a#malinky-ajax-pagination-button {
background-color: #0079ad;
color: white; padding: 13px 35px; border-radius: 5px;}
div.malinky-load-more:hover {transform: translateY(-2px);}
div.malinky-load-more {transition: all 0.3s ease; margin-top: 60px; margin-bottom: 50px;}
div.malinky-ajax-pagination-loading img {margin: auto;}
</style>
<?php  } } );

Step 2.Setting up CSS selector script

At this stage, we need to customize the following script and insert it in the desired pages.

<script id="red-ajax-pagination" >

var posts_wrapper = "";   // The selector that wraps all of the posts/products.
var post_wrapper = 	"";  // The selector of an individual post/product.
var pagination_wrapper = ""; // The selector of the post/product navigation.
var next_page_selector = ""; // The selector of the navigation next link.

</script>

Now go to the page where you want to place the “load more” button and complete the above four variables according to the explanations below.

In the “posts_wrapper” variable, you should put the CSS selector of all the posts or products.
For the image below this variable will be “div.entries“.

In the “post_wrapper” variable, you should put the CSS selector of single post or products. Remember to only select classes that are same in all cards.
For the image below this variable will be “article.entry-card.type-post“.

The “pagination_wrapper” variable is self explanatory.
For the image below this variable will be “nav.ct-pagination“.

The “next_page_selector” variable is self explanatory.
For the image below this variable will be “a.next“.

Step 3.Insert the CSS selector script On the desired pages

Now we have to put the script we prepared in the previous step on the page with pagination.
To do this, you can manually put this code on the page with the help of the “Custom HTML” block (of course, if your theme allows you to do this) or you can do it programmatically.

I have a full article on how to insert codes in WordPress pages that you can read through the link below.
How to add PHP code in WordPress [without plugins]

If you have used custom post type on your site, please read the article above, but if your website is a simple blog or you have a WooCommerce online store, do the following to insert the script.

Step 3.1. Insert the selector script Into the blog archive pages

Add The Following Code to the functions.php File. Remember to fill in the required variables as described in step two.

add_filter( 'wp_head', function () {  if( !is_woocommerce() && !is_admin() && !is_single() ) {  ?>

<script id="red-ajax-pagination" >
var posts_wrapper = "";   // The selector that wraps all of the posts.
var post_wrapper = 	"";  // The selector of an individual post.
var pagination_wrapper = ""; // The selector of the post navigation.
var next_page_selector = ""; // The selector of the navigation next link.
</script>

<?php }	} );

Using the above code, the “load more” button will appear instead of the WordPress pagination on the archive posts, tags and categories pages.

Step 3.2. Insert the selector script into the product archive pages

Add The Following Code to the functions.php File. Remember to fill in the required variables as described in step two.

add_filter( 'wp_head', function () {  if( is_woocommerce() && !is_product() ) {  ?>

<script id="red-ajax-pagination" >
var posts_wrapper = "";   // The selector that wraps all of the products.
var post_wrapper = "";  // The selector of an individual product.
var pagination_wrapper = ""; // The selector of the product navigation.
var next_page_selector = ""; // The selector of the navigation next link.
</script>

<?php }	} );

Using the above code, the “load more” button will appear instead of the WordPress pagination on the shop page, product tags and product categories pages.

Add a Load More Button in Divi Blog Module

This section will show you how to add the “Load More” button in the Divi Blog module.

Step 1.Disable the Pagination and the CSS Class to it

Next, go to the Divi Builder, add a new Blog module, or select the existing one.

On the module settings, navigate to the Content tab -> Elements. Afterward, set the Show Pagination to NO.

Change the Post Count to 1000.

Go to the Advanced tab -> CSS ID & Classes on the module settings. Afterward, add the ap_load_more_blog_class CSS class name to the CSS Class input field.

Step 2.Add the Button Module

Below the Blog module, add a Button module and tweak and style up your load more button as you like.

On the Button module settings, navigate to the Advanced tab -> CSS ID & Classes. Afterward, add the ap_load_more_button_id CSS ID to the CSS ID field.

Step 3.Add the JavaScript Snippet

Go to the Divi Theme Options page (Divi -> Theme Options) and navigate to the Integration tab. Next, paste the JavaScript snippet below into the Add code to the < head > of your blog field.

Show code

This code is for WPCookie PLUS+ members only.

Join WPCookie PLUS+

Already a member? Log in here

Once the JavaScript snippet is added, apply the changes by clicking the Save Changes button.

If this article is difficult for you to read in text, you can watch the video version below.