How to Load More Posts in WordPress with jQuery

The way a WordPress website functions is just as important as how it looks, providing easy access to viewing more content in a seamless way can help improve the overall user experience. Loading more posts via jQuery helps provide a smooth transition and gives easy access to more content that will help the end user quickly find an article of interest. In this tutorial we will teach you how to easily load more posts on your WordPress website or blog utilizing the built in more post linking navigation and jQuery.

Step 1: Setting up the WordPress Post Loop Structure

In the first step we will need to set up the basic WordPress post loop and html structure.

PHP

<?php if (have_posts()) : ?>
<section id="posts">
  <?php while (have_posts()) : the_post(); ?>
    <article class="post”>Post Content</article>
  <?php endwhile; ?>
</section>
<?php endif;  ?>

Items to Note:

  • This is just an example on how to set up the structure, you may need to modify and adapt this structure to fit your needs.
  • Since this is just a basic example on how to set up the structure, we are not providing any CSS; you will need to style this according to your needs.
  • The ID of the post container (#posts) and the CLASS of the posts (.post) are important to note during Step 3 when referencing them with jQuery.

Step 2: Creating the WordPress More Posts Navigation

In Step 2 we are going to take our newly created WordPress loop structure and add in our navigation to view more posts. We are going to set this up so that it will only show if the number of pages exceeds 1.

PHP

<?php if (have_posts()) : ?>
  <section id="posts">
    <?php while (have_posts()) : the_post(); ?>
      <article class="post”>Post Content</article>
    <?php endwhile; ?>
  </section>
  <?php if ( $wp_query->max_num_pages > 1 ) : ?>
    <nav class="load_more">
      <?php next_posts_link( 'Load More' ); ?>
    </nav>
  <?php endif;  ?>
<?php endif;  ?>

CSS

.load_more{ 
display: block; 
clear: both; 
position: relative;
 }
.load_more a, .load_more .loader{ 
display: block; 
height: 90px; 
font-size: 16px; 
font-weight: bold; 
color: #fff;
text-align: center;
line-height: 90px;
background: #000;
overflow: hidden; 
position: relative; 
}
.load_more{ 
display: block; 
clear: both; 
position: relative; 
}
.load_more a:hover{ 
color: #999; 
}

Items to Note:

  • You should be able to click on the ‘Load More’ button and view the next page with more posts, we will fix this to load posts on the current page in the 3rd step by utilizing jQuery.
  • We are only using the next posts link because we are only going to be loading and adding more posts.
  • If you are not seeing a ‘Load More’ button make sure that you have enough posts to make extra pages and/or check the backend and adjust the amount of posts to show.
  • You can change the text of the button by changing the text ‘Load More’; just make sure it stays inside quotes.
  • We are only providing a basic styled ‘Load More’ button; you can modify and adapt the CSS to fit your needs.

Step 3: Loading More WordPress Posts with jQuery

In the third and final step we are going to utilize jQuery to get the next posts and load them underneath the bottom of our current posts so that they load on the same page.

PHP & jQuery

<?php if (have_posts()) : ?>
  <section id="posts">
    <?php while (have_posts()) : the_post(); ?>
      <article class="post”>Post Content</article>
    <?php endwhile; ?>
  </section>
  <?php if ( $wp_query->max_num_pages > 1 ) : ?>
    <nav class="load_more">
      <?php next_posts_link( 'Load More' ); ?>
    </nav>
  <script type="text/javascript">
  	  jQuery(document).ready(function(){
		  jQuery('.load_more a').live('click', function(e){
			  e.preventDefault();
			  var link = jQuery(this).attr('href');
			  jQuery('.load_more').html('<span class="loader">Loading More Posts...</span>');
			  $.get(link, function(data) {
				  var post = $("#posts .post ", data);
				  $('#posts').append(post);
			  });
			  jQuery('.load_more').load(link+' .load_more a');
		  });
	  });
    </script>
  <?php endif;  ?>
<?php endif;  ?>

Items to Note:

  • This part of the tutorial relies on the jQuery JavaScript library in order to function; you must either link directly to jQuery or download the latest version and upload it to your server. You can download the latest version of jQuery HERE.
  • As we mentioned in the Step 1 notes make sure that you are referencing the correct post ID and CLASS.
  • You can change the text when the posts are loading where the loader is created and it says ‘Loading More Posts…’
  • If you are comfortable with CSS you can add a preloader or you can even incorporate the one from our tutorial ‘Part 1: How to Code a Pure CSS3 Preloader with Animations

Full Code

PHP & jQuery

<?php if (have_posts()) : ?>
  <section id="posts">
    <?php while (have_posts()) : the_post(); ?>
      <article class="post”>Post Content</article>
    <?php endwhile; ?>
  </section>
  <?php if ( $wp_query->max_num_pages > 1 ) : ?>
    <nav class="load_more">
      <?php next_posts_link( 'Load More' ); ?>
    </nav>
  <script type="text/javascript">
  	  jQuery(document).ready(function(){
		  jQuery('.load_more a').live('click', function(e){
			  e.preventDefault();
			  var link = jQuery(this).attr('href');
			  jQuery('.load_more').html('<span class="loader">Loading More Posts...</span>');
			  $.get(link, function(data) {
				  var post = $("#posts .post ", data);
				  $('#posts').append(post);
			  });
			  jQuery('.load_more').load(link+' .load_more a');
		  });
	  });
    </script>
  <?php endif;  ?>
<?php endif;  ?>

CSS

.load_more{ 
display: block; 
clear: both; 
position: relative;
 }
.load_more a, .load_more .loader{ 
display: block; 
height: 90px; 
font-size: 16px; 
font-weight: bold; 
color: #fff;
text-align: center;
line-height: 90px;
background: #000;
overflow: hidden; 
position: relative; 
}
.load_more{ 
display: block; 
clear: both; 
position: relative; 
}
.load_more a:hover{ 
color: #999; 
}

Troubleshooting

If you are having problems getting this tutorial to work please reread the tutorial and try again, if you still cannot get it to work please leave us a comment below and we will respond as soon as possible. Please do not email us with problems regarding this tutorial, only comments will be responded to.