Wordpress Elementor Dev

WordPress & Elementor Pro — Skill Router

A complete procedural guide for producing production-grade WordPress and Elementor Pro code. This file is the router — read it first, then load the relevant sub-file(s) for the task at hand.

---

Sub-file Map — Read the Right File for Each Task

| Task type | Read this file | |---|---| | Plugin scaffold, child theme, code placement, CPT, AJAX handler | scaffolding.md | | PHP standards, sanitization, escaping, nonces, WPError, transients, password hashing | php-standards.md | | JavaScript standards, enqueue API, defer/async, wpaddinlinescript | js-css-standards.md | | CSS standards, BEM, design tokens, Elementor CSS selectors | js-css-standards.md | | Elementor custom widget, Dynamic Tags, Loop Grid, Form actions, Theme Builder conditions | elementor-patterns.md | | WooCommerce HPOS, order API, template overrides, Loop Grid for products | woocommerce.md | | REST API endpoints, schema, permission callbacks | rest-api.md | | Off-canvas UI, off-canvas accessibility, focus trap | offcanvas-ui.md | | Performance checklists (frontend + backend), speculative loading, IE conditional comments | performance.md | | Accessibility checklist, WCAG 2.2 AA, ARIA patterns | performance.md | | Hard-won production gotchas — widget lifecycle fatals, content_template() escaping, CSS-in-Elementor footguns, transactional email, wp.org review/packaging, embedding apps | field-notes.md | | wordpress.org submission — the 18 Directory Guidelines, Plugin Check 2.0.0 categories/usage, review process, required headers/readme | wp-org-guidelines.md |

Widget Boilerplates — Load when building a widget of that type

| Widget type | Read this file | |---|---| | Button / CTA with icon and link | widget-button.md | | Container / layout wrapper / section / card shell | widget-container.md | | Image with caption, link, lightbox | widget-image.md | | Heading / title / HTML tag selector | widget-heading.md | | Rich text / WYSIWYG body content | widget-text-editor.md | | Video embed (YouTube, Vimeo, self-hosted) | widget-video.md | | Widget that renders a saved Elementor template by ID | widget-elementor-template.md (SELECT2, get_builder_content_for_display(), Dynamic Tags context, CSS timing) | | Widget whose markup lives in a separate PHP template file | widget-php-template.md (Strategies A/B/C, load_template(), ob_start, path-traversal safety) | | Divider / horizontal rule with optional text or icon | widget-divider.md | | Spacer / vertical gap | widget-spacer.md | | Single standalone icon with optional link | widget-icon.md | | Icon + title + description box | widget-icon-box.md | | Image + title + description box | widget-image-box.md | | Image grid / gallery | widget-image-gallery.md | | Image slider / carousel | widget-image-carousel.md | | Bullet list with icons per item | widget-icon-list.md | | Animated number counter | widget-counter.md | | Percentage progress bar | widget-progress.md | | Customer quote / testimonial | widget-testimonial.md | | Tabbed content panels | widget-tabs.md | | Accordion — one panel open at a time | widget-accordion.md | | Toggle — multiple panels open simultaneously | widget-toggle.md | | Social media icon links row | widget-social-icons.md | | Colored alert / notice box | widget-alert.md | | Audio player (SoundCloud / self-hosted) | widget-audio.md | | WordPress shortcode output | widget-shortcode.md | | Raw custom HTML / JS / CSS embed | widget-html.md | | Named anchor for in-page navigation | widget-menu-anchor.md | | WordPress registered sidebar output | widget-sidebar.md | | WordPress read more tag | widget-read-more.md | | Google Maps embed | widget-google-maps.md | | Decorative star rating display | widget-star-rating.md | | Schema-ready structured rating | widget-rating.md | | Text following a curved / custom SVG path | widget-text-path.md | | Nested Tabs / Nested Accordion (each panel is a Container holding any widgets) | widget-nested.md |

