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

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

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.

Step 3 – Add script to custom js file

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

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

Step 5 – Add styling (optional)

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

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

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