Để thực hiện chúng ta cần có kiến thức cơ bản về wordpress, ajax wordpress. Để tạo load more bằng ajax trong wordpress chúng ta thực hiện như sau:

<div class="post__content" id="post-container">
                    <?php
                    $paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
                    $args = array(
                        'post_type'   => 'du-an',
                        'post_status' => 'publish',
                        'paged'          => $paged,
        				'posts_per_page' => 12,
                    );
                     $query = new WP_Query($args);

                    if ($query->have_posts()) :
                    while ($query->have_posts()) : $query->the_post();
                    ?>
                    <article class="item">
                        <?php $thumbnail = get_the_post_thumbnail_url(); ?>
                        <div class="item__thumbnail">
                            <a href="<?php the_permalink(); ?>">
                                <?php if ($thumbnail) : ?>
                                <?= get_the_post_thumbnail(get_the_id(), 'thumbnail', array('class' => 'thumbnail')); ?>
                                <?php else : ?>
                                <img src="<?= get_template_directory_uri(); ?>/assets/images/noImage.jpg"
                                     alt="<?php the_title(); ?>">
                                <?php endif; ?>
                            </a>
                        </div>
                        <div class="item__content">
                            <a href="<?php the_permalink(); ?>">
                                <h2><?php the_title(); ?></h2>
                            </a>
                            <p class="limit-text limit-text-2"> <?= get_the_excerpt() ?></p>
                        </div>
                    </article>
                    <?php
                    endwhile;
                    wp_reset_postdata();
                    else :
                    echo '<p>No posts found.</p>';
                    endif;
                    ?>
                </div>

                <?php if ($query->max_num_pages > 1) : ?>
                <div class="ajax-pagination">
                    <button id="load-more" data-paged="1"><?php ($lang == 'vi') ? printf('Xem thêm') : printf('Load More') ?></button>
                </div>
                <?php endif; ?>

Tiếp theo ta thêm đoạn code này vào file function.php. Code này đăng ký hook trong ajax wordpress

// Xử lý AJAX cho phân trang
function ajax_pagination_handler() {
    $paged = isset($_POST['paged']) ? intval($_POST['paged']) : 1;

    $args = array(
        'post_type'      => 'du-an',
        'post_status'    => 'publish',
        'paged'          => $paged,
        'posts_per_page' => 12,
    );

    $query = new WP_Query($args);

    if ($query->have_posts()) :
    while ($query->have_posts()) : $query->the_post();
?>
<article class="item">
    <div class="item__thumbnail">
        <a href="<?php the_permalink(); ?>">
            <?= get_the_post_thumbnail(get_the_id(), 'thumbnail', array('class' => 'thumbnail')); ?>
        </a>
    </div>
    <div class="item__content">
        <a href="<?php the_permalink(); ?>">
            <h2><?php the_title(); ?></h2>
        </a>
        <p class="limit-text limit-text-2"> <?= get_the_excerpt() ?></p>
    </div>
</article>
<?php
        endwhile;
    wp_reset_postdata();
    else :
    echo '<p>No posts found.</p>';
    endif;

    wp_die(); // Dừng script sau khi trả về dữ liệu
}

// Thêm action AJAX
add_action('wp_ajax_ajax_pagination', 'ajax_pagination_handler');
add_action('wp_ajax_nopriv_ajax_pagination', 'ajax_pagination_handler');

Tiếp theo ta viết thêm đoạn mã js để thực hiện chúng

jQuery(document).ready(function ($) {
    $('#load-more').on('click', function () {
        let button = $(this);
        let paged = parseInt(button.attr('data-paged')) + 1;

        $.ajax({
            url: ajaxurl, // Biến ajaxurl tự động có trong WordPress
            type: 'POST',
            data: {
                action: 'load_more_posts',
                paged: paged,
            },
            beforeSend: function () {
                button.text('Loading...'); // Thay đổi nội dung nút khi đang tải
            },
            success: function (data) {
                if (data) {
                    $('#post-container').append(data); // Thêm bài viết mới vào container
                    button.attr('data-paged', paged);
                    button.text('Load More');
                } else {
                    button.text('No More Posts').prop('disabled', true); // Vô hiệu hóa nút
                }
            },
            error: function () {
                button.text('Error');
            },
        });
    });
});

Cuối cùng thêm đoạn sau vào functions.php để nạp file JavaScript và truyền biến ajaxurl:

function enqueue_custom_scripts() {
wp_enqueue_script(‘ajax-pagination’, get_template_directory_uri() . ‘/js/scripts.js’, array(‘jquery’), null, true);

// Truyền biến ajaxurl cho script
wp_localize_script(‘ajax-pagination’, ‘ajaxurl’, admin_url(‘admin-ajax.php’));
}
add_action(‘wp_enqueue_scripts’, ‘enqueue_custom_scripts’);