Elementor Repeater

A WordPress plugin that turns any Elementor container into a dynamic, repeating list. Design a layout once in Elementor, connect it to a data source, map fields to widgets, and the plugin clones that layout for every record on the frontend.

Built for Elementor users who want list and grid UIs from external APIs or WordPress content without writing custom widgets or PHP templates.

Features

• Visual setup in Elementor — right-click a container to add or edit a repeater via a 3-step wizard
• Two data source types
  • JSON URL — fetch records from an external API
  • WP Query — pull posts or custom post types with filters
• Field mapping — connect source fields to Elementor widgets (headings, images, text, links, and more)
• Sorting and limits — order results and cap how many items render
• Live preview — preview mapped output inside the Elementor editor before publishing
• Admin UI — manage data sources from a dedicated WordPress admin screen

Requirements

• WordPress 6.0+
• PHP 8.0+
• Elementor (free or Pro)
• Composer (for PHP dependencies)
• Node.js 18+ and npm (for building frontend assets)

Installation

1. Clone or download this repository into your WordPress plugins directory:

   cd wp-content/plugins
   git clone https://github.com/Yeastycode/el-repeat.git elementor-repeater
   cd elementor-repeater

2. Install PHP dependencies:

   composer install

3. Build frontend assets:

   npm install
   npm run build

4. Activate Elementor Repeater from the WordPress Plugins screen.

Quick start

1. Create a data source

Go to El-Repeater → Add New in the WordPress admin and choose a source type:

For JSON sources, provide the API URL and the dot-notation path to the array of records (for example, data.items). The admin UI can validate the URL and discover available field paths.

For WP Query sources, pick a post type and optional filters (taxonomy, author, parent, and so on). Standard fields like title, content, excerpt, permalink, and featured image are available out of the box.

2. Design your template in Elementor

Open a page in the Elementor editor and build a container that represents one item in the list — for example, a card with a heading, image, and text widget. This container becomes the template that gets repeated.

3. Configure the repeater

Right-click the container and choose Add repeater. The wizard walks you through three steps:

1. Select data source — pick a source and set sort order, direction, and item limit
2. Map fields — assign source fields to widgets inside the container
3. Preview — confirm the output looks correct

Save the page. The repeater configuration is stored with that page.

4. View on the frontend

When a visitor loads the page, the plugin fetches data from the configured source, clones the Elementor container for each record, and fills in the mapped widget values.

How it works

Admin: create data source
        ↓
Elementor: design container template
        ↓
Wizard: map source fields → widgets
        ↓
Post meta: save repeater config
        ↓
Frontend: fetch data, clone container, inject values

• Data sources are stored site-wide in wp_options
• Repeater configs are stored per page/post in post meta
• REST API (ycl-repeater/v1) powers the admin UI and Elementor wizard
• Frontend rendering uses a small JavaScript bundle that clones the Elementor container and applies field values

Development

For local development with Vite hot module replacement inside the Elementor editor, see README-DEV.md.

Common commands:

npm run dev      # Start Vite dev server (port 5173)
npm run build    # Production bundle
composer install # PHP autoloading

Set WP_DEBUG to true in wp-config.php while running the dev server so the plugin loads assets from Vite instead of the built bundle.

Additional notes:

• FIX-URL-CONFIG.md — URL configuration troubleshooting
• TROUBLESHOOTING-HMR.md — HMR troubleshooting in the Elementor editor

Project structure

core/           PHP plugin logic, REST API, frontend rendering
src/wizard/     React wizard for the Elementor editor
src/admin/      React admin UI for data source management
scripts/        Built JS bundles and frontend repeater renderer
assets/         Stylesheets
helpers/        Shared PHP helpers

Author

Popsana Noble Barida — panobotech.com

License

GPL-2.0-or-later