Ajax Load More is the ultimate WordPress infinite scroll plugin for lazy loading posts, single posts, pages, comments and more with Ajax Powered Queries.

Build complex custom WordPress queries with Ajax Load More short code Builder will insert short code to your side page using the editor or directly into your template files.

Ajax Load More is compatible for endless scrolling with popular eCommerce plugins such as WooCommerce and Easy Digital Downloads.

Features

• Shortcode Builder— Create your own custom Ajax Load More shortcodes are similar to various WordPress parameters in our easy-to-use alarm shortcode (see Shortcode Parameters).
• Query Parameters— Ajax Load More allows you to query WordPress has a lot of different capacities. Query by Post Type, Post Format, Date, Category, Tags, Custom Taxonomies, Search Term, Authors and more!
• Repeater Templates— 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).
• Multiple Instances— You can include several articles from Ajax Load More on one page, post or template.
• Ajax Filtering— The Ajax Load More custom filtering method will allow you to filter and update your Ajax query results.
• Multisite Compatibility— Manage repeater templates across all sites in your network.
• Setting Panel— Customize your version of Ajax Load More updating the plugin settings.

• repeater- Choose a repeater template (Add-on available). Default = 'default'
• post_type- Comma separated list of post types. Default = 'post'
• sticky_posts— Preserve sticky post ordering for Ajax listing. Default=false
• post_format- Query by post format. Default = null
• category— A comma separated list of categories to include by slug. Default = null
• category__and— A comma separated list of categories to include by ID. Default = null
• category__not_in— A comma separated list of categories to exclude by ID. Default = null
• tag— A comma separated list of tags — include by slug. Default = null
• tag__and— A comma separated list of tags include by ID. Default = null
• tag__not_in— A comma separated list of tags — exclude by ID. Default = null
• taxonomy- Query by custom taxonomy name. Default = null
• taxonomy_terms- Comma separated list of custom taxonomy terms (slug). Default = null
• taxonomy_operator
• taxonomy_relation— The logical relationship between each taxonomy when there is more than one. (AND/OR). Default = 'AND'
• day- Day of the week. Default = null
• month- Month of the year. Default = null
• year- Year of post. Default = null
• taxonomy_operator— Operator for compare Taxonomy Terms against (IN/NOT IN). Default = 'IN'
• meta_key- Custom field key(name). Default = null
• meta_value- Custom field value. Default = null
• meta_compare— Operator for compare meta_key and meta_value against. Default = 'IN'
• meta_type- Custom field type. Default = 'CHAR'
• meta_relation— Vickory with multiple custom field entries (AND/OR). Default = 'AND'
• author- Comma separated list of authors by id. Default = null
• post_in— Comma separated List of Post ID's include in query. Default = null
• post__not_in— Comma separated List of Post ID's to exclude from query. Default = null
• search- Query search term ('s'). Default = null
• custom_args- A semicolon separated list of value: pair arguments. e.g. tag_slug__and:design,development; event_display:upcoming. Default = null
• post_status- Select status of the post. Default = 'publish'
• order— Display posts in ASC(ascending) or DESC(descending) order. Default = 'DESC'
• orderby— Order posts by date, title, name, menu order, author, post ID or comment count. Default = 'date'
• offset- Offset the initial query (number). Default = '0'
• posts_per_page— Number of posts to load with each Ajax request. Default = '5'
• scroll— Load more posts as the user scrolls the page (true/false). Default = 'true'
• scroll_distance— Stand from the edge to the edge to the shooting gun loading of posts while scrolling. Default = '150'
• scroll_container- Constrain Ajax Load More infinite scrolling to a parent container. Default = null
• max_pages- Maximum number of pages to load while user is scrolling (activated on when scroll = true). Default = '0'
• pause_override— Allow scrolling to override the Pause parameter and trigger the loading of posts on scroll. Default = null
• pause— Do not load posts until user click Load More button (true/false). Default = 'false'
• transition- Choose a posts reveal transition (fade/masonry/none). Default='fade'
• transition_container- Display the Ajax Load More (.alm-reveal) loading container. Default = 'true'
• transition_container_classes- Add classes to the .alm-reveal transition div.
• masonry_selector- The target classname of each masonry item. Default = null
• masonry_animation— Select loading transition type for Masonry items. (default/zoom-out/slide-up/slide-down/none). Default = default
• masonry_horizontalorder- Maintain horizontal order. Default=true
• images_loaded— Wait for all images to load before displaying ajax loaded content (true/false). Default = 'false'
• destroy_after— Remove ajax load more functionality after 'n' number of pages have been loaded. Default = null
• progress_bar— Display progress bar indicator at the top of the window while loading Ajax content. Default = 'false'
• progress_bar_color- Enter the hex color of the progress bar. Default = 'ed7070'
• button_label— The label text for Load More button. Default = 'Older Posts'
— Update the text of the Load More button while content is loading. Default = null
• container_type— Override the Global Container Type that was set on ALM Settings page. Default = null
• css_classes— Add custom CSS classes to Ajax Load More container. Default = null
• id— A unique ID for Ajax Load More instance.
• nested- This is unchanged Ajax Load More instance. Default=false

