Load More Entries: A User-Friendly Approach to Providing Access to Older Posts

Whether programmer by trade, ‘hack’ by chance, or technologically clueless at heart, WordPress offers bloggers the ability to easily customize and manage a site that caters to personal style, and user need. One of the great customizations that even a WordPress beginner can add to help create a better user experience for their blog is a “load more entries” feature.

A load more entries feature is basically a link or button, which appears at the bottom of a blog’s feed and allows users to instantly access older entries or posts. This sort of button has been one of the iconic features included in WPtouch and WPtouch Pro going back to the 1.0 release and has also been implemented on the BraveNewCode blog. So why is it worth taking the time to add to your blog?

A load more entries feature enables users quick access to more content (In more ways than one).
A load more entries feature enables users to make their own decisions when navigating a site (Users tend to prefer this option much more than when designers make decisions for them… I know I do).
A load more entries feature replaces the WordPress standard “previous posts” link (More seamless, less disruptive).

The most basic benefit of the load more entries feature is fast access to content. The presence of this link or button enables users to get their hands on more of a blog’s post content quickly and easily, while helping the blogger maintain a manageable amount of default content in the blog’s feed. In effect, this also allows users to quickly access the important content often stored below a blog’s feed in the footer – without having to scroll past a ton of blog posts in the meantime.

This is where the user decision-making comes in. Users are allowed access to more info, if they want it, by simply clicking the load more entries link provided. But naturally, some users will be more interested in finding general information and resources, or seeing all of what a site has to offer, rather than diving straight into more entries or posts. The load more entries feature allows these individuals to navigate through the site in its entirety by simply ignoring the load more entries link. In other words, there’s no chance of someone missing out on the info in the footer of your site because they can’t get past all your blog posts; there’s no worry about infinite scroll slowing their roll.

The load more entries feature also replaces the standard WordPress “previous posts” link. You might be wondering, “what’s wrong with this link, and isn’t “load more entries” just a fancy way of saying the same thing?” The reason it’s worth implementing is not because of the verbiage, but because it’s a much slicker way of actually loading the previous posts. Out of the box, the “previous posts” link will in fact, load more of a blog’s content, but unfortunately, it refreshes the page while doing so. The load more entries feature will load more posts on the same page the user is on without refreshing it, which makes the process much more seamless and much less disruptive.

Overall, the load more entries feature is a pretty simple concept boasting benefits of seamlessness, happy users and better access to blog content. So what are we waiting for? Let’s add it to your blog! We’ll use the code featured in an awesome tutorial written by Michael Martin to do so.

Michael’s tutorial shows WordPress users how to implement the load more entries feature to a blog by creating a simple WordPRess plugin. You can feel free to check out the Load Next WordPress Posts with AJAX tutorial in its entirety by visiting problogdesign.com, but here’s a summary broken down into three quick steps.

Create the necessary folders
Create the necessary files
Save, activate and tweak to your liking!

1. Create the necessary folders
Start by opening up your favorite FTP program and creating a folder in your /plugins directory called pbd-ajax-load-posts. After doing so, create two more folders, one called css and one called js. Place both css and js inside of the pbd-ajax-load-posts folder.

2. Create the necessary files
Open your favorite text editor, paste the following code into it, and save the file as pbd-ajax-load-posts.php in the pbd-ajax-load-posts folder you created in step 1.

<?php
/**
 * Plugin Name: PBD AJAX Load Posts
 * Plugin URI: http://www.problogdesign.com/
 * Description: Load the next page of posts with AJAX.
 * Version: 0.1
 * Author: Pro Blog Design
 * Author URI: http://www.problogdesign.com/
 */
 
 /**
  * Initialization. Add our script if needed on this page.
  */
 function pbd_alp_init() {
 	global $wp_query;
 
 	// Add code to index pages.
 	if( !is_singular() ) {	
 		// Queue JS and CSS
 		wp_enqueue_script(
 			'pbd-alp-load-posts',
 			plugin_dir_url( __FILE__ ) . 'js/load-posts.js',
 			array('jquery'),
 			'1.0',
 			true
 		);
 		
 		wp_enqueue_style(
 			'pbd-alp-style',
 			plugin_dir_url( __FILE__ ) . 'css/style.css',
 			false,
 			'1.0',
 			'all'
 		);
 		
 	
 		
 		// What page are we on? And what is the pages limit?
 		$max = $wp_query->max_num_pages;
 		$paged = ( get_query_var('paged') > 1 ) ? get_query_var('paged') : 1;
 		
 		// Add some parameters for the JS.
 		wp_localize_script(
 			'pbd-alp-load-posts',
 			'pbd_alp',
 			array(
 				'startPage' => $paged,
 				'maxPages' => $max,
 				'nextLink' => next_posts($max, false)
 			)
 		);
 	}
 }
 add_action('template_redirect', 'pbd_alp_init');
 
   ?>