Always read the relevant sub-file before writing code. For tasks that span multiple areas (e.g. a WooCommerce widget with custom REST endpoint), read all relevant sub-files. For a widget task, read BOTH the widget boilerplate file AND elementor-patterns.md. For any custom widget, plugin, or wp.org-bound work, also skim field-notes.md — it catches the lint-passing, review-failing, site-down mistakes the topic files don't dwell on.

---

0. Golden Rules (Never Violate)

These override everything in all sub-files:

1. Native APIs first — WordPress core hook before plugin; Elementor API before template override.
2. Sanitize in, escape out — Every input sanitized. Every output escaped. No exceptions.
3. Prefix everything — All functions, classes, constants, hooks, and CSS classes use a project-specific prefix.
4. State your placement — Every code response must declare exactly where the code lives.
5. No over-clarifying — Only ask a clarification question if the missing info would materially change the code output. Otherwise, state your assumption and proceed.
6. NEVER hardcode visual settings in widgets — Every visual property (colors, fonts, sizes,

spacing, backgrounds, borders, shadows, alignment) MUST be exposed as a standard Elementor control in the editor panel. Users control appearance via the toolbar — not by editing code. See §5 "Mandatory Widget Controls" below for the required controls checklist.

1. Name for the directory from day one — Naming is decided first and is effectively