Example Ajax Load More Shortcode

Example Demos

• Default- Out of the box functionality and styling.
• Advanced Custom Fields— Infinite scroll Advanced Custom Fields data with Ajax Load More.
• Attachments- Endless scroll post attachments.
• Destroy After— Remove Ajax Load More functionality after 'n' number of pages.
• Event Listing— Ordering and listing events by custom field date.
• Filtering— Reset and filter on Ajax Load More instance.
• Flexbox— Creating a responsive Ajax Load More grid with Flexbox.
• Infinite Scroll— A look at the new loading functionality and styles.
• Images Loaded— Download images before displaying ajax loaded content.
• Masonry— Creating a flexible grid layout with Masonry JS.
• Multiple Instances- Include multiple Ajax Load More 'on a single page.
• Paging URLs- Generate unique paging URLs for every Ajax Load More query with the SEO add-on.
• — Posts will not load until initiated by the user.
• Preloaded Posts— Easily preload an initial set of posts for all Ajax requests to the server.
• Progress Bar— Display a progress bar load indicator with each Ajax request.
• Search Results— Returning results based on search terms.
• Scroll Container- Constrain Ajax Load More to parent container.
• SEO & Paging— Combine these two add-ons to create one powerful navigation system.
• Slideshow Gallery— Create a gallery with Ajax Load More and Paging add-on.
• Table Layout— Ajax Load More will display the required results in a table format.

We all had archives where, when selecting a month, we were redirected to the side with entries for that month. In WordPress, such a retrieval of archives is implemented using the additional function wp_get_archives(). A similar archive of posts appears when the main WordPress categories are displayed, only posts are grouped by categories.

Today I want to tell you, how to create a dynamic archive page. "Dynamic" means that when you select a month, the results will be displayed on the same page, for additional help AJAX - Javascript. Since the jQuery library provides a simple API for working with Ajax, we will use this framework. Before that, where would we be today without jQuery? Even though the vikorist is often and densely, and your project already has connections.

Before writing this article, I created a dynamic archive page for this blog and would like to admire it (DEMO).

To implement a dynamic archive, we need to go through 4 stages:

I will show you the creation of a dynamic archive page using the base WordPress theme: “twentyten”.

1. jQuery plugins for WordPress

The correct option for connecting a jQuery script is to use the wp_enqueue_script() function. Such connections will protect you from conflicts with connections to the script in the plugins. The script will be connected once.

You need to insert this code into the functions.php file.

Option 2

In the first option, we connected the script from our server, which is in the WordPress files. However, you can change the send to a jQuery file and connect it to the Google CDN. The advantage of this approach is that since the browser is already attracted to this file, then when you go to your site, the browser will no longer be interested in the script / The attention of the page will increase. In addition, the CDN script is presented in a compact form, for which the file is a kilobyte lighter:

