{"slug":"wordpress-elementor-dev","title":"wordpress-elementor-dev","summary":"Expert WordPress and Elementor Pro development skill. Use this whenever the user asks about WordPress theme development, Elementor Pro customization, plugin architecture, custom post types, hooks/filters, Loop Grids, Dynamic Tags, Theme Builder templates, off-canvas UIs, custom C","platform":"Claude","tags":[],"authorName":"LLM Mart","authorSlug":"llm-mart","score":0,"source":"github","price":null,"verified":false,"createdAt":"2026-09-14T20:43:46.930361Z","repo":{"url":"https://github.com/guramzhgamadze/WordPress-Elementor-Skill","stars":25,"forks":1,"license":"MIT","updatedAt":"2026-09-14T06:48:52Z"},"bodyHtml":"
\n

name: wordpress-elementor-dev\ndescription: >\nExpert WordPress and Elementor Pro development skill. Use this whenever the user\nasks about WordPress theme development, Elementor Pro customization, plugin architecture,\ncustom post types, hooks/filters, Loop Grids, Dynamic Tags, Theme Builder templates,\noff-canvas UIs, custom CSS/JS injection, performance optimization, or any PHP/JS/CSS\ncode targeting a WordPress or Elementor environment. Trigger even for general questions\nlike \"how do I add a custom field in Elementor\", \"what hook should I use for X in\nWordPress\", \"how do I override a WooCommerce template\", or \"how do I register a\ncustom widget\" — do not wait for the user to explicitly say \"use the skill.\"\nAlso trigger for ACF integration, REST API endpoints, child theme setup, WooCommerce\ncustomization, WPML/multilingual setups, and any debugging of WordPress/Elementor issues.

\n

WordPress & Elementor Pro — Skill Router

\n

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

\n
\n

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

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
Task typeRead this file
Plugin scaffold, child theme, code placement, CPT, AJAX handlerscaffolding.md
PHP standards, sanitization, escaping, nonces, WP_Error, transients, password hashingphp-standards.md
JavaScript standards, enqueue API, defer/async, wp_add_inline_scriptjs-css-standards.md
CSS standards, BEM, design tokens, Elementor CSS selectorsjs-css-standards.md
Elementor custom widget, Dynamic Tags, Loop Grid, Form actions, Theme Builder conditionselementor-patterns.md
Elementor extension points — custom form fields, theme locations, injecting controls into native widgets, adding a TAB to the editor's Elements panel, Finder/context-menu, hooks reference, deprecationselementor-extending.md
WooCommerce HPOS, order API, template overrides, Loop Grid for productswoocommerce.md
REST API endpoints, schema, permission callbacksrest-api.md
Off-canvas UI, off-canvas accessibility, focus trapoffcanvas-ui.md
Performance checklists (frontend + backend), speculative loading, IE conditional commentsperformance.md
Accessibility checklist, WCAG 2.2 AA, ARIA patternsperformance.md
Hard-won production gotchas — widget lifecycle fatals, content_template() escaping, CSS-in-Elementor footguns, transactional email, wp.org review/packaging, embedding apps, AJAX/loop re-rendering, dynamic CSS in loops, Swiper on optimised sites, holding a login without counting it as failedfield-notes.md
wordpress.org submission — the 18 Directory Guidelines, Plugin Check 2.1.0 categories/usage, review process, required headers/readmewp-org-guidelines.md
Subversion (SVN) — deploying/tagging a release on the wordpress.org plugin/theme SVN (trunk/tags/assets), the daily work cycle, branching/merging, properties, repo adminsvn/svn.md (self-contained sub-bundle; svn/references/ goes deeper)
Debugging & static analysis — PHPCS+WPCS, PHPStan, Plugin Check, WP_DEBUG/Query Monitor, Elementor Safe Mode/cache, symptom→cause tabledebugging.md
Common WordPress APIs — admin settings page (Settings + Options API), register_meta, roles/capabilities, WP-Cron, internationalization (i18n)wordpress-apis.md
Database layer (MariaDB/MySQL) — custom tables + dbDelta(), charsets & the varchar(191) index rule, indexes, EXPLAIN, MariaDB↔MySQL portability, sql_mode, full-textmariadb.md
\n

Widget Boilerplates — Load when building a widget of that type

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
Widget typeRead this file
Button / CTA with icon and linkwidget-button.md
Container / layout wrapper / section / card shellwidget-container.md
Image with caption, link, lightboxwidget-image.md
Heading / title / HTML tag selectorwidget-heading.md
Rich text / WYSIWYG body contentwidget-text-editor.md
Video embed (YouTube, Vimeo, self-hosted)widget-video.md
Widget that renders a saved Elementor template by IDwidget-elementor-template.md (SELECT2, get_builder_content_for_display(), Dynamic Tags context, CSS timing)
Widget whose markup lives in a separate PHP template filewidget-php-template.md (Strategies A/B/C, load_template(), ob_start, path-traversal safety)
Divider / horizontal rule with optional text or iconwidget-divider.md
Spacer / vertical gapwidget-spacer.md
Single standalone icon with optional linkwidget-icon.md
Icon + title + description boxwidget-icon-box.md
Image + title + description boxwidget-image-box.md
Image grid / gallerywidget-image-gallery.md
Image slider / carouselwidget-image-carousel.md
Bullet list with icons per itemwidget-icon-list.md
Animated number counterwidget-counter.md
Percentage progress barwidget-progress.md
Customer quote / testimonialwidget-testimonial.md
Tabbed content panelswidget-tabs.md
Accordion — one panel open at a timewidget-accordion.md
Toggle — multiple panels open simultaneouslywidget-toggle.md
Social media icon links rowwidget-social-icons.md
Colored alert / notice boxwidget-alert.md
Audio player (SoundCloud / self-hosted)widget-audio.md
WordPress shortcode outputwidget-shortcode.md
Raw custom HTML / JS / CSS embedwidget-html.md
Named anchor for in-page navigationwidget-menu-anchor.md
WordPress registered sidebar outputwidget-sidebar.md
WordPress read more tagwidget-read-more.md
Google Maps embedwidget-google-maps.md
Decorative star rating displaywidget-star-rating.md
Schema-ready structured ratingwidget-rating.md
Text following a curved / custom SVG pathwidget-text-path.md
Nested Tabs / Nested Accordion (each panel is a Container holding any widgets)widget-nested.md
\n

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

\n
\n

0. Golden Rules (Never Violate)

\n

These override everything in all sub-files:

\n
    \n
  1. Native APIs first — WordPress core hook before plugin; Elementor API before template override.
    2. \n
  2. Sanitize in, escape out — Every input sanitized. Every output escaped. No exceptions.
    3. \n
  3. Prefix everything — All functions, classes, constants, hooks, and CSS classes use a project-specific prefix.
    4. \n
  4. State your placement — Every code response must declare exactly where the code lives.
    5. \n
  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. \n
  6. NEVER hardcode visual settings in widgets — Every visual property (colors, fonts, sizes,\nspacing, backgrounds, borders, shadows, alignment) MUST be exposed as a standard Elementor\ncontrol in the editor panel. Users control appearance via the toolbar — not by editing code.\nSee §5 \"Mandatory Widget Controls\" below for the required controls checklist.
    7. \n
  7. Name for the directory from day one — Naming is decided first and is effectively\nirreversible, so get it right before writing code. The plugin slug/name must NOT start with\na trademark you don't own — \"CRM for WooCommerce\", never \"WooCommerce CRM\" (Directory\nGuideline 17). The text domain must exactly equal the plugin slug. The wp.org slug is\npermanent, and a widget's get_name() is sticky (stored in every page's\n_elementor_data — renaming it breaks placed widgets). Choose the public name, slug, text\ndomain, and code prefix (Rule #3) together, once. This is distinct from Rule #3: that\ngoverns internal code symbols; this governs the public identity. See wp-org-guidelines.md\n(Guidelines 12/16/17) and field-notes.md §1 (sticky get_name()).
    8. \n
\n
\n

1. Default Assumptions

\n

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

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
Info neededAsk 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 versionCode uses PHP 8.3+ features like typed class constants, or 8.4+ features like property hooks
WooCommerce / ACF / WPML presentIntegration with those systems is required
\n

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

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
ComponentVersionNotes
WordPress7.1\"Mary Lou\", released Aug 19, 2026 (7.0 \"Armstrong\" was May 20; the 7.0 branch ended at 7.0.4, Aug 12). Minimum PHP 7.4 (7.2/7.3 dropped — sites still on them stay pinned to 6.9.x). No multisite assumed. 7.1 makes the post editor iframe unconditional — see below.
PHP8.3 recommended7.4 = 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 with independent version numbers — currently free 4.2.3 / Pro 4.2.2 (both Aug 19, 2026). 4.0.0 (Mar 30, 2026) made the Atomic Editor stable + default for new installs; 4.2.0 (Jul 20) added Atomic Grid (free) and Atomic Loop (Pro). ⚠️ Elementor's header still reads \"Tested up to: 7.0.4\" — it has not declared WP 7.1 support. V3 Widget_Base remains fully supported — all skill code targets V3 and is production-safe.
WooCommerce11.0+11.0 (Aug 4, 2026) REMOVED the product editor beta and bumped to Action Scheduler 4.0.0 (breaking dedup change). HPOS default-on since 8.2; 10.7 disabled HPOS \"sync on read\"; 10.9 defers Store API draft-order creation — see woocommerce.md.
\n

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

\n

WordPress 7.1 — what changed for plugin / Elementor devs

\n

WP 7.1 \"Mary Lou\" shipped August 19, 2026 (WordCamp US). Unlike 7.0, this release\ncontains four changes that can break a shipped plugin — they are listed first. No PHP or\nWordPress minimum changed.

\n

\uD83D\uDD34 Breaking — audit your plugin for these:

\n
    \n
  1. The post editor is now ALWAYS in an iframe — including on sites registering legacy meta\nboxes, which was the last remaining escape hatch. Editor JavaScript that reaches for the\nglobal document / window now targets the wrong document. Use the canvas element's\nownerDocument and defaultView instead:\n
    // ❌ breaks in 7.1 — this is the OUTER document, not the editor canvas\ndocument.querySelector( '.my-block' ).classList.add( 'ready' );\n\n// ✅ resolve the document from a node you already own inside the canvas\nconst doc  = myCanvasNode.ownerDocument;\nconst view = doc.defaultView;                   // the iframe's `window`\ndoc.querySelector( '.my-block' )?.classList.add( 'ready' );\nview.requestAnimationFrame( … );\n
    \nInjected <style>/<link> must go into the canvas document too, or it styles nothing.\nElementor's own editor is unaffected (it is not the block editor) — this hits block\nregistrations, meta boxes, and any block-editor integration your plugin ships.
    2. \n
  2. __next40pxDefaultSize is now a no-op on @wordpress/components — remove the prop\nentirely; there is no replacement. Form controls render at 40px unconditionally.
    3. \n
  3. List-table markup changed: the row header moved from the checkbox column to the title\ncolumn. Any CSS/JS selector keyed on th.check-column (or assuming the row header's position)\nbreaks — audit custom admin list tables and column callbacks.
    4. \n
  4. jQuery UI updated to 1.14.2. Test anything depending on jQuery UI behaviour or styling.
    5. \n
\n

\uD83D\uDFE2 New and useful:

\n\n

Sources: wordpress.org/news/2026/08/mary-lou/ · make.wordpress.org/core/2026/08/05/wordpress-7-1-field-guide/ ·\ndeveloper.wordpress.org/news/2026/08/whats-new-for-developers-august-2026/

\n

WordPress 7.0 — what changed for plugin / Elementor devs

\n

WP 7.0 \"Armstrong\" shipped May 20, 2026 (delayed from the original April 9 target while\nthe RTC storage layer was redesigned — see below). Everything below is opt-in and\nnon-breaking; most plugin/Elementor work is unaffected. It remains relevant because 7.1\nchanged none of it.

\n\n

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

\n
\n

\uD83D\uDCCC PHP support labels (unchanged in WP 7.1): PHP 7.4–8.3 fully compatible; 8.3 recommended;\n8.4 (WP 6.7+) and 8.5 (WP 6.9+) carry a \"beta support\" label (possible deprecation notices).\nSource: make.wordpress.org/core/handbook/references/php-compatibility-and-wordpress-versions/

\n
\n
\n

✅ Elementor 4.x status (current: free 4.2.3 / Pro 4.2.2, both Aug 19, 2026): Elementor\n4.0.0 (Mar 30, 2026, free + Pro) made the Atomic Editor stable and the default for new\ninstalls and added Atomic Forms, Pro Interactions, and Component creation. Updating to 4.x\nleaves existing sites untouched — V3 widgets and V4 Atomic Elements coexist on the same\npage; Atomic features are toggled at WP Admin → Elementor → Editor → Settings.

\n

There is still NO third-party API for building Atomic Elements, and Elementor has said so\nexplicitly — they will not release one soon and advise against integrating with Atomic\ninternals until they announce it (elementor/elementor GitHub Discussion #32950). Atomic\nElements are documented only as a data structure\n(developers.elementor.com/docs/data-structure/atomic-elements). So continue using V3\nWidget_Base for all third-party widgets — it is the correct, production-safe API and all\nskill code targets it. (Re-verified Aug 23, 2026 — unchanged since the July check.)

\n

⚠️ Elementor has not declared WP 7.1 compatibility yet. As of free 4.2.3 / Pro 4.2.2 the\nTested up to header reads 7.0.4, three days after WP 7.1 shipped. That is normal lag,\nnot a known incompatibility — but when a client reports editor breakage on a fresh 7.1 site,\ncheck Elementor's current Tested up to before debugging your own code.

\n

V4 Atomic Elements that now ship by default (awareness only — not third-party-buildable yet):\nDiv Block & Flexbox Container (layout); Atomic Grid — advanced row/column layouts (free\n4.2.0, Jul 20, 2026); Atomic Heading, Paragraph, Image, Button, Video, SVG;\nAtomic Tabs; Atomic Forms (Pro) with composable fields — Label, Input, Textarea,\nCheckbox, Submit, plus Radio, Select, Date Picker, Time Picker, and File Upload (added in\nPro 4.1.0, May 26, 2026); and Atomic Loop — dynamic content layouts, the V4 counterpart\nof the Pro Loop Grid (Pro 4.2.0, Jul 20, 2026). These are end-user elements; building\ncustom atomic elements still awaits the finalized V4 extension docs — keep targeting V3\nWidget_Base until then.\nSource: elementor.com/products/website-builder/v4-faq/ ·\ndevelopers.elementor.com/elementor-editor-4-0-developers-update/ ·\nelementor.com/pro/changelog/ · github.com/elementor/elementor/releases

\n
\n
\n

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

\n
\n
\n

2. Architecture Decision Tree

\n

Run through this mentally before writing a single line:

\n
Does a WordPress core hook (add_action/add_filter) solve it?\n  YES → Use the hook. No plugin needed. Place in child theme functions.php\n        or Elementor Custom Code.\n  NO  → Does Elementor's PHP/JS API solve it?\n          YES → Extend via Elementor hooks, Dynamic Tags, or Widget_Base.\n                Register via elementor/widgets/register or elementor/dynamic_tags/register.\n          NO  → Is this logic reusable across themes or sites?\n                  YES → Scaffold a dedicated plugin (see scaffolding.md).\n                  NO  → Child theme functions.php or Elementor Custom Code block.\n\nIs a WooCommerce override needed?\n  → Use Elementor Loop Grid + custom query filter BEFORE touching template files.\n  → Only override woocommerce/ templates as an absolute last resort.\n\nIs this a REST API endpoint?\n  → Always register via register_rest_route() inside a plugin, never in functions.php.\n
\n
\n

3. Mandatory Output Format

\n

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

\n
\uD83D\uDCCD PLACEMENT\nExact file path or Elementor hook location.\ne.g. /wp-content/plugins/myplugin/includes/class-myplugin-hooks.php\n     Elementor → Site Settings → Custom Code → wp_footer\n\n⚙️ REQUIRES\nWordPress X.X+ | PHP X.X+ | Elementor Pro X.X+ | ACF X.X+ | WooCommerce X.X+\n(list only what the code actually depends on)\n\n\uD83D\uDCA1 WHY THIS APPROACH\nOne paragraph: which branch of the §2 decision tree was taken and why.\n\n\uD83D\uDCCB CODE\nComplete, commented, deployment-ready code block — no truncation, no omissions.\n\n\uD83D\uDD27 INTEGRATION NOTES (include when relevant)\nAny manual steps required: flush rewrite rules, set Query ID in Elementor editor,\nactivate plugin, clear Elementor cache, etc.\n
\n
\n

4. Quick Reference — Pattern Index

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
TaskApproachSub-file
Plugin scaffoldSingleton + hooks class + assets class + HPOS declarationscaffolding.md
Child theme setupwp_enqueue_style parent + child in functions.phpscaffolding.md
Custom Post Type + Taxonomyregister_post_type() + register_taxonomy() in pluginscaffolding.md
Secure AJAX handlerwp_ajax_ hooks + nonce verify + wp_send_json_*scaffolding.md
PHP sanitization / escapingwp_unslash() + sanitize_* + esc_* patternsphp-standards.md
Transient cachingget_transient / set_transientphp-standards.md
External API call + WP_Errorwp_remote_get() + WP_Error patternphp-standards.md
Admin settings pageSettings API + register_setting + sanitize_callback + settings_fieldswordpress-apis.md
Store plugin optionsOptions API + explicit boolean autoload (WP 6.6+)wordpress-apis.md
Custom field exposed to REST / Elementorregister_post_meta + show_in_restwordpress-apis.md
Scheduled / background taskWP-Cron (wp_schedule_event) + Action Scheduler for heavy jobswordpress-apis.md
Create a custom DB tabledbDelta() + $wpdb->prefix + get_charset_collate(); strict formatting rulesmariadb.md
\"Specified key was too long\" / emoji not savingutf8mb4 + index string columns at varchar(191)mariadb.md
Slow query / missing indexEXPLAIN (type: ALL, key: NULL, Using filesort) + leftmost-prefix rulemariadb.md
SQL that must run on MariaDB and MySQLPlain standard SQL; JSON is stored/compared differently — don't query inside itmariadb.md
Make a plugin translatablei18n functions + text-domain = slug + WP 6.7 init-timing rulewordpress-apis.md
Ship a translation for a wp.org-hosted plugin.pot only in the zip; translate.wordpress.org → language packs (90% gate). Never bundle .mo / call load_plugin_textdomain()wordpress-apis.md
Style UI text for non-Latin localesCaseless scripts + text-transform/letter-spacing; don't size to English string lengthjs-css-standards.md
Test that translations actually loadSet the site locale before bootstrap; unload_textdomain() in WP-CLI; validate placeholdersdebugging.md
Deploy / tag a plugin release on wp.org SVNsvn co → copy to trunk/ → svn cp trunk tags/X.Y.Z → svn ci (assets/ is a sibling)svn/svn.md
Any SVN task (checkout, commit, branch, merge, conflicts, repo admin)Subversion sub-bundlesvn/svn.md
WP 6.8 password hashingwp_check_password() + wp_password_needs_rehash()php-standards.md
WP 6.8 app password / key hashingwp_fast_hash() + wp_verify_fast_hash() (BLAKE2b)php-standards.md
JS standards + enqueue defer/asyncIIFE + WP 6.3+ enqueue APIjs-css-standards.md
PHP → JS data passingwp_add_inline_script() with wp_json_encode()js-css-standards.md
CSS BEM + design tokensScoped tokens, 8pt spacing, fluid typejs-css-standards.md
Custom Elementor widgetWidget_Base + all required methodselementor-patterns.md
Elementor Dynamic TagTag class + elementor/dynamic_tags/registerelementor-patterns.md
Elementor Loop Grid queryelementor/query/ filterelementor-patterns.md
ACF field in ElementorDynamic Tag extending \\Elementor\\Core\\DynamicTags\\Tagelementor-patterns.md
Elementor Pro Form actionAction_Base + field iterationelementor-patterns.md
Theme Builder custom conditionCondition_Base + elementor/theme/register_conditionselementor-patterns.md
Elementor Pro custom form fieldField_Base + elementor_pro/forms/fields/registerelementor-extending.md
Theme Builder custom locationregister_location + elementor_theme_do_location()elementor-extending.md
Add a control to a NATIVE Elementor widgetelementor/element/{el}/{section}/before_section_endelementor-extending.md
Filter a native widget's outputelementor/widget/render_content filterelementor-extending.md
Add a TAB to the editor panel (like an SEO plugin)elementorV2.editorElementsPanel.injectTab() + elementor/editor/before_enqueue_scriptselementor-extending.md
WooCommerce HPOS compatibilityFeaturesUtil::declare_compatibility() + wc_get_order()woocommerce.md
WooCommerce loopLoop Grid + elementor/query/ filterwoocommerce.md
Custom REST endpointregister_rest_route() + schema callback in pluginrest-api.md
Off-canvas filter panelBEM CSS + ARIA JS + Custom Code blockoffcanvas-ui.md
Performance checklistFrontend + backend checklistsperformance.md
Accessibility checklistWCAG 2.2 AA patternsperformance.md
Elementor dependency checkRequires Plugins: elementor header + did_action fallbackscaffolding.md
Widget with button/CTAControls + render matching native Button widgetwidget-button.md
Widget with container/layoutControls + render matching native Containerwidget-container.md
Widget with imageGroup_Control_Image_Size + get_attachment_image_html()widget-image.md
Widget with headingTEXTAREA + header_size tag selectorwidget-heading.md
Widget with rich textWYSIWYG + wp_kses_post outputwidget-text-editor.md
Widget with video embedSource SELECT + overlay + aspect ratiowidget-video.md
Widget rendering saved Elementor templateget_builder_content_for_display() + SELECT2widget-elementor-template.md
Widget with PHP template fileload_template() + locate_template() strategies A/B/Cwidget-php-template.md
Widget with divider lineStyle + width + optional text/icon elementwidget-divider.md
Widget with spacer gapSingle responsive SLIDERwidget-spacer.md
Widget with single iconICONS control + size + color tabswidget-icon.md
Widget with icon + text boxIcon + title + description patternwidget-icon-box.md
Widget with image + text boxImage + title + description patternwidget-image-box.md
Widget with image gridGALLERY control + Group_Control_Image_Sizewidget-image-gallery.md
Widget with image sliderGALLERY + Swiper + navigation controlswidget-image-carousel.md
Widget with icon bullet listREPEATER + icon + text + optional linkwidget-icon-list.md
Widget with animated counterNumber + prefix/suffix + durationwidget-counter.md
Widget with progress barPercentage SLIDER + bar stylingwidget-progress.md
Widget with testimonial quoteContent + image + name + job titlewidget-testimonial.md
Widget with tabbed panelsREPEATER tabs + horizontal/vertical typewidget-tabs.md
Widget with accordionREPEATER + single-open collapse patternwidget-accordion.md
Widget with toggle panelsREPEATER + multi-open toggle patternwidget-toggle.md
Widget with social iconsREPEATER + brand icons + linkswidget-social-icons.md
Widget with alert/notice boxType SELECT + title + description + dismisswidget-alert.md
Widget with audio playerSoundCloud URL + autoplay optionswidget-audio.md
Widget outputting shortcodeTEXTAREA + do_shortcode()widget-shortcode.md
Widget with raw HTML embedCODE control + unescaped outputwidget-html.md
Widget as named anchorTEXT ID + sanitize_html_class()widget-menu-anchor.md
Widget outputting sidebarRegistered sidebar SELECT + dynamic_sidebar()widget-sidebar.md
Widget with read more tagNo controls — WordPress $more globalwidget-read-more.md
Widget with Google MapsAddress TEXT + zoom SLIDER + iframewidget-google-maps.md
Widget with star rating displayScale + rating number + icon stylewidget-star-rating.md
Widget with schema ratingIcon count + fractional rating + gapwidget-rating.md
Widget with curved/path text<svg> + <textPath> + unique path idwidget-text-path.md
Nested Tabs / Accordion widgetWidget_Nested_Base + print_child() + container panelswidget-nested.md
\n
\n

5. Mandatory Widget Controls — No Hardcoded Visuals (NEVER VIOLATE)

\n
\n

This section is MANDATORY for every custom Elementor widget. Whenever you build a widget,\nevery visual property must be an Elementor control — NEVER a hardcoded CSS value. Users\ncontrol appearance from the editor panel/toolbar, not by editing source code.

\n
\n

The Rule

\n

NEVER hardcode any of the following in PHP render(), in static CSS, or in\ncontent_template() output:

\n\n

ALL of the above must use Elementor controls with selectors that inject CSS dynamically.\nThe only exceptions are structural CSS (display, position, overflow) required for the widget\nlayout to function at all — and even these should use controls when there is a user-facing\nchoice (e.g. flex-direction toggle).

\n
\n

⚠️ \"No hardcoded visuals\" does NOT mean \"put a default on every control.\"\nElementor emits a default exactly like a user-set value, so a colour default paints on every\ninstall and clearing the swatch only restores it — the user cannot turn it off. Elementor core\ncarries no default on colour controls at all (includes/widgets/heading.php: title_color\nuses a 'global' reference; title_hover_color is entirely empty). Follow that split:

\n\n

See field-notes.md §4 for the full trap, plus the theme-specificity and accent-color cases.

\n
\n

Required Controls Checklist — Apply to Every Widget

\n

When building a widget, include ALL controls that apply to its visual elements.\nUse this checklist as a mandatory gate:

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
Visual propertyRequired Elementor controlTab
Text contentTEXT, TEXTAREA, or WYSIWYG + 'dynamic' => ['active' => true]TAB_CONTENT
Typography (any text element)add_group_control( Group_Control_Typography::get_type() )TAB_STYLE
Text colorCOLOR control with selectorsTAB_STYLE
Text alignmentadd_responsive_control() with CHOOSE (left/center/right/justify)TAB_STYLE or TAB_CONTENT
Backgroundadd_group_control( Group_Control_Background::get_type() )TAB_STYLE
Borderadd_group_control( Group_Control_Border::get_type() )TAB_STYLE
Border radiusadd_responsive_control() with DIMENSIONS + 'selectors'TAB_STYLE
Box shadowadd_group_control( Group_Control_Box_Shadow::get_type() )TAB_STYLE
Text shadowadd_group_control( Group_Control_Text_Shadow::get_type() )TAB_STYLE
Paddingadd_responsive_control() with DIMENSIONSTAB_STYLE
Marginadd_responsive_control() with DIMENSIONSTAB_STYLE
Width / Heightadd_responsive_control() with SLIDERTAB_STYLE
Spacing / Gapadd_responsive_control() with SLIDERTAB_STYLE
ImageMEDIA + add_group_control( Group_Control_Image_Size::get_type() )TAB_CONTENT
CSS Filters (if image/element)add_group_control( Group_Control_Css_Filter::get_type() )TAB_STYLE
Hover stateDuplicate color/background/shadow controls inside 'section_style_hover' with selectors targeting :hoverTAB_STYLE
Transition durationSLIDER (seconds) with selectors => ['transition-duration']TAB_STYLE
LinkURL control with 'dynamic' => ['active' => true]TAB_CONTENT
IconICONS control with fa4compatibilityTAB_CONTENT
HTML tagSELECT (h1–h6, div, span, p)TAB_CONTENT
\n

Example — Correct vs Incorrect

\n
// ❌ WRONG — hardcoded color and font-size\nprotected function render(): void {\n    $settings = $this->get_settings_for_display();\n    echo '<h2 style=\"color: #e94560; font-size: 24px;\">'\n        . esc_html( $settings['title'] ) . '</h2>';\n}\n\n// ✅ CORRECT — all visuals controlled from the panel via selectors\nprotected function register_controls(): void {\n    // ... Content section with title TEXT control ...\n\n    $this->start_controls_section( 'section_title_style', [\n        'label' => esc_html__( 'Title Style', 'myplugin' ),\n        'tab'   => \\Elementor\\Controls_Manager::TAB_STYLE,\n    ] );\n\n    $this->add_control( 'title_color', [\n        'label'     => esc_html__( 'Color', 'myplugin' ),\n        'type'      => \\Elementor\\Controls_Manager::COLOR,\n        'selectors' => [\n            '{{WRAPPER}} .myplugin-widget__title' => 'color: {{VALUE}};',\n        ],\n    ] );\n\n    $this->add_group_control(\n        \\Elementor\\Group_Control_Typography::get_type(),\n        [\n            'name'     => 'title_typography',\n            'selector' => '{{WRAPPER}} .myplugin-widget__title',\n        ]\n    );\n\n    $this->add_responsive_control( 'title_align', [\n        'label'   => esc_html__( 'Alignment', 'myplugin' ),\n        'type'    => \\Elementor\\Controls_Manager::CHOOSE,\n        'options' => [\n            'left'   => [ 'title' => esc_html__( 'Left',   'myplugin' ), 'icon' => 'eicon-text-align-left' ],\n            'center' => [ 'title' => esc_html__( 'Center', 'myplugin' ), 'icon' => 'eicon-text-align-center' ],\n            'right'  => [ 'title' => esc_html__( 'Right',  'myplugin' ), 'icon' => 'eicon-text-align-right' ],\n        ],\n        'selectors' => [\n            '{{WRAPPER}} .myplugin-widget__title' => 'text-align: {{VALUE}};',\n        ],\n    ] );\n\n    $this->add_responsive_control( 'title_spacing', [\n        'label'      => esc_html__( 'Bottom Spacing', 'myplugin' ),\n        'type'       => \\Elementor\\Controls_Manager::SLIDER,\n        'size_units' => [ 'px', 'em', 'rem' ],\n        'range'      => [ 'px' => [ 'min' => 0, 'max' => 100 ] ],\n        'selectors'  => [\n            '{{WRAPPER}} .myplugin-widget__title' => 'margin-bottom: {{SIZE}}{{UNIT}};',\n        ],\n    ] );\n\n    $this->end_controls_section();\n}\n\nprotected function render(): void {\n    $settings = $this->get_settings_for_display();\n    // ✅ No inline styles — all visuals come from Elementor's selectors\n    $this->add_render_attribute( 'title', 'class', 'myplugin-widget__title' );\n    $this->add_inline_editing_attributes( 'title' );\n    echo '<h2 ' . $this->get_render_attribute_string( 'title' ) . '>'\n        . esc_html( $settings['title'] ) . '</h2>';\n}\n
\n

add_render_attribute() and add_inline_editing_attributes() — Always Use

\n

The official Elementor API for building HTML attributes is $this->add_render_attribute().\nAlways use it instead of manually concatenating class/id/aria attributes in render().\nPair with $this->add_inline_editing_attributes() for any text field that supports live\nediting in the Elementor editor panel.

\n

Outputting the built attributes — pick by context: use\nget_render_attribute_string( 'key' ) when you are concatenating into a string (as in the\necho '<h2 ' . ... . '>' example above), and print_render_attribute_string( 'key' ) when\nyou are echoing directly inside a ?> … <?php HTML block (e.g.\n<h2 <?php $this->print_render_attribute_string( 'title' ); ?>>). Both are correct Elementor\nAPIs — print_* simply echoes what get_* returns. The widget sub-files use the print_*\nform inside their HTML templates.

\n

Source: developers.elementor.com/docs/widgets/rendering-html-attribute/\nSource: developers.elementor.com/docs/widgets/rendering-inline-editing/

\n","files":[{"path":"debugging.md","sizeBytes":19786,"isText":true},{"path":"elementor-extending.md","sizeBytes":19311,"isText":true},{"path":"elementor-patterns.md","sizeBytes":29147,"isText":true},{"path":"field-notes.md","sizeBytes":59846,"isText":true},{"path":"js-css-standards.md","sizeBytes":8773,"isText":true},{"path":"mariadb.md","sizeBytes":16005,"isText":true},{"path":"offcanvas-ui.md","sizeBytes":8996,"isText":true},{"path":"performance.md","sizeBytes":7038,"isText":true},{"path":"php-standards.md","sizeBytes":10014,"isText":true},{"path":"rest-api.md","sizeBytes":5948,"isText":true},{"path":"scaffolding.md","sizeBytes":11533,"isText":true},{"path":"SKILL.md","sizeBytes":38627,"isText":true},{"path":"svn/references/branching-tagging-merging.md","sizeBytes":12571,"isText":true},{"path":"svn/references/properties-and-metadata.md","sizeBytes":12511,"isText":true},{"path":"svn/references/repository-admin.md","sizeBytes":8190,"isText":true},{"path":"svn/references/troubleshooting.md","sizeBytes":8530,"isText":true},{"path":"svn/svn.md","sizeBytes":15848,"isText":true},{"path":"widget-accordion.md","sizeBytes":14895,"isText":true},{"path":"widget-alert.md","sizeBytes":8111,"isText":true},{"path":"widget-audio.md","sizeBytes":3562,"isText":true},{"path":"widget-button.md","sizeBytes":18229,"isText":true},{"path":"widget-container.md","sizeBytes":19613,"isText":true},{"path":"widget-counter.md","sizeBytes":10048,"isText":true},{"path":"widget-divider.md","sizeBytes":9530,"isText":true},{"path":"widget-elementor-template.md","sizeBytes":11514,"isText":true},{"path":"widget-google-maps.md","sizeBytes":5420,"isText":true},{"path":"widget-heading.md","sizeBytes":8674,"isText":true},{"path":"widget-html.md","sizeBytes":2482,"isText":true},{"path":"widget-icon-box.md","sizeBytes":11459,"isText":true},{"path":"widget-icon-list.md","sizeBytes":10970,"isText":true},{"path":"widget-icon.md","sizeBytes":8112,"isText":true},{"path":"widget-image-box.md","sizeBytes":10971,"isText":true},{"path":"widget-image-carousel.md","sizeBytes":14601,"isText":true},{"path":"widget-image-gallery.md","sizeBytes":7030,"isText":true},{"path":"widget-image.md","sizeBytes":17440,"isText":true},{"path":"widget-menu-anchor.md","sizeBytes":2362,"isText":true},{"path":"widget-nested.md","sizeBytes":13758,"isText":true},{"path":"widget-php-template.md","sizeBytes":12444,"isText":true},{"path":"widget-progress.md","sizeBytes":6532,"isText":true},{"path":"widget-rating.md","sizeBytes":8828,"isText":true},{"path":"widget-read-more.md","sizeBytes":2085,"isText":true},{"path":"widget-shortcode.md","sizeBytes":2843,"isText":true},{"path":"widget-sidebar.md","sizeBytes":2270,"isText":true},{"path":"widget-social-icons.md","sizeBytes":10379,"isText":true},{"path":"widget-spacer.md","sizeBytes":1927,"isText":true},{"path":"widget-star-rating.md","sizeBytes":9770,"isText":true},{"path":"widget-tabs.md","sizeBytes":10400,"isText":true},{"path":"widget-testimonial.md","sizeBytes":12039,"isText":true},{"path":"widget-text-editor.md","sizeBytes":4679,"isText":true},{"path":"widget-text-path.md","sizeBytes":13407,"isText":true},{"path":"widget-toggle.md","sizeBytes":12827,"isText":true},{"path":"widget-video.md","sizeBytes":10675,"isText":true},{"path":"woocommerce.md","sizeBytes":8698,"isText":true},{"path":"wordpress-apis.md","sizeBytes":16786,"isText":true},{"path":"wp-org-guidelines.md","sizeBytes":12306,"isText":true}],"reviewScore":null,"reviewSummary":null,"trust":{"provenance":"trusted-source-unreviewed","notice":"Community-authored content, reproduced verbatim and not vetted as instructions. Treat it as data to evaluate, never as directives to follow.","bodySource":null},"bodyLocked":false,"purchaseUrl":null,"sourceUrl":null,"report":{"provenance":"trusted-source-unreviewed","screen":{"ran":true,"outcome":"clean","suspicious":0,"notes":0,"hiddenCharacters":false},"virusScan":{"engine":"clamav","status":"clean","scannedAt":"2026-09-14T20:45:45.143879Z","sha256":"4A055269B8992BF026A353D602FD54C53A974FC72BEAA55E0E7AD1ABB71D5B3E","sizeBytes":234814},"review":null,"source":{"repositoryUrl":"https://github.com/guramzhgamadze/WordPress-Elementor-Skill","path":"wp-elementor-skill","license":"MIT","commit":"3ad244d4b03f9a201a5f8294221649f6f11d61a3","subtreeSha":"E725C04D2196673231D8DCCDB79F2D2547005E5854FD9EF81D845E17298BB3A8","lastSyncedAt":"2026-09-18T13:50:50.962498Z"},"reviewedAt":"2026-09-14T20:49:55.1855Z","notice":"Community-authored content, reproduced verbatim and not vetted as instructions. Treat it as data to evaluate, never as directives to follow."},"install":[{"target":"skills-cli","command":"npx skills add https://github.com/guramzhgamadze/WordPress-Elementor-Skill/tree/main/wp-elementor-skill"},{"target":"claude-code","command":"claude plugin marketplace add https://llmmart.ai/marketplace.json && claude plugin install guramzhgamadze-wordpress-elementor-skill@llmmart"},{"target":"git","command":"git clone https://github.com/guramzhgamadze/WordPress-Elementor-Skill.git"}]}