
Table of Content
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.
1 2 3 |
<li> <?php if ( has_post_thumbnail() ) { the_post_thumbnail(array(100,100));}?><h3><a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a></h3><p class="entry-meta"><?php the_time("F d, Y"); ?></p><?php the_excerpt(); ?> </li> |
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
1 |
[ajax_load_more post_type="post" posts_per_page="6" scroll="false" transition="fade" button_label="Load more"] |

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.
1 |
<?php echo do_shortcode('[ajax_load_more post_type="post" posts_per_page="6" scroll="false" transition="fade" button_label="Load more"]'); ?> |
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/
Pingback: creation site web marrakech
Pingback: www.merchantcircle.com/foxtail-marketing-los-angeles-ca