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, WP_Error, transients, password hashing | php-standards.md | | JavaScript standards, enqueue API, defer/async, wp_add_inline_script | 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 |
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 (concise) · widget-template-elementor.md (extended — SELECT2, Dynamic Tags, CSS timing) | | Widget whose markup lives in a separate PHP template file | widget-php-template.md (concise) · widget-template-php.md (extended — Strategies A/B/C, ob_start, path traversal) | | 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 <!--more--> 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 |
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.
0. Golden Rules (Never Violate)
These override everything in all sub-files:
- Native APIs first — WordPress core hook before plugin; Elementor API before template override.
- Sanitize in, escape out — Every input sanitized. Every output escaped. No exceptions.
- Prefix everything — All functions, classes, constants, hooks, and CSS classes use a project-specific prefix.
- State your placement — Every code response must declare exactly where the code lives.
- No over-clarifying — Only ask a clarification question if the missing info would materially change the code output. Otherwise, state your assumption and proceed.
- 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. 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 assumptions when not stated: WordPress 6.9.4+ (WP 7.0 DELAYED — was April 9, 2026; new date TBD by April 22, 2026), PHP 8.3+ (officially recommended by wordpress.org/about/requirements/; 8.4 and 8.5 = beta support label; 8.2 is fully compatible but no longer the recommended default), Elementor 4.0.0+ (free and Pro both version 4.0.0, released March 30, 2026). V3 Widget_Base API remains fully supported. Note: Elementor core and Elementor Pro are separate plugins with independent version numbers Note: Elementor free and Pro both released 4.0.0 on March 30, 2026. History: 3.35.8 (March 23) was a security release; 3.35.9 (March 25) fixed an AI-generated image insertion bug; 4.0.0 (March 30) is the current stable release. Always check both free and Pro when diagnosing compatibility issues. No multisite assumed.
🔜 WordPress 7.0 (DELAYED — was April 9, 2026; new schedule by April 22, 2026): PHP 7.2 and 7.3 will no longer be supported. The new
minimum PHP version is 7.4.0. Sites still on PHP 7.2/7.3 will remain pinned to WP 6.9 and
will not receive the 7.0 update. The minimum recommended version remains PHP 8.3.
Database: No new minimum is enforced in WP 7.0 — the DB minimum was last bumped in
WP 6.5 (MySQL 5.5.5+). The official wordpress.org/about/requirements/ page now lists
MariaDB 10.6+ or MySQL 8.0+ as the primary recommended versions, and PHP 8.3+ as
the recommended PHP version.
Source: make.wordpress.org/core/2026/01/09/dropping-support-for-php-7-2-and-7-3/,
wordpress.org/about/requirements/
🤖 WordPress 7.0 — New Developer APIs (WP AI Client + Connectors UI + Abilities API):
All opt-in, no breaking changes. See quick summary below — these do not affect most
plugin/Elementor work in WP 7.0.
- WP AI Client: wp_ai_client_prompt($prompt)->generate_text() — provider-agnostic
PHP + JS AI API. Use function_exists('wp_ai_client_prompt') to guard.
- Connectors UI: Settings → Connectors admin page for managing AI provider credentials.
Hook: connections-wp-admin-init. ⚠️ These names are PRE-STABLE and subject to change
before WP 7.0 stable ships — guard all usage with function_exists() /
did_action() checks and do not ship production code depending on them until WP 7.0 stable.
- Abilities API: PHP side in WP 6.9 (wp_register_ability()); JS counterpart in WP 7.0.
'meta' => ['show_in_rest' => true] to expose via REST.
- Iframed Editor (PUNTED to WP 7.1): No action req