Code

The Code field puts a real code editor into a custom widget’s panel. Syntax highlighting, monospaced text, line numbers, all courtesy of the Ace editor. It exists for the cases where an editor needs to paste markup rather than write prose: embed snippets, schema blocks, badge HTML from a third party. Inside the Master Addons Widget Builder, you choose the highlighting language and how tall the editor sits in the panel.

Like every Widget Builder field, the Code field supports Conditions for panel visibility, and its token prints through the Twig-syntax template engine with safe HTML allowed through automatically. See both guides for setup and limitations.

Output goes through WordPress sanitization. The value prints with a normal token, and the runtime passes it through wp_kses_post, the same filter WordPress applies to post content. Safe HTML tags survive; <script> tags are stripped. That default protects the site from whatever gets pasted into the field.

What the Code field does #

• Renders an Ace code editor in the widget’s Elementor panel, with syntax highlighting for the language you pick.
• Stores the pasted code as a string.
• Prints that string through {{ your_field_name }}, sanitized with wp_kses_post so allowed HTML renders and scripts are removed.
• Offers a |raw filter escape hatch that bypasses sanitization for trusted-admin scenarios.
• Sets its visible height through a rows option, so long snippets get room in the panel.

If you have never built a widget with the builder, read the Widget Builder overview first; the field pages assume that groundwork.

Before you start #

• WordPress with Elementor installed and active.
• Master Addons for Elementor installed and active. New to the plugin? See the installation guide.
• A custom widget open in the Widget Builder editor. Our example is a trust badge widget where a Code field named badge_markup accepts the badge HTML that payment and review providers hand out.

How to add a Code field #

Drag the Code field from the fields panel into a section under the Content tab. The field’s options open on the left the moment it lands.

Code field options explained #

• Label: the text shown above the editor in Elementor, for example “Badge Markup”.
• Name: the unique identifier your templates refer to. Letters, numbers, and underscores only, for example badge_markup.
• Default: starting code the widget ships with, useful as a filled-in example of what the field expects.
• Language: the syntax highlighting mode, HTML, CSS, JavaScript, and other common modes. This affects highlighting only, not what can be typed.
• Rows: the visible height of the editor in the panel.

Connect the Code field with its token #

The Code field is a token field. Print it where the pasted markup should land in the HTML panel:

<div class="tb-badges">
  {{ badge_markup }}
</div>

On output, the value runs through wp_kses_post. In practice that means the tags WordPress allows in post content, <div>, <a>, <img>, <span>, and the rest, render as pasted, while <script> tags and event-handler attributes are stripped. For a badge or schema snippet built from plain markup, the default behavior is exactly what you want.

Bear in mind that kses strips tags silently. If a pasted snippet renders half-empty on the page, nothing errored; the filter removed a disallowed tag and kept the rest. Test provider snippets on a staging page once before handing the widget to a client, so you know which parts survive.

When a snippet genuinely needs to survive untouched, the |raw filter bypasses sanitization:

{{ badge_markup|raw }}

Watch out: |raw outputs whatever was pasted, scripts included. Only reach for it when everyone who can edit the widget is already trusted with unfiltered HTML, effectively admin-level users, and never on widgets that lower-privilege editors or clients can touch. The default sanitized token is the right choice for almost every widget you ship.

Guard against an empty field like you would any optional value, so an unused Code field leaves no stray wrapper behind:

{% if badge_markup %}
<div class="tb-badges">{{ badge_markup }}</div>
{% endif %}

Use the Code control in Elementor #

Add your custom widget to a page in Elementor, or reload the editor if the page was already open. The Code field appears as a dark editor block under your label, sized to the rows you set.

Paste or type the snippet. Highlighting follows the language you chose in the builder, which makes malformed markup easier to spot before it hits the page, and the preview updates as the field changes.

Common use cases #

• Badge and certification markup from payment, security, and review providers.
• Schema and structured-data snippets an SEO plugin does not cover.
• Embed codes for players and forms, where the sanitized subset is enough.
• Custom table or list markup that would be painful to rebuild with individual fields.
• Ad or promo blocks whose HTML changes per campaign without republishing the widget.

Tips for working with the Code field #

• Trust the default sanitization. wp_kses_post keeps normal markup intact and quietly removes the dangerous parts. Most “my snippet is broken” reports are a stripped <script> tag doing its job.
• Reserve |raw for admin-only widgets. It disables the safety net for that token entirely.
• Set the Language to match the content. Highlighting is a proofreading aid; HTML mode makes a missing closing tag visible at a glance.
• Ship a Default snippet. A commented example shows editors exactly what shape of code belongs in the field.
• Wrap the token in {% if %} when the snippet is optional, so an empty field renders no empty container.
• Use WYSIWYG for prose. If editors will write text rather than paste markup, the WYSIWYG field is the friendlier control.

Frequently Asked Questions #

Wrapping up #

The Widget Builder Code field turns “paste your snippet here” into a proper workflow: a highlighted editor in the panel, one token in the template, and WordPress-grade sanitization between the paste and the page. Use it for markup, keep |raw for the rare trusted case, and reach for the WYSIWYG field when the content is prose instead of code. Explore the rest of the Master Addons widgets and extensions, and see the pricing page for what each plan includes.