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. Usefunction_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 withfunction_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