Ajax Load More 3.7

Version 3.7.0 of Ajax Load More was released yesterday. This point release focused on some major code refactoring to improve the overall health of the plugin as well as developing a solution to help with search indexing of Ajax content.

Keep reading to find out what’s new in 3.7 and what’s coming up in the next release.

🔥 What’s New in 3.7

ALM_LOCALIZE Class

The ALM_LOCALIZE class has a set of methods that allow Ajax Load More variables and shortcode parameters to be written to the page and accessed as JavaScript variables.

// Results
var ajax_load_more_vars = {
	"id" : "ajax-load-more",
	"total_posts" : "18",
	"query" : {		
		'post_type' : 'post',
		'posts_per_page' : '5',
		'category' : 'design'
	}	
};

This class is important for the growth of the plugin because it opens up new opportunities to use Ajax Load More in React and Vue applications. In the near future I’ll be putting together a tutorial on building a React app using Ajax Load More and the REST API.

Improved Search Indexing

The Search Engine Optimization add-on received a major overhaul with the addition of <noscript/> support for improved search indexing and users without JavaScript enabled.

I know what you’re thinking… It’s 2018 and JavaScript is taking over the web, Google and the other search engines must be capable of indexing content without requiring <noscript/> tags, right?

¯\_(ツ)_/¯

There is no definitive answer to this. Google says their crawler is capable of executing JavaScript but from my testing using the Google Search Console it was clear that content being loaded with Ajax Load More was not being rendered by Googlebot. If it’s not being rendered, it also means it’s not being indexed.

How It Works

When a user enables the Search Engine Optimization addon, an initial server-side query is dispatched and the results are rendered in a <noscript/> element. This makes the content accessible to Googlebot and other search crawlers without requiring JavaScript to be executed.

Along with this initial query, a numbered pagination is also created within the same <noscript/> element. This provides a way for the search crawlers to easily navigate through pages for indexing.

Note: Both the <noscript/> query and initial Ajax query use the same shortcode parameters, container elements and class names so indexed content is identical to what’s being shown on screen.

Paged URLs

When a user requests a paged URL (website.com/page/5/) only the posts that are relevant to the current page are rendered in the <noscript/> element.

For example, if you were to load page/3 of my blog. You’ll notice that three pages worth of content has been loaded, however, the <noscript/> element contains only the four posts that would be normally be found on page/3.

Other Improvements and Bug Fixes

• UPDATE – Updated core Ajax Load More query and Preloaded addon query to use the new ALM_QUERY_ARGS class that builds WP_Query arguments based on shortcode parameters.
• UPDATE – Hiding Load More button if JavaScript is not enabled.
• UPDATE – Updated loading functionality of Preloaded and SEO addon when hitting a paged URL directly.
• UPDATE – Code refactoring of some PHP functions and Core ALM JS.
• FIX – Removed PHP warning messages caused by some Ajax Load More functions running in WP Admin.
• FIX – Fixed issue with offset and preloaded posts in the Users addon, Comments addon and ACF extension.
• FIX – Added a fix for post__not_in shortcode parameter not working with Sticky Posts.
• FIX – Fixed issue with fading in of Ajax elements when using SEO addon is active.
• FIX – Fixed issue search term filtering on default search.php template.

What’s Next

• Filters Add-on
  A much-needed functional update to include paging URLs working when filtering.
• Ajax Load More 4.0 and the Pro Addon!
  Work is almost complete on a Pro addon that will include all the Ajax Load More addons in a single installation requiring a single license.

Let me know what you think about the changes in Ajax Load More 3.7 (or anything else) in the comments 🙂