irreversible, so get it right before writing code. The plugin slug/name must NOT start with a trademark you don't own — "CRM for WooCommerce", never "WooCommerce CRM" (Directory Guideline 17). The text domain must exactly equal the plugin slug. The wp.org slug is permanent, and a widget's get_name() is sticky (stored in every page's _elementor_data — renaming it breaks placed widgets). Choose the public name, slug, text domain, and code prefix (Rule #3) together, once. This is distinct from Rule #3: that governs internal code symbols; this governs the public identity. See wp-org-guidelines.md (Guidelines 12/16/17) and field-notes.md §1 (sticky get_name()).

---

1. Default Assumptions

Quickly assess — only ask if the answer would change the code:

| Info needed | Ask only if... | |---|---| | Scope (plugin vs snippet vs child theme) | Context doesn't make it obvious | | Elementor tier (Free / Pro / custom widget) | Pro-only APIs are involved | | PHP version | Code uses PHP 8.3+ features like typed class constants, or 8.4+ features like property hooks | | WooCommerce / ACF / WPML present | Integration with those systems is required |

Default stack when not stated (full release-by-release history lives in CHANGELOG.md — keep volatile version-tracking out of this router):

| Component | Version | Notes | |---|---|---| | WordPress | 7.0+ | "Armstrong", released May 20, 2026. Minimum PHP raised to 7.4 (7.2/7.3 dropped — sites still on them stay pinned to 6.9.x). No multisite assumed. | | PHP | 8.3 recommended | 7.4 = WP 7.0 minimum. 8.4 / 8.5 = "beta support" (possible deprecation notices). 8.2 fully compatible but no longer the recommended default. | | Elementor (free + Pro) | 4.2+ | Separate plugins, shared version number. 4.0.0 (Mar 30, 2026) made the Atomic Editor stable + default for new installs; 4.2.0 (Jun 5, 2026) is current. V3 Widget_Base remains fully supported — all skill code targets V3 and is production-safe. | | WooCommerce | 10.8+ | HPOS default-on since 8.2. 10.7 (Apr 14, 2026) disabled HPOS "sync on read" by default — see woocommerce.md. |

Note: Elementor core and Elementor Pro have independent version numbers — always check both when diagnosing compatibility issues.

WordPress 7.0 — what changed for plugin / Elementor devs

WP 7.0 "Armstrong" shipped May 20, 2026 (delayed from the original April 9 target while the RTC storage layer was redesigned — see below). Everything below is opt-in and non-breaking; most plugin/Elementor work is unaffected.

• Minimum PHP is now 7.4 (7.2/7.3 dropped). The skill's recommended baseline stays

PHP 8.3. Bump your plugin's Requires PHP header to 7.4 only once you target WP 7.0+ exclusively. No new DB minimum is enforced; wordpress.org/about/requirements/ recommends MariaDB 10.6+ or MySQL 8.0+.

• Real-Time Collaboration (RTC): simultaneous multi-author block editing (CRDT-based, via

an HTTP-polling sync provider — not WebRTC). Data is stored in a dedicated core database table; an earlier wp_post_meta / wp_sync_storage design was rejected, and building the table is what pushed the release from April to May. Plugin impact: scope every WP_Query / get_posts() with an explicit post_type so internal core post types never leak into your results — do not hardcode any internal RTC type name. The WP_ALLOW_COLLABORATION constant lets hosts swap the sync transport.

• WP AI Client: provider-agnostic PHP + JS AI API — wp_ai_client_prompt( $prompt )->generate_text().

Guard with function_exists( 'wp_ai_client_prompt' ).

• Abilities API: wp_register_ability() (PHP, since WP 6.9) plus a JS counterpart in 7.0.

Use 'meta' => ['show_in_rest' => true] to expose via REST.

• Connectors UI (Settings → Connectors) for managing AI provider credentials, and a

Command Palette in wp-admin.

• Iframed editor remains punted to a later release — prepare with "apiVersion": 3 in block.json.

Sources: make.wordpress.org/core/2026/01/09/dropping-support-for-php-7-2-and-7-3/ · make.wordpress.org/core/2026/04/22/wordpress-7-0-release-party-updated-schedule/ · wordpress.org/about/requirements/

> 📌 PHP support labels (WP 7.0): PHP 7.4–8.3 fully compatible; 8.3 recommended; > 8.4 (WP 6.7+) and 8.5 (WP 6.9+) carry a "beta support" label (possible deprecation notices). > Source: make.wordpress.org/core/handbook/references/php-compatibility-and-wordpress-versions/

> ✅ Elementor 4.x status (current: 4.2.0, June 5, 2026): Elementor 4.0.0 (Mar 30, 2026, > free + Pro) made the Atomic Editor stable and the default for new installs and added > Atomic Forms, Pro Interactions, and Component creation. Updating to 4.x leaves existing > sites untouched — V3 widgets and V4 Atomic Elements coexist on the same page; Atomic > features are toggled at WP Admin → Elementor → Editor → Settings. The V4 Atomic Element PHP > extension API is stable, but third-party extension docs are still being finalized — so > continue using V3 Widget_Base for all third-party widgets. It is the correct, > production-safe API and all skill code targets it. > > V4 Atomic Elements that now ship by default (awareness only — not third-party-buildable yet): > Div Block & Flexbox Container (layout); Atomic Heading, Paragraph, Image, Button, Video, SVG; > Atomic Tabs; and Atomic Forms (Pro) with composable fields — Label, Input, Textarea, > Checkbox, Submit, plus Radio, Select, Date Picker, Time Picker, and File Upload (added in > Pro 4.1.0, May 26, 2026). These are end-user elements; building custom atomic elements > still awaits the finalized V4 extension docs — keep targeting V3 Widget_Base until then. > Source: elementor.com/products/website-builder/v4-faq/ · > developers.elementor.com/elementor-editor-4-0-developers-update/ · > elementor.com/pro/changelog/ · github.com/elementor/elementor/releases

> 🗓️ Release-by-release history (betas, RCs, point releases) lives in CHANGELOG.md. > Keep this router focused on durable guidance; update version facts in the table above > and in CHANGELOG.md, not scattered across the sub-files. ---

2. Architecture Decision Tree

Run through this mentally before writing a single line:

Does a WordPress core hook (add_action/add_filter) solve it?
  YES → Use the hook. No plugin needed. Place in child theme functions.php
        or Elementor Custom Code.
  NO  → Does Elementor's PHP/JS API solve it?
          YES → Extend via Elementor hooks, Dynamic Tags, or Widget_Base.
                Register via elementor/widgets/register or elementor/dynamic_tags/register.
          NO  → Is this logic reusable across themes or sites?
                  YES → Scaffold a dedicated plugin (see scaffolding.md).
                  NO  → Child theme functions.php or Elementor Custom Code block.

Is a WooCommerce override needed?
  → Use Elementor Loop Grid + custom query filter BEFORE touching template files.
  → Only override woocommerce/ templates as an absolute last resort.

Is this a REST API endpoint?
  → Always register via register_rest_route() inside a plugin, never in functions.php.

---

3. Mandatory Output Format

Every single code response must follow this structure — no exceptions:

📍 PLACEMENT
Exact file path or Elementor hook location.
e.g. /wp-content/plugins/myplugin/includes/class-myplugin-hooks.php
     Elementor → Site Settings → Custom Code → wp_footer

⚙️ REQUIRES
WordPress X.X+ | PHP X.X+ | Elementor Pro X.X+ | ACF X.X+ | WooCommerce X.X+
(list only what the code actually depends on)

💡 WHY THIS APPROACH
One paragraph: which branch of the §2 decision tree was taken and why.

📋 CODE
Complete, commented, deployment-ready code block — no truncation, no omissions.

🔧 INTEGRATION NOTES (include when relevant)
Any manual steps required: flush rewrite rules, set Query ID in Elementor editor,
activate plugin, clear Elementor cache, etc.

---

4. Quick Reference — Pattern Index

| Task | Approach | Sub-file | |---|---|---| | Plugin scaffold | Singleton + hooks class + assets class + HPOS declaration | scaffolding.md | | Child theme setup | wp_enqueue_style parent + child in functions.php | scaffolding.md | | Custom Post Type + Taxonomy | register_post_type() + register_taxonomy() in plugin | scaffolding.md | | Secure AJAX handler | wp_ajax_ hooks + nonce verify + wp_send_json_* | scaffolding.md | | PHP sanitization / escaping | wp_unslash() + sanitize_* + esc_* patterns | php-standards.md | | Transient caching | get_transient / set_transient | php-standards.md | | External API call + WP_Error | wp_remote_get() + WP_Error pattern | php-standards.md | | WP 6.8 password hashing | wp_check_password() + wp_password_needs_rehash() | php-standards.md | | WP 6.8 app password / key hashing | wp_fast_hash() + wp_verify_fast_hash() (BLAKE2b) | php-standards.md | | JS standards + enqueue defer/async | IIFE + WP 6.3+ enqueue API | js-css-standards.md | | PHP → JS data passing | wp_add_inline_script() with wp_json_encode() | js-css-standards.md | | CSS BEM + design tokens | Scoped tokens, 8pt spacing, fluid type | js-css-standards.md | | Custom Elementor widget | Widget_Base + all required methods | elementor-patterns.md | | Elementor Dynamic Tag | Tag class + elementor/dynamic_tags/register | elementor-patterns.md | | Elementor Loop Grid query | elementor/query/ filter | elementor-patterns.md | | ACF field in Elementor | Dynamic Tag extending \Elementor\Core\DynamicTags\Tag | elementor-patterns.md | | Elementor Pro Form action | Action_Base + field iteration | elementor-patterns.md | | Theme Builder custom condition | Condition_Base + elementor/theme/register_conditions | elementor-patterns.md | | WooCommerce HPOS compatibility | FeaturesUtil::declare_compatibility() + wc_get_order() | woocommerce.md | | WooCommerce loop | Loop Grid + elementor/query/ filter | woocommerce.md | | Custom REST endpoint | register_rest_route() + schema callback in plugin | rest-api.md | | Off-canvas filter panel | BEM CS

…

Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

• Author: guramzhgamadze
• Source: guramzhgamadze/WordPress-Elementor-Skill
• License: MIT
• Homepage: https://guramzhgamadze.github.io/WordPress-Elementor-Skill/

Install and usage instructions live in the source repository linked above.