---
title: "How to Enable AJAX Loading for WordPress Patterns in Nexter Blocks?"
url: https://nexterwp.com/docs/enable-ajax-loading-for-wordpress-patterns-in-nexter-blocks/
date: 2024-12-18
modified: 2026-10-02
lang: en
author: "Aditya Sharma"
description: "A pattern you load with a shortcode is normally part of the page the moment it is served. AJAX loading changes that: the page ships with an empty placeholder, and..."
image: https://nexterwp.com/wp-content/uploads/2024/12/How-to-Enable-AJAX-Loading-for-WordPress-Patterns-in-Nexter-Blocks_-1024x519.jpg
word_count: 869
---

# How to Enable AJAX Loading for WordPress Patterns in Nexter Blocks?

## Key Takeaways

- Nexter Blocks añade la opción template / AJAX loading en Nexter > Extra Options > Settings, y funciona en Nexter Blocks (free) y con Nexter Blocks Pro.
- AJAX loading carga los patrones según se necesitan en lugar de todos a la vez, y el beneficio aparece en el editor cuando se abre la pattern library.
- La configuración es global y no acelera las páginas públicas para visitantes; además, comparte el loader tpgb-ajax-load.min.js con Lazy Rendering, así que desactivarla no elimina el script si la otra opción sigue activa.

A pattern you load with a shortcode is normally part of the page the moment it is served. AJAX loading changes that: the page ships with an empty placeholder, and the pattern is fetched afterwards — when a visitor hovers or clicks something, or when a block scrolls into view.

That is useful for content a visitor may never need, such as a promo, a mega menu or a popup body, because it stays out of the first page load.

## Before You Start

- **Edition:** Free — the loader and the setting are part of the free Nexter Blocks plugin.- This is a plugin setting plus a shortcode, rather than a block control. The switch is under **Nexter > Extra Options > Settings**, named **Enable Ajax Templates**.- Administrator access, since the setting is site-wide.- The pattern you want to load must be saved under **Nexter > Patterns** (the WordPress Patterns list).

## Steps

- Go to **Nexter > Extra Options > Settings** and switch on **Enable Ajax Templates**. It is off until you turn it on, and the change is saved as soon as you flip the switch.