Open a new file in your text editor, paste the following code into it, and save the file as load-posts.js and save it in the js folder you created in step 1.

jQuery(document).ready(function($) {

	// The number of the next page to load (/page/x/).
	var pageNum = parseInt(pbd_alp.startPage) + 1;
	
	// The maximum number of pages the current query can return.
	var max = parseInt(pbd_alp.maxPages);
	
	// The link of the next page of posts.
	var nextLink = pbd_alp.nextLink;
	
	/**
	 * Replace the traditional navigation with our own,
	 * but only if there is at least one page of new posts to load.
	 */
	if(pageNum <= max) {
		// Insert the "More Posts" link.
		$('#content')
			.append('')
			.append('Load More Posts');
			
		// Remove the traditional navigation.
		$('.navigation').remove();
	}
	
	
	/**
	 * Load new posts when the link is clicked.
	 */
	$('#pbd-alp-load-posts a').click(function() {
	
		// Are there more posts to load?
		if(pageNum <= max) {
		
			// Show that we're working.
			$(this).text('Loading posts...');
			
			$('.pbd-alp-placeholder-'+ pageNum).load(nextLink + ' .post',
				function() {
					// Update page number and nextLink.
					pageNum++;
					nextLink = nextLink.replace(/\/page\/[0-9]?/, '/page/'+ pageNum);
					
					// Add a new placeholder, for when user clicks again.
					$('#pbd-alp-load-posts')
						.before('')
					
					// Update the button message.
					if(pageNum <= max) {
						$('#pbd-alp-load-posts a').text('Load More Posts');
					} else {
						$('#pbd-alp-load-posts a').text('No more posts to load.');
					}
				}
			);
		} else {
			$('#pbd-alp-load-posts a').append('.');
		}	
		
		return false;
	});
});

Open a new file in your text editor, paste the following code into it, and save the file as style.css in the css folder you created in step 1.

#pbd-alp-load-posts a:link, #pbd-alp-load-posts a:visited {
	display: block;
	text-align: center;
	padding: 4px 0;
	color: #444;
	text-decoration: none;
	
	/** Rounded Corners **/
	-moz-border-radius: 8px;
	border-radius: 8px;
	
	/** Drop shadow **/
	-moz-box-shadow: 1px 1px 1px #999;
	-webkit-box-shadow: 1px 1px 1px #999;
	box-shadow: 1px 1px 1px #999;
	
	/** Gradients : http://css-tricks.com/css3-gradients/ */
	/* fallback */
	background-color: #f1f1f1;
	
	/* Firefox 3.6+ */
	background: -moz-linear-gradient(100% 100% 90deg, #e4e3e3, #f1f1f1);
	
	/* Safari 4-5, Chrome 1-9 */
	/* -webkit-gradient(,  [, ]?,  [, ]? [, ]*) */
	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#f1f1f1), to(#e4e3e3));
	
	/* Safari 5.1+, Chrome 10+ */
	background: -webkit-linear-gradient(#f1f1f1, #e4e3e3);
	
	/* Opera 11.10+ */ background: -o-linear-gradient(#f1f1f1, #e4e3e3);
}

#pbd-alp-load-posts a:hover, #pbd-alp-load-posts a:active {
	/** Drop shadow **/
	-moz-box-shadow: 1px 1px 1px #bbb;
	-webkit-box-shadow: 1px 1px 1px #bbb;
	box-shadow: 1px 1px 1px #bbb;

	/** Gradients : http://css-tricks.com/css3-gradients/ */
	/* fallback */
	background-color: #f5f5f5;
	
	/* Firefox 3.6+ */
	background: -moz-linear-gradient(100% 100% 90deg, #eaeaea, #f5f5f5);
	
	/* Safari 4-5, Chrome 1-9 */
	/* -webkit-gradient(,  [, ]?,  [, ]? [, ]*) */
	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#f5f5f5), to(#eaeaea));
	
	/* Safari 5.1+, Chrome 10+ */
	background: -webkit-linear-gradient(#f1f1f1, #eaeaea);
	
	/* Opera 11.10+ */ background: -o-linear-gradient(#f5f5f5, #eaeaea);
}

3. Save, activate and tweak to your liking
Simply save your work using your FTP program, navigate to your WordPress Dashboard and activate the plugin from the Plugins tab. The load more entries button should now be present at the end of your blog feed. Remember that you can tweak any of these files to your liking. For instance, altering the style.css file can change the appearance of the load more entries button, while altering the load-posts.js file can change the button’s text.

This article was written by BraveNewCode community member and guest contributor, Jeff Chenoweth. Connect with Jeff on Twitter at @mrjeffchenoweth

Are you interested in writing a guest post for our site? If so, contact us via our contact form.