How to increase Blog Posts per Page

[tuanphan]

By default, Blog Page shows 20 posts/page.

To increase this limit, you can do these.

#1. Click on Gear icon

#2. Click Advanced > Page Header Code Injection

#3. Paste this code to right box

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
    let currentItemCount = $('.blog-basic-grid--container').length;
    const targetItemCount = 60;
    
    function loadMoreItems() {
        const olderPostsLink = $('.blog-list-pagination .older a').attr('href');
        
        if (olderPostsLink && currentItemCount < targetItemCount) {
            $.get(olderPostsLink, function(data) {
                const newItems = $(data).find('.blog-basic-grid--container');
                const newPaginationLink = $(data).find('.blog-list-pagination .older a').attr('href');
                
                newItems.each(function() {
                    if (currentItemCount < targetItemCount) {
                        $('.blog-basic-grid').append($(this));
                        currentItemCount++;
                    }
                });
                
                if (newPaginationLink && currentItemCount < targetItemCount) {
                    $('.blog-list-pagination .older a').attr('href', newPaginationLink);
                    loadMoreItems();
                } else {
                    $('.blog-list-pagination').hide();
                }
            }).fail(function() {
                console.log('Không thể load thêm bài viết');
                $('.blog-list-pagination').hide();
            });
        } else {
            $('.blog-list-pagination').hide();
        }
    }
    
    loadMoreItems();
});
</script>
<style>
article.blog-basic-grid--container.entry.blog-item {
    opacity: 1 !important;
}
  nav.blog-list-pagination {
    order: 500;
    display: block !important;
}
</style>

#4. You can update limit here.