Blog

Introduction

Bloggers most often use some kind of marketing tool that will attract users to their website. In Pagination, every action requires that a whole page be loaded from the server. This process is typically time-consuming and there is every possibility that the user exits from the website before it is done. That is why we can’t make older posts on the same page without loading a new one. In WordPress, we have a plug-in called Ajax Load More for Post or Page. This is a freeware which can be downloaded here.

This plug-in has the following features:

• Multiple Instances – You can include multiple instances of one, two, three or ten of Ajax Load More on a single page.
• Shortcode Builder – You can easily create your own Ajax Load More shortcode by adjusting the various WordPress query parameters in our easy-to-use shortcode builder. (see Shortcode Parameters).
• Query Parameters – Ajax Load More allows you to query WordPress by the following different content types: Query by Post Type, Post Format, Category, Tags, Custom Taxonomies, Search Term, Authors and more!!
• Customizable Repeater Templates – You can edit and extend the functionality of Ajax Load More by creating your own repeater template to match the look and feel of your website. (see screenshots).
• Setting Panel – Customize your version of Ajax Load More by updating various plug-in settings (see screenshots).

Installing Ajax Load More 2.2.0

The following three ways can be used to install Ajax Load More 2.2.0:

• Searching and installing in WordPress Dashboard.
• Uploading in WordPress Dashboard.
• Using FTP.

After completing the installation, activate the plug-in in the Plug-in Dashboard.

Plug-in Setup

Once the plug-in is activated, the Ajax Load More menu appears in the Dashboard. When we select Ajax Load More, the sub-menus will open as a dropdown as shown below.

Repeater Template

A repeater template is a part of code that will execute over and over within a WordPress loop. It consists of a combination of HTML, PHP and core WordPress functions such as the_title() and the_permalink(). This repeater template is called the Default Template and it would be saved in the path: wp-content\plugins\ajax-load-more\core\repeater. The default template is fully customizable with syntax highlighting enabled and allows you to take full control over what is displayed to your visitors.

The first step is to decide which page you need to apply Ajax Load More. In the example below, I am going to add Ajax Load More in the blog’s Home Page.

This is the sample Blog template code.

In the above code, the <article> is loop post. This code will be processed on each of the posts on the home page. Hence, I deleted the loop code <article> </article> and pasted it on the Ajax Repeater template text field and saved the template.

Ajax General Settings

After saving the Repeater template, click on Setting in the sub-menu which is above the Repeater template. This will open a new page. If we made any changes, those will be applied globally throughout the theme where Ajax Load More short code is used.

Container type

In Ajax container type, we have two HTML elements – <ul> and <div>. Our Repeater Content or Loop Content will follow as a child when we choose any one of the above.

<ul> Container Type

If you choose <ul> radio button, the code is as shown below:

<div> Container Type

If you choose <div> radio button, the code is as shown below:

Container Class

This is not mandatory. If you want to add any background color or any other property for your Repeater Container, then you can add the class name on the given text field.

Disable CSS

The Ajax Plugin has its own CSS file called ajax-load-more.css which is located in \wp-content\plugins\ajax-load-more\core\css. All AJAX related styles are written in this CSS file. If you want to create your own CSS file for these AJAX styles, you can disable ajax-load-more.css by clicking on the checkbox shown below.

Button Color

In Ajax Load More plug-in, they have one custom button called Loadmore. By default, the button has 7 colors. You can apply your own color by editing the ajax-load-more.css file.

Shortcode and Implementation

We have an easy and quick way to enter special kinds of content into your posts or pages. A variety of query (wp_query()) parameters are passed through to WordPress via shortcodes. This plug-in has an advanced feature to create short code with parameters for Ajax Load More.

Shortcode Parameters

repeater	Select from a list of customizable repeaters (Add-on available). Default = ‘default‘
post_type	Comma separated list of post types to query. Default = ‘post’
post_format	Query by post format. Default = null
category	Query by category slug. Default = null
taxonomy	Query by custom taxonomy name. Default = null
taxonomy_terms	Comma separated list of custom taxonomy terms(slug) to query. Default = null
taxonomy_operator	Operator to compare Taxonomy Terms against (IN/NOT IN). Default = ‘IN’
author	Query by author id. Default = null
search	Query search term (‘s’). Default = null
order	Order posts ASC(ascending) or DESC(descending) order. Default = ‘DESC’
orderby	Order posts by date, title, name, menu order, random, author, post ID or comment count. Default = ‘date’
exclude	Comma separated list of post ID’s to exclude from query. Default = null
offset	Offset the initial query (number).Default = ‘0’
posts_per_page	Number of posts to load with each request.Default = ‘5’
scroll	Load more posts as the user scrolls the page (true/false).Default = ‘true’
max_pages	Maximum number of pages to load while scrolling (only activated if scroll = true). Default = ‘5’
pause	Do not load posts until user clicks load posts button (true/false). Default = ‘false’
transition	Choose a loading transition (slide/fade). Default = ‘slide’
button_label	The label text for Load more button. Default = ‘Older Posts’

Add Shortcode API

We can add the Shortcode API in two ways:

Through the pages

Template files

Just enter your shortcode into the following line of code in the respective template file, and place it at the bottom before the footer include.

Final Output

That’s it. After the short code is added, you will get the final view that looks as shown below. You can use the above example with this plug-in to create different paginations in WordPress sites.

Conclusion

AJAX is quickly becoming an integral part of several websites. Several well-established brands now use AJAX Loading to handle their web applications as it provides better interactivity with their users. This is due to the fact that implementing AJAX on a website does not require a page to be reloaded for dynamic content on web pages.

• AJAX allows easier and quicker interaction between users and the website as pages are not reloaded for the content to be displayed.
• AJAX applications on websites can be built to allow easier navigation to users in comparison to using the traditional Back and Forward button on a browser.

References

http://www.codeinwp.com/blog/load-old-wordpress-posts-on-the-same-page-with-ajax/

http://connekthq.com/plugins/ajax-load-more/