If you’re building a gallery or portfolio and want to improve user experience, implementing infinite scroll is a great option. In this tutorial, you’ll learn how to load more images on scroll using AJAX in WordPress — without relying on heavy plugins. We’ll use simple PHP and jQuery code to fetch images dynamically as the user scrolls down the page.
Table of Contents
Learn how to load more images on scroll using AJAX in WordPress without plugins. Clean and simple code.
<?php
/*
Template Name: Gallery
*/Then I created a new page in WordPress and selected the “Gallery” template to assign this layout.
To manage images, I used the Smart Custom Fields (SCF) plugin and created a field group called gallery. This lets users upload multiple images easily.
I also added a numeric field so users can define how many images they want to load per scroll.
After that, I wrote custom AJAX functionality to fetch more images dynamically as the user scrolls down the page, creating a smooth infinite scroll effect.
You can follow this tutorial using your local WordPress setup or use a managed environment like Flywheel to test things quickly.
Step 1: Enqueue Scripts in functions.php
Before you begin, make sure jQuery is loaded and you enqueue your AJAX script properly:
function custom_enqueue_scripts() {
wp_enqueue_script('jquery');
wp_enqueue_script('custom-gallery-scroll', get_template_directory_uri() . '/js/gallery-scroll.js', ['jquery'], null, true);
wp_localize_script('custom-gallery-scroll', 'custom_call', [
'ajaxurl' => admin_url('admin-ajax.php'),
]);
}
add_action('wp_enqueue_scripts', 'custom_enqueue_scripts');Make sure your JavaScript file is named gallery-scroll.js and is placed inside your theme’s js/ directory.
Step 2: Create the HTML Structure with PHP
Replace your current HTML markup with the following updated gallery structure. It displays the first set of images and prepares the container for AJAX loading.
template-gallery.php
<?php
$gallery = get_field('gallery');
$post_per_images = get_field('post_per_image') ? get_field('post_per_image') : 5;
$id = get_the_ID();
if ($gallery): ?>
<div class="ajax-gallery-wrap section-padding">
<div class="container">
<div class="row">
<div class="col-lg-12">
<div id="ajax-gallery"
data-id="<?php echo esc_attr($id); ?>"
data-offset="<?php echo intval($post_per_images); ?>"
data-per="<?php echo intval($post_per_images); ?>">
<?php
$first_batch = array_slice($gallery, 0, $post_per_images);
foreach ($first_batch as $image): ?>
<a href="<?php echo esc_url($image['url']); ?>"
title="<?php echo esc_attr($image['alt']); ?>"
data-fancybox="gallery"
class="gallery-item">
<div class="img-box" style="background-image: url('<?php echo esc_url($image['url']); ?>');"></div>
</a>
<?php endforeach; ?>
</div>
</div>
</div>
</div>
</div>
<?php endif; ?>Step 3: Add jQuery to Load More on Scroll
Here’s the gallery-scroll.js file content:
var gallery = $("#ajax-gallery");
var pageId = gallery.data("id");
var offset = gallery.data("offset");
var postPerImages = gallery.data("per");
var loading = false;
$(window).on("wheel", function () {
if (loading) return;
loading = true;
$.ajax({
url: custom_call.ajaxurl,
type: "POST",
data: {
action: "load_more_gallery_images",
page_id: pageId,
offset: offset,
},
success: function (response) {
if (response.success) {
$("#ajax-gallery").append(response.data.html);
offset += postPerImages;
}
loading = false;
},
error: function () {
loading = false;
},
});
});Step 4: Handle AJAX in functions.php
Add this server-side function to handle the AJAX request:
add_action('wp_ajax_load_more_gallery_images', 'load_more_gallery_images');
add_action('wp_ajax_nopriv_load_more_gallery_images', 'load_more_gallery_images');
function load_more_gallery_images() {
$page_id = isset($_POST['page_id']) ? intval($_POST['page_id']) : 0;
$offset = isset($_POST['offset']) ? intval($_POST['offset']) : 0;
if (!$page_id) {
wp_send_json_error();
}
$gallery = get_field('gallery', $page_id);
$post_per_images = get_field('post_per_image', $page_id) ?: 5;
$remaining_images = array_slice($gallery, $offset, $post_per_images);
ob_start();
foreach ($remaining_images as $image): ?>
<a href="<?php echo esc_url($image['url']); ?>"
title="<?php echo esc_attr($image['alt']); ?>"
data-fancybox="gallery"
class="gallery-item">
<div class="img-box" style="background-image: url('<?php echo esc_url($image['url']); ?>');"></div>
</a>
<?php endforeach;
$html = ob_get_clean();
wp_send_json_success(['html' => $html]);
} Result
- The page loads the first batch of images.
- When the user scrolls, AJAX fetches and appends the next set of images.
- All done without reloading or plugins.
OUTPUT:
Recent Posts
>>How to Create a WordPress Widget to Filter Posts by Category Using AJAX
>>How to Use AJAX in WordPress? – step by step guide
Conclusion: Load More Images on Scroll Using AJAX in WordPress
Now you know how to load more images on scroll using AJAX in WordPress, without relying on plugins. This is ideal for developers who want lightweight, custom-coded solutions for galleries or portfolios.
