Code

The Code option is a specialized control that adds a syntax-highlighted code editor field to your custom widget’s settings. It allows users to input and edit raw code snippets in various programming and markup languages directly from the Elementor editor.

Why would someone use it in a custom widget? #

Use this control when you need to provide users with a way to insert custom code snippets that are part of the widget’s functionality or output. This is ideal for adding custom HTML structures, inline CSS/JS, shortcodes from other plugins, SVG graphics, or template snippets, all with the benefit of proper syntax highlighting for accuracy.

Where This Option Appears #

• In Widget Builder: You add this control in the Content tab. It appears as a field configurable for a specific programming language.
• In the Elementor Editor: Once saved, it appears as a dedicated code editor panel within your widget’s settings. It features line numbers and color-coded syntax highlighting based on the selected language, making code easier to write and review.

Available Settings #

Here are the configurable settings for the Code control based on the provided screenshots:

Basic Settings #

• Label: The name of the control shown above the editor (e.g., “Custom HTML”, “Inline CSS”, “Header Script”).
• Name: The unique machine-readable ID (like custom_html) used to create the dynamic shortcode.
• Description: Optional text that appears below the editor to provide context (e.g., “Enter valid HTML for the banner.”).
• Language: This is the core feature. A dropdown menu to set the syntax highlighting language for the editor. Major supported languages include:
  • Markup/Data: HTML, Markdown, SVG, JSON, Text
  • Stylesheets: CSS, SASS, SCSS, LESS
  • Programming/Scripting: JavaScript, TypeScript, PHP, Python, Twig
  • Database: SQL, MySQL

Advanced Settings #

• Show Label: Toggles the control’s label on or off.
• Label Block (Display Label): Makes the label take the full width of the panel.
• Responsive Control: Allows setting different code values for desktop, tablet, and mobile views.
• Dynamic Support: When enabled, the content of this code field can be populated dynamically from a WordPress source.
• Frontend Available: When enabled, the code content is passed to your widget’s frontend JavaScript as a string variable.
• Separator: Adds a visual line to group this control.
• Conditions: Show or hide this code editor based on other control values.
• Control Classes & Selector: Allows advanced styling of the control’s wrapper in the editor panel.

Generated Shortcode #

When you add a Code control with the Name custom_css, Widget Builder generates the dynamic shortcode: {{custom_css}}.

• What it represents: This shortcode is a placeholder for the exact raw code text entered into the field, without automatic execution or rendering.
• Where to use it: You can place this shortcode in your HTML Panel to output the code as a text string. Crucially, it is most powerful when used in your widget’s main Code panels (JS/HTML/CSS) to dynamically inject user-provided code into your template logic.

How to Use It: A Practical Example #

Let’s create an “Embed Snippet” widget that lets users safely add custom HTML or scripts.

1. In Widget Builder’s Content tab, add a Code control.
2. Set the Label to Custom HTML Snippet. The Name will auto-fill as custom_html_snippet.
3. Select HTML as the Language for proper highlighting.
4. In your widget’s main HTML Panel, you can place the shortcode where the code should be injected: {{{custom_html_snippet}}}. (Note: Triple braces {{{ }}} might be required to output raw, unescaped HTML).
5. Alternatively, in your main JS Panel, you could use the value to create a dynamic element: document.getElementById('target').innerHTML = '{{custom_html_snippet}}';.

Now, in Elementor, a user can drag in your widget and paste a complex HTML snippet (like an embed code for a video, map, or calculator) into the dedicated, highlighted editor field.

Common Use Cases #

• Custom HTML/Embed Blocks: Allow users to insert third-party embed codes (YouTube, Maps, Calendars) or custom HTML structures.
• Inline Style/Script Injection: Provide a field for power users to add page-specific CSS rules or JavaScript snippets.
• Shortcode Support: Let users input shortcodes from other plugins (e.g., [contact-form-7]) that your widget will then execute.
• Dynamic SVG Graphics: Use with the SVG language setting to let users paste raw SVG code for custom icons or illustrations.
• Template Tags/Snippets: For advanced widgets, provide a field to insert logic snippets (e.g., PHP or Twig code for developers).

Helpful Tips #

• Choose Language Wisely: Setting the correct Language dramatically improves usability by providing the right highlighting and hinting, preventing syntax errors.
• Security Consideration: Be cautious. A Code control that outputs raw HTML/JS can be a security risk if misused. It’s best suited for trusted admin users or specific, controlled use cases.
• Use for Configuration: This control is excellent for making a widget highly configurable. For example, a “Chart” widget could have a Code control set to JSON where users paste their custom data configuration.
• Combine with Conditions: Use the Conditions setting to show a “Custom CSS” code editor only if a user switches a “Advanced Mode” toggle to “On,” keeping the interface clean for beginners.