How to change wodpress paging to load more

Question

How to change wodpress paging to load more

Navigation

#1 by (0 votes)

0

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

In short, replace the default paging for a load button more.

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

The paging area is this here:

// 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();

wordpress template

asked by anonymous 05.10.2018 / 20:04

1 answer

function snippet failed to read table Radio button does not save to bank

score 0 · Answer 1

Talk to your partner!

You will replace that default Wordpress page with 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 does not work, check the browser console if the function I passed is not being recognized. Then just test, changing the location function, ie, leaving above or below the main jquery.

I hope I have helped!