![Nexter Extra Options, Settings screen with the Enable Ajax Templates switch turned on](https://nexterwp.com/wp-content/uploads/2026/09/ajax-templates-setting-enabled.webp)

- Open the **Patterns** list. Every pattern shows its regular `` shortcode and an **AJAX Shortcodes** button. Click the button for the pattern you want to load.

![The Patterns list in the WordPress dashboard: each pattern shows its shortcode and an AJAX Shortcodes button](https://nexterwp.com/wp-content/uploads/2026/09/ajax-patterns-list-button.webp)

- In the dialog, copy the **Shortcode for Ajax render** and the trigger class you want: **Hover trigger**, **Click trigger** or **On view trigger**. Each class already contains the pattern ID.

![The AJAX Shortcodes dialog showing the AJAX shortcode and the hover, click and on view trigger classes for one pattern](https://nexterwp.com/wp-content/uploads/2026/09/ajax-shortcodes-modal.webp)

- Paste the shortcode into a Shortcode block where the pattern should appear. It renders an empty placeholder until the pattern is requested.

- Add the trigger class to the element that should start the load, using that block’s **Additional CSS class(es)** field. For the hover trigger, the pattern loads the first time the pointer enters the element:

![Front end after hovering a button that carries the hover trigger classes: the Spring sale pattern has loaded into the shortcode placeholder below it](https://nexterwp.com/wp-content/uploads/2026/09/ajax-hover-trigger-result.webp)

For the click trigger, the pattern loads the first time the element is clicked:

![Front end after clicking a button that carries the click trigger classes: the Spring sale pattern has loaded into the shortcode placeholder below it](https://nexterwp.com/wp-content/uploads/2026/09/ajax-click-trigger-result.webp)

For the on view trigger, the pattern loads when the element scrolls into view:

![Front end after scrolling to a block that carries the on view trigger classes: the Spring sale pattern has loaded into the shortcode placeholder below it](https://nexterwp.com/wp-content/uploads/2026/09/ajax-view-trigger-result.webp)

- Publish, then test on the front end while logged out. The placeholder stays empty until the trigger fires.

## How It Behaves

The shortcode and the trigger work as a pair, and both are needed.

- **The shortcode** `` outputs an empty placeholder (`tpgb-load-ID-content`, at least 100 pixels tall) instead of the pattern. Measured on a published page: the pattern text was not in the HTML that the server returned.- **The trigger class** goes on any element. `tpgb-load-template-hover` fires on mouse enter, `tpgb-load-template-click` on click, and `tpgb-load-template-view` when the element enters the viewport. The second class, `tpgb-load-ID`, tells the loader which pattern to fetch.- **It loads once.** After the pattern is in the placeholder, hovering, clicking or scrolling again does not fetch it a second time. Reloading the page starts again from an empty placeholder.- **The loader script is only added on some pages.** Measured: with the setting on, a page that had only a Heading block did not load `tpgb-ajax-load.min.js`, while a page that also had an Accordion block did. Add at least one Nexter block that uses JavaScript to the page.- **It shares its loader with [Lazy Rendering](https://nexterwp.com/docs/add-seo-friendly-lazy-loading-in-wordpress/).** The script is added if either setting is switched on.

## Limitations

- **The pattern is not in the page HTML.** Search engines and visitors without JavaScript see only the empty placeholder. Do not use this for content that needs to be indexed — use [Lazy Rendering](https://nexterwp.com/docs/add-seo-friendly-lazy-loading-in-wordpress/) instead.- **The placeholder takes up space before it loads** (a minimum height of 100 pixels), so reserve room for it in your layout to avoid a jump.- **One extra request per pattern**, made to `admin-ajax.php`. A firewall, security plugin or cache rule that blocks that request leaves the placeholder empty.- **Hover does not exist on touch screens.** Use the click or on view trigger for content that phone visitors need.- **It is all or nothing for the site.** The setting is not per page, and the trigger class works on one pattern ID at a time.- **The setting value matters.** It is stored as a specific value, so changing it through anything other than the settings screen may not take effect.

## Troubleshooting

### Nothing loads when I hover, click or scroll

Check, in order: **Enable Ajax Templates** is switched on; the page has at least one Nexter block that uses JavaScript; the Shortcode block with `tpgbajax="1"` is on the page; and the trigger element carries both classes, for example `tpgb-load-template-hover tpgb-load-4418`, with the ID of your pattern.

### I do not see the AJAX Shortcodes button

The button belongs to the Patterns list and is hidden if the setting has been explicitly switched off. Switch **Enable Ajax Templates** on and reload the list.

### The placeholder stays empty after the trigger fires

The request to `admin-ajax.php` is probably being blocked by a security plugin, a firewall or a cache rule. Allow that request, then try again.

### The script is still loading after I switched this off

[Lazy Rendering](https://nexterwp.com/docs/add-seo-friendly-lazy-loading-in-wordpress/) uses the same loader. The script is present if either setting is on, so check Lazy Rendering too.

### I hover over the element on my phone and nothing happens

There is no hover on a touch screen. Use the click or on view trigger instead.

## Related Docs

- [Add SEO friendly lazy loading in WordPress](https://nexterwp.com/docs/add-seo-friendly-lazy-loading-in-wordpress/)- [Add global style to a WordPress block](https://nexterwp.com/docs/add-global-style-to-a-wordpress-block/)- [Add dynamic content in WordPress](https://nexterwp.com/docs/how-to-add-dynamic-content-in-wordpress/)- [Advanced tab settings](https://nexterwp.com/docs/use-advanced-tab-in-nexter-blocks/)

## Frequently Asked Questions

**Q: Why is the pattern library slow to open in Nexter Blocks?**
A: The pattern library is the slowest part of the editor because everything in it has to be ready before anything can be shown. AJAX loading changes that by fetching patterns as they are needed instead of loading all of them at once. In Nexter Blocks, that mainly improves editor behavior, not visitor-facing performance, so the win is about getting into the library faster during editing.

**Q: What do I need before turning on AJAX loading for WordPress patterns?**
A: This is a site-wide setting in Nexter Blocks, not a block control, so administrator access is required. It works in the free version and also with Nexter Blocks Pro. The setting lives under Nexter > Extra Options > Settings, which matters because changing it anywhere else will not affect how the pattern library loads.

**Q: Does AJAX loading make the published site faster?**
A: The setting is for editing speed, not front-end speed. On a published page, the site is essentially unchanged, while the editor can fetch patterns as needed instead of preparing the whole library up front. That means the benefit shows up when opening and browsing the pattern library, not in what visitors download.

**Q: Why does the pattern library show empty sections after enabling AJAX loading?**
A: Blocked fetches are usually the reason. A security plugin, firewall, or caching layer in front of the admin can stop the requests that load patterns, which leaves parts of the library empty. The practical fix is to switch the setting off to confirm that it is the cause, then allow those requests through.

**Q: Why is the script still loading after I turned AJAX loading off?**
A: Nexter Blocks shares its loader with Lazy Rendering, so turning off AJAX loading alone does not remove tpgb-ajax-load.min.js if Lazy Rendering is still enabled. The script appears when either setting is on. That shared loader explains why disabling one feature may not change what you see on a published page.

**Q: Should I use AJAX loading if I only have a small pattern library?**
A: Probably not if you are expecting a big speedup. The gain depends on how many patterns you have, and on a small library the difference may not be worth noticing. It also adds a request per fetch, so on a slow connection patterns can appear in pieces instead of all at once, which some people find worse than one longer wait.