Using AJAX to Load More Information Into a Page

Programmers

AJAX is one of my favorite techniques to work with. While it takes more work, the end result is worth the effort.

AJAX is the art of exchanging data with a server, and updating parts of a web page – without reloading the whole page. – w3schools

Using AJAX to Load More Information Into a PageIn this tutorial, I’m going to show you how to load additional blog posts into a page without reloading the web page. The basic setup below, though, can be used to reload anything on your site, provided the PHP coding in your final page works.

Setup the Initial Page

We’ll obviously need some sort of page to start with. The coding below is going to pull the WordPress posts using the loop and insert them into a simple layout.

<div id="blogArticles">
<?php while (have_posts()) : the_post();  ?>
<article class="contenttext"> 
<?php
    echo '<h3>' . the_title() . '</h3>';
    echo get_the_excerpt();
?>
</article>
<?php endwhile; ?>
</div>
<button id="loadMore">Load More</button>

We don’t have any CSS yet for the page, so it’s obviously going to be very very simple: just a title and an excerpt for each post within a Article class called “contenttext”.

Note the the entire loop (starting in line 2 above) is contained within a Div called “blogArticles”. At the button, we added a button with an ID of “loadMore” for when the user would like to see more articles.

Feel free to add any additional CSS as you’d like. Remember, don’t use inline CSS.

Create the jQuery

Next we’ll need to create a little jQuery function that handles loading more articles. We’ll be attaching this function to when the user clicks on the button “loadMore”.

var page = 1;
$('#loadMore').click( function(){
    $('#blogArticles').load('/fileLoop.php?page=' + page);
    page++;
}); 

Whenever the user clicks that button, our jQuery will find this php file called “fileLoop.php” and load the contents into the page. Since we don’t want the page to reload the same information, we need to pass a variable that tells the loop the offset – hence the “page” variable.

We start the page variable at 1, since we’re on the first page of results. Each time the user clicks the button, we’ll be sending the current page number to the loop. In WordPress, when you create a new Query, you can set the “offset” is, or how many items the query skips before it starts. See more about this below.

The Loop – PHP page

Now let’s take a look at the actual PHP page we’re loading each time, labeled above as fileLoop.php.

$page = $_GET['page'];
$postsPerPage = 15;
$the_query = new WP_Query(array( 'posts_per_page' =>$postsPerPage, 'offset' => $page*$postsPerPage));

We’ll get the page variable we passed (line 1), set the number of posts we want to show up (line 2), and then run a new query. The offset is probably the most confusing item here. When we use WordPress’s built-in wp_query function, we have the option of telling it how many records to skip over in the beginning.

Our first page loaded 15 posts. This loop will load another 15. But we don’t want the initial 15, so we multiple the page we’re on (1) times (*) the number of posts per page (15). So the offset will be 15. WordPress will then start at record number 16 and return posts 16 through 30.

Keep in mind that if your settings in WordPress load 10 posts per page, but you set this to loading 15 posts each time, you’ll be missing 5 posts (numbers 10-15). If you want the original number of posts to different from the number of posts you AJAX load each time, you’ll need to do a little additional “if-else” condition for the first time the user clicks the load more button.

Next, take that loop we had before, and add it to this page:

<?php while (have_posts()) : the_post();  ?>
<article class="contenttext"> 
<?php
    echo '<h3>' . the_title() . '</h3>';
    echo get_the_excerpt();
?>
</article>
<?php endwhile; ?>

That’s it!

Want to see it in action? Check out the Blog page on my site.

Comments