Function my_scripts_method() ( wp_deregister_script("jquery"); wp_register_script("jquery", "//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"); wp_enqueue_script("j ) ;) add_action("wp_enqueue_scripts", "my_scripts_method");

Option 3

The most popular and so-called “harsh” option for connecting jQuery is to write a message in the header.php template file in the middle of the tag. We insert the following html code:

2. Zavantazhivo picture before-zavantazhuvach

During the cooldown period, when the server is asked to use AJAX, we need to show a picture, informing the customer that what is happening. Such pictures have been chanted in the background more than once; an alternative to such a picture is the text: “Infatuation...”.

If we have a picture like this, let's download it, for example, from here: Animated gif (the service is in my favor), rename it to ajax-loader.gif and put it in the images folder, which is in the catalog of our WordPress themes. As a result, we can get the following picture: http://example.com/wp-content/themes/twentyten/images/ajax-loader.gif. Below mi yogo vikoristovamo u code.

3. Create a regular page template

For regular pages in WordPress, you can use templates around it, so we can create a page that is completely different from the structure of other pages. To set WordPress to create a file as a template for a regular page, you need to write the following code on the top of the file:

The archives template is the name of our template, which we use in the WordPress admin panel when the page is created.

Let's create a new file for the folder called tpl_archive.php and insert the guidance code there. Then let's go to the WordPress admin panel and create a permanent page, recognizing it, creating a template.

Now we will store this file with the necessary code.

1. First of all, we need to display the lists that appear, we can create them using the additional WordPress function: wp_get_archives() and wp_dropdown_categories():

get_header(); get_footer(); It is obvious to remove the header and footer of the template. get_sidebar(); I made sure that I didn't interfere with any reasonable code. Resolve the code to display lists of Months and Headings.

Empty block

2. Let’s design the lists that fall through CSS, For whom can I add this code immediately after clicking the header ():

At this stage I came up with the following:


3. Dodamo JavaScript code, which will be downloaded to the server and displayed in the archive_pot block (the code is added after the css styles):

Let's break down the code:
Everything in the middle $("#archive_browser select").change(function())(...) will be asked when changing the lists that drop out.

/images/ajax-loader.gif - go to the image file (wanted...), which is available during the download period.

/scripts/archive_getter.php – go to the archive file, which we will create at the next stage.

$.post(...); - A jQuery function that creates a request from the browser to the server using AJAX technology.

New code for the post page template

File for the regular page template (we create the file in the theme folder and copy the code there):

4. Creation of a compiler file

AJAX works by connecting the browser with the server without re-engaging the page using Javascript. The script itself cannot extract the data, even if it is located on the client’s computer, and the data is on the server, so the script, having extracted the data, must go back to the server, in which case such a dialogue will be supported by a sample file.

Let's create the scripts folder in the directory, create the file archive_getter.php (/wp-content/themes/twentyten/scripts/archive_getter.php) and remember this file with the following code:

A little analysis of the code:

We primarily highlight the WordPress core (all settings, functions, plugins). To make the WordPress functions available to us, we need to call query_posts(), which we use in this file to extract data.

I think if(($year=="") && ($month=="") && ($cat=="-1"))(...) we verify that there are any data that we can later Use the query_posts() function, since there are no other functions, then a warning will be displayed.

query_posts("posts_per_page=-1&cat=$cat&monthnum=$month&year=$year"); And everything below the primary cycle of WordPress.

The axis and that's it, the side is ready!

What was wrong with me (however, the picture is all that matters. It’s a living butt):

Content enhancement (show button) wordpress(ajax)

One of the assistants asked me to work on the site dynamically highlighting content (posts, records) or under another “show button”. Design based on such solutions becomes even more popular. A similar technique can be found on Twitter, VKontakte. For wordpress, it’s a pity that the plugins of these products are not enough, I only know one plugin, but I’m not even worthy of it, having continued the joke of the decision. And having touched on the topic of sight, the jquery library is used there to create dynamic enhancement of posts.

To create dynamic content enhancement, we need two files:

The jquery.cookie, script files must be placed in the js folder, which is located in the folder with your template, since there is no such folder, then they need to be created. Next, you need to add paths to scripts in the header.php file.

//place between tags

After you have written the directions for the scripts, you will need to send the file index.php or any other file if you plan to create dynamic promotion of posts. Need to add id = "loop" at the post container, class = "post" at the checkpoint, id = "pagination" There you want to place the “Show More” button. The code looks something like this:

Result:

To run the script you need the jquery library, you can connect the library like this

Template for testing content enhancement

In order to test the expansion, you need to download the template into the WordPress templates folder, then select the template with the name test in the admin panel

If you like my resource and want to support me financially, then you can re-invest the amount by entering the following details:

• Yandex Gamanets - 410014625168542
• Webmoney- R429373694729

What's behind the additional AJAX technology? using search optimization method by collecting the part instead of the site from sound systems (which, by the way, is not cloaking).

I implemented it technically. There were a lot of people who wanted to repeat the same on their blogs, I’ll try to convey information about how to do it.

AJAX essentially means the dynamic use of a side instead of a side with the help of JavaScript. Tobto. This part of the content would be displayed on the site, but if you look at the exit code of the page, there is nothing there. Or, if you enable JavaScript in your browser, its content will also not be visible.

Such possiblity can be victorious, for example, so change the number of internal messages on the site for sound systems. Neither Google nor Yandex index that part of the content that is connected via AJAX.

Ok, let's move on to practice. I'll tell you How to get started on WordPress Attached is a monthly list of archives, which may be displayed in the sidebar.

I'm preaching 2 options decision. The other one is the simplest.

First option

ajax_archives.php) with the next step:

Login to the WordPress admin and create a new page. It would be appropriate to name it, for example, “List of Archives.” Right hand at the block " Story attributes» select the template "AJAX list of archives".

When you open this page in your browser, you will see that there is only a list of required items and nothing else fancy. The axis here and is promoted on the website in the required place.

There's a file sidebar.php

We implement AJAX using jQuery, since there are no connections on your site yet, the file header.php before the codeadd the following code:

Now it’s impossible to add a small script to the site, which is a valuable piece of content. Create a js file (for example, scripts.js

(function($) ( $(function() ( $("#archives").load("http://YOUR_DOMAIN/ajax_archives/"); )) ))(jQuery)

Replace http://YOUR_DOMAIN/ajax_archives/ with the address above your created page.

header.php :

Another option

This option is decidedly simpler, because There is no need to create an additional page here.

Create a new php file for your dad with a WordPress template (for example, ajax_archives.php) with the next step:

The very first row of code eliminates the need to create a new page.

There's a file sidebar.php If you want to expand the list of archives, insert the following html code:

If jQuery is not yet connected to your site, the file header.php before the codeadd the following code:

Create a new js file (for example, scripts.js) and insert into the new offensive code:

(function($) ( $(function() ( $("#archives").load("http://YOUR_DOMAIN/wp-content/themes/FOLDER_WITH_TEMPLATE/ajax_archives.php"); )) ))(jQuery)

Place the file in the template folder on your site and connect to the file header.php, inserting a leading row before the tag :

Axis, power, and that’s it. You can watch the result.

In a similar manner, you can cover up the entire sidebar, or create a number of adjacent blocks from this instead.

As you have already guessed, today there is a constant increase in new entries when scrolling on WordPress. Instead of back-to-back navigation, entries will appear automatically as you scroll. It is possible to increase the number of new entries without re-applying for help AJAX. We can do it all, without using any plugins.

Now I will show two ways of such improvement. In essence, this is the same method, just a little with different powers. Options will be activated either automatically when you scroll or when you press a button, for example - indicative. Whatever is most suitable for your site is up to you.

Automatically increases entries based on scrolling time

Krok 1

To begin with, you need to know whether you want to introduce auto-advancement. Most often, you need to install a shortcut to remove the cycle from back-to-back navigation. For example, I have a smaller file content.php. So you just can buti - index.php, archive.php, loop.php, category.php, search.php etc. These files may have standard WordPress navigation or a custom function. Apply it to the statistics.

So from what you have similar to this, it resolves itself at the very end of the cycle. Replace the new track with the next code.

max_num_pages > 1) : ?>

The upper part of the code does not need to be scratched, and the lower axis is responsible for animation during the hour of attraction. You don’t need to just delete everything in the middle of the block - load_more_gs, or replace everything in the middle, not load_more_gs itself, but itself instead with your code and you will have your own animation.

UPD If, after promoting the promotion, it will be better to work on the category side, rather than on the search side, you can try replacing the 4th row of the code with a new two:

// Replace this var true_posts = "query_vars); ?>"; // On this $str = serialize($wp_query->query_vars); var true_posts = "";

Croc 2

Now we will add styles for our animation. If you have already seen this, you can skip this point.

#load_more_gs( width: 53px; padding:50px 0; margin:0 auto; ) .cssload-container( position:relative; ) .cssload-whirlpool, .cssload-whirlpool::before, .cssload-whirlpool : absolute; top: 50%; left: 50%; border: 1px solid rgb(255,255,255); border-left-color: rgb(0,225,255); border-radius: 974px; -border-radius: 974px; -webkit-border-radius: 974px; -moz-border-radius: 974px; ) cssload-rotate 1150ms linear infinite;-o-animation: cssload-rotate 1150ms linear infinite;-ms-animation: cssload-rotate 1150ms linear infinite; rotate 1150ms linear infinite; ) .cssload-whirlpool::before ( content: ""; margin: -22px 0 0 -22px; cssload-rotate 1150ms linear infinite; -ms-animat ion: cssload-rotate 1150ms linear infinite; -webkit-animation: cssload- rotate 1150ms linear infinite; -moz-animation: cssload-rotate 1150ms linear infinite; ) .cssload-whirlpool::after ( content: ""; margin: -28px 0 0 -28px; height: 55px; width: 55px; animation: cssload-rotate 2300ms linear infinite;-ms-animation: cssload-rotate 2300ms linear infinite; -webkit-animation: cssload-rotate 2300ms linear infinite; -moz-animation: cssload-rotate 2300ms linear infinite; rotate(360deg); ) ) @-o-keyframes cssload-rotate ( 100% ( -o-transform: rotate(360deg); ) ) @-ms-keyframes cssload-rotate ( 100% ( -ms-transform: rotate( 360deg); ) ) @-webkit-keyframes cssload-rotate ( 100% ( -webkit-transform: rotate(360deg); ) ) @-moz-keyframes cssload-rotate ( 100% ( -moz-transform: rotate(360deg) ; ) )

Croc 3

Now we need an asynchronous animation script. There are two directions here. Or insert the script in your footer, squeezing it into the tags:

Or create a file, for example - moreload.js, add a new script, and then connect it in the basement, indicating the correct path, like this:

Or so, adding the code to functions.php:

Function loadmore_scripts_gs() ( wp_enqueue_script("moreload", get_template_directory_uri() . "/js/moreload.js", array("jquery"), null, true); ) add_action("wp_enqueue_scrip

Krok 4

Now the script itself. This is copied and pasted according to the method you chose.

JQuery(function($)( $(window).scroll(function())( var bottomOffset = 2000; var data = ( "action": "loadmore", "query": true_posts, "page" : current_page ); if ( $(document).scrollTop() > ($(document).height() - bottomOffset) && !$("body").hasClass("loading"))( $.ajax(( url:ajaxurl, data: data , type:"POST", beforeSend: function(xhr)( $("body").addClass("loading"); ), success:function(data)( if(data) ( $("#load_more_gs") ). $("body").removeClass("loading"); current_page++; ) else ( $("#load_more_gs").remove(); ) )));

The 3rd row has a value 2000 . This means that access to the lower boundaries of the site, having reached its limit, will begin to increase the number of new entries. You can change it, but don’t overdo it, so that it doesn’t get overpowered.

Row 19.24 has a block with ID load_more_gs, then you will want to change the block name, which will require working not only in the loop and styles, but also in the script.

Krok 5

Function true_load_posts())( $args = unserialize(stripslashes($_POST["query"])); $args["paged"] = $_POST["page"] + 1; // side is coming $args["post_status" ] = "publish", $q = new WP_Query($args);

" rel="bookmark" title="!}!}">

This code needs to be changed according to your requirements. You have to replace the rows - 9, 10, 11 with the HTML code that you have in the middle of the cycle in any of the files where you created CROC No. 1. If you do not have HTML, but PHP for writing abstract entries, then you need to replace 8, 9, 10, 11, 12 rows. This is the code that indicates the display of the thumbnail, the name of the post, the teaser text, and so on. If you don’t do anything, everything will be crooked and disrupted by the design of your posts.

After you have replaced part of the code with your own, you can try to check the auto-advanced robot. If you didn’t have a good meal, then you will get the first result. Now let's move on to another type of enhancement.

Increases records when pressing a button - Show

Krok 1

The code from the first crocus, past the method that needs to be inserted into the file from the loop, will be the same, except for the lower part, so that instead of the preloader there will be a button. So, vikorize the code from the first crocus to the last method:

//whose deputy

indicative- This button text can be changed as you wish.

Croc 2

Now we have added new styles for the button. If you added styles to the first method, you can delete them.

#loadmore_gs( background:#63a63e; color:#fff; padding:5px 0; text-align:center; -moz-border-radius:4px; -webkit-border-radius:4px; border-radius: 4px; width: 150px;margin:0 auto;cursor:pointer;

Croc 3

Exactly the same as in the previous method, if you have already tried it, skip it, if not, then work similarly to the first method.

Krok 4

The asynchronous animation script has been discontinued for a while now, and is now available for pressing buttons. Look like this:

JQuery(function($)( $("#loadmore_gs").click(function())( $(this).text("Zavantazhenya..."); var data = ( "action": "loadmore", "query ) ": true_posts, "page" : current_page ); text("Indicative").before(data); current_page++; if (current_page == max_pages) $("#loadmore_gs").remove(); ) else ( $ ("#loadmore_gs").remove(); ) ) )); )); ));

Here you can customize the text of the button or change the name of the ID you wanted to change through. Row 3 has the word -. This will happen if you press the button and the AJAX analyzer will complete your work.

The 15th row has text - indicative, this text will appear after navigation. If you changed the text from the first text, then change it here.

Krok 5

Obluvach is deprived of the same without changes, so this period can also be skipped, otherwise if you were not bothered, then kill him from the previous method.

For another method, just follow. As with the first, since all the rules of Wikonan are correct, the result will not be spoiled.

I checked both methods and robots, including adding a button and a preloader and trying everything on my site. Perhaps, if you have problems, you need to come out of the situation and respectfully observe everything. The skin topic is different and the skin blog is special, so before you write that the method does not work, turn it over again.

That's all for the sake of respect. 🙂