How to change wodpress paging to load more

Question

I have a site in wordpress, Thema is the TOTAL. In the pagination of this theme, are the page numbers and the previous and next arrows. What I want is to replace this pagination with a button to press more, where the user will click to load more posts and portfolio.

In short, replace default paging for a button to press more.

I found that the file that loads the portfolio is vcex_portfolio_grid.php

The pagination area is this one:

// Display pagination if enabled
        if ( 'true' == $atts['pagination']
            || ( 'true' == $atts['custom_query'] && ! empty( $wpex_query->query['pagination'] ) )
        ) {
            $output .= wpex_pagination( $wpex_query, false );
        }

    $output .= '</div>';

    // Reset the post data to prevent conflicts with WP globals
    wp_reset_postdata();

Answer 1

Speaking partner!

You will replace that standard Wordpress pagination by the following code:

<div class="fetch">
    <?php next_posts_link( __( 'Carregar mais posts', 'nome-do-tema' ) ); ?>
</div>

<script type="text/javascript">
$('.fetch a').click(function(e) {
    e.preventDefault();
    $(this).addClass('loading').text('Carregando...');
    $.ajax({
        type: "GET",
        url: $(this).attr('href') + '#boxes',
        dataType: "html",
        success: function(out) {
            result = $(out).find('#boxes .box');
            nextlink = $(out).find('.fetch a').attr('href');
            $('#boxes').append(result);
            $('.fetch a').removeClass('loading').text('Carregar mais posts');
            if (nextlink != undefined) {
                $('.fetch a').attr('href', nextlink);
            } else {
                $('.fetch').remove();
            }
        }
    });
});
</script>

If it still doesn’t work, check in the browser console that the function I gave you isn’t being recognized. Then just test by changing the location function, ie leaving above or below the main jquery.

I hope I’ve helped!