Skip to Content
Menu

infinite_load_query()

Allows for post listings to have AJAX page traversal.

PHP April 26, 2017

Usage

PHP
nebula()->infinite_load_query($args, $loop)

Parameters

$args
(Optional) (Array) An array of options
Default: See below

$loop
(Optional) (Boolean) A custom loop function or page template.
Default: loop.php

Parameter Notes

$args are identical to WP_Query or query_posts() in WordPress.

$loop is a function or page template to use instead of the standard loop.

Request or provide clarification »

Demo




Infinite Load Example



Nebula Block Template
This template is entirely controlled via the WordPress Block Editor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vestibulum diam at leo lobortis euismod. Aenean id lacus velit. Fusce non lectus odio. Etiam nec eros sit amet metus suscipit tincidunt. Nulla facilisi. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos Read More »

The most optimal way to load CSS and JS in Nebula
Loading resources the standard way of registering and enqueuing will make every speed test complain. Unless you are using that resource on every single page, there is a better way to load it. Preparing your stylesheet or JavaScript file The first thing to do is decide where you will be calling your asset file from. Read More »

Was this page helpful? Yes No


    A feedback message is required to submit this form.


    Please check that you have entered a valid email address.

    Enter your email address if you would like a response.

    Thank you for your feedback!

    Source File

    Located in /libs/Functions.php on line 1737.

    2 Hooks

    Find these filters and actions in the source code below to hook into them. Use do_action() and add_filter() in your functions file or plugin.

    Filters
    "pre_nebula_infinite_load_query"
    Need a new filter hook? Request one here.

    Actions
    "nebula_infinite_before_load_more"
    Need a new action hook? Request one here.

    Note: This function contains 1 to-do comment.

    PHP
            public function infinite_load_query($args=array('post_status' => 'publish', 'showposts' => 4), $loop=false){
                $timer_name = $this->timer('Infinite Load Query');
    
                $override = apply_filters('pre_nebula_infinite_load_query', null);
                if ( isset($override) ){return;}
    
                global $wp_query;
                if ( empty($args['paged']) ){
                    $args['paged'] = 1;
                    if ( get_query_var('paged') ){
                        $args['paged'] = get_query_var('paged');
                        ?>
                        <div class="infinite-start-note">
                            <a href="<?php echo get_the_permalink(); ?>">&laquo; <?php _e('Back to page 1', 'nebula'); ?></a>
                        </div>
                        <?php
                    } elseif ( !empty($wp_query->query['paged']) ){
                        $args['paged'] = $wp_query->query['paged'];
                        ?>
                        <div class="infinite-start-note">
                            <a href="<?php echo get_the_permalink(); ?>">&laquo; <?php _e('Back to page 1', 'nebula'); ?></a>
                        </div>
                        <?php
                    }
                }
    
                query_posts($args);
    
                if ( empty($args['post_type']) ){
                    $post_type_label = 'posts';
                } else {
                    $post_type = ( is_array($args['post_type']) )? $args['post_type'][0] : $args['post_type'];
                    $post_type_obj = get_post_type_object($args['post_type']);
                    $post_type_label = lcfirst($post_type_obj->label);
                }
                ?>
    
                <div id="infinite-posts-list" data-max-pages="<?php echo $wp_query->max_num_pages; ?>" data-max-posts="<?php echo $wp_query->found_posts; ?>">
                    <?php
                    $loop = sanitize_text_field($loop);
                    if ( !$loop ){
                        get_template_part('loop');
                    } else {
                        if ( function_exists($loop) ){
                            call_user_func($loop);
                        } elseif ( locate_template($loop . '.php') ){
                            get_template_part($loop);
                        } else {
                            if ( $this->is_dev() ){
                                echo '<strong>Warning:</strong> The custom loop template or function ' . $loop . ' does not exist! Falling back to loop.php.';
                            }
                            get_template_part('loop');
                        }
                    }
                    ?>
                </div>
    
                <?php do_action('nebula_infinite_before_load_more'); ?>
    
                <div class="loadmorecon <?php echo ( $args['paged'] >= $wp_query->max_num_pages )? 'disabled' : ''; ?>">
                    <a class="infinite-load-more" href="#"><?php echo ( $args['paged'] >= $wp_query->max_num_pages )? 'No more ' . $post_type_label . '.' : 'Load More'; ?></a>
                    <div class="infinite-loading">
                        <div class="a"></div> <div class="b"></div> <div class="c"></div>
                    </div>
                </div>
    
                <script><?php //Must be in PHP so $args can be encoded. @todo "Nebula" 0: This must have to load in the footer if jQuery is set to the footer...? ?>
                    window.addEventListener('load', function(){
                        var pageNumber = <?php echo $args['paged']; ?>+1;
    
                        document.querySelector('.infinite-load-more').addEventListener('click', function(e){
                            var maxPages = document.getElementById('infinite-posts-list').getAttribute('data-max-pages');
                            var maxPosts = document.getElementById('infinite-posts-list').getAttribute('data-max-posts');
    
                            if ( pageNumber <= maxPages ){
                                document.querySelector('.loadmorecon').classList.add('loading');
    
                                fetch(nebula.site.ajax.url, {
                                    method: 'POST',
                                    credentials: 'same-origin',
                                    headers: {
                                        'Content-Type': 'application/x-www-form-urlencoded',
                                        'Cache-Control': 'no-cache',
                                    },
                                    body: new URLSearchParams({
                                        nonce: nebula.site.ajax.nonce,
                                        action: 'nebula_infinite_load',
                                        page: pageNumber,
                                        args: JSON.stringify(<?php echo wp_json_encode($args); ?>),
                                        loop: <?php echo wp_json_encode($loop); ?>,
                                    }),
                                    priority: 'high'
                                }).then(function(response){
                                    if ( response.ok ){
                                        return response.text();
                                    }
                                }).then(function(response){
                                    let newDiv = document.createElement('div');
                                    newDiv.className = 'clearfix infinite-page infinite-page-' + (pageNumber-1) + ' sliding';
                                    newDiv.setAttribute('style', 'display: none;');
                                    newDiv.innerHTML = response;
                                    document.getElementById('infinite-posts-list').appendChild(newDiv);
    
                                    jQuery('.infinite-page-' + (pageNumber-1)).slideDown({ //I would like to remove this jQuery so this embedded script tag does not have a potential race condition depending on where jQuery is loaded. Try animating the height some other way
                                        duration: 750,
                                        //easing: 'easeInOutQuad',
                                        complete: function(){
                                            document.querySelector('.loadmorecon').classList.remove('loading');
                                            document.querySelector('.infinite-page.sliding').classList.remove('sliding');
                                            document.dispatchEvent(new Event('nebula_infinite_slidedown_complete'));
                                        }
                                    });
    
                                    if ( pageNumber >= maxPages ){
                                        document.querySelector('.loadmorecon').classList.add('disabled').querySelector('a').innerHTML = '<?php __('No more', 'nebula'); ?> <?php echo $post_type_label; ?>.';
                                    }
    
                                    var newQueryStrings = '';
                                    if ( typeof document.URL.split('?')[1] !== 'undefined' ){
                                        newQueryStrings = '?' + document.URL.split('?')[1].replace(/[?&]paged=\d+/, '');
                                    }
    
                                    history.replaceState(null, document.title, nebula.post.permalink + 'page/' + pageNumber + newQueryStrings);
                                    document.dispatchEvent(new Event('nebula_infinite_finish'));
    
                                    gtag('event', 'Load More', {
                                        event_category: 'Infinite Query',
                                        event_label: 'Loaded page ' + pageNumber,
                                    });
    
                                    pageNumber++;
                                }).catch(function(error){
                                    document.dispatchEvent(new Event('nebula_infinite_finish'));
                                    gtag('event', 'exception', {
                                        message: 'AJAX Error: Infinite Query Load More AJAX',
                                        fatal: false
                                    });
                                });
                            }
    
                            e.preventDefault();
                        });
                    });
                </script>
                <?php
                $this->timer($timer_name, 'end');
            }
    

    Override

    To override this PHP function, use this hook in your child theme or plugin ("my_custom" can be changed):

    PHP
    add_filter('pre_nebula_infinite_load_query', 'my_custom_infinite_load_query', 10, 3); //The last integer must be 1 more than the actual parameters
    function my_custom_infinite_load_query($null, $args, $loop){ //$null is required, but can be ignored
        //Write your own code here
    
        return true; //Return true to prevent the original function from running afterwords
    }

    You can completely disable this PHP function with a single line actions:

    PHP
     add_filter('pre_nebula_infinite_load_query', '__return_false');