Code

The Code field puts a small code editor into a custom widget you build with the Master Addons Widget Builder. Editors paste a snippet, such as the badge HTML a payment provider hands out, and the field keeps it readable with line numbers and syntax highlighting. It’s the field for markup that has to be pasted rather than typed as prose.

Code is a Pro field. The free plugin includes a limited Widget Builder, and the full set of fields comes with Master Addons Pro.

What the Code field does #

• Adds a code editor to your widget’s panel in Elementor, with line numbers and highlighting.
• Highlights in the language you choose, from HTML and CSS to JSON, SVG and PHP.
• Saves whatever was pasted as text.
• Prints it through a token such as {{ badge_markup }}, cleaned with WordPress’s own post content filter so allowed HTML renders and script tags are dropped.
• Has a raw filter for the rare case where a snippet has to go out untouched.

New to the builder? Read the Widget Builder overview first, then come back with a widget open.

Before you start #

• WordPress with Elementor installed and active.
• Master Addons for Elementor and Master Addons Pro, both active. The installation guide covers setup.
• A widget open in the Widget Builder. The example in this guide is a “Trust Badges” widget: a Text field for the heading and a Code field named badge_markup that takes the provider’s badge HTML.

How to add a Code field #

1. Go to Master Addons > Widget Builder and open your widget.
2. Add a section on the Content tab, for example “Badges”.
3. Type code in the field search box on the left.
4. Drag Code into the section. Click the pencil on the field to open its settings.

Code field options explained #

• Label: the text above the editor in Elementor, for example “Badge Markup”.
• Name: the field’s unique ID and the name of its token. Use letters, numbers and underscores only, for example badge_markup.
• Description: a hint shown under the editor in Elementor. Use it to say what the field expects, such as “Paste the HTML your payment or review provider gives you.”
• Language: the highlighting mode. The list has HTML, CSS, SASS, SCSS, JavaScript, JSON, LESS, Markdown, PHP, Python, MySQL, SQL, SVG, Text, Twig and Typescript. HTML is the default.

Language changes highlighting only. It doesn’t limit what an editor can paste, and it doesn’t change how the value is printed.

The panel has no Default Value and no height setting for this field, so the editor always opens empty at its standard height. Turn on Label Block so the label sits above the editor instead of squeezing beside it.

Under Common Settings you’ll also find Show Label, Separator and Conditions, which work the same as on other fields. Leave Selector empty: a pasted snippet isn’t a CSS value.

Print the code in your template #

Put the token where the snippet should land, and guard it so an empty field leaves no wrapper behind:

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

Style the wrapper in the CSS panel as usual. The snippet itself brings whatever classes the provider gave it, so it’s worth adding your own wrapper class to control spacing and alignment.

What the token strips #

The value goes through the same filter WordPress uses for post content. Tags allowed in posts come out as pasted: div, span, a, img and the rest. Script tags and iframes are removed.

One detail is worth knowing before you hand the widget to a client. In our tests, a pasted script tag was removed but the JavaScript inside it stayed on the page as plain text, so the visitor saw a line of code in the middle of the widget. Nothing warns you about it. Test a provider’s snippet on a draft page once, and tell editors to paste markup only.

The raw filter #

Adding raw to the token prints exactly what was pasted, scripts and iframes included:

{{ badge_markup|raw }}

In our tests that version kept the iframe and ran the script. That’s useful for an embed you control, and risky everywhere else, because anyone who can edit the widget can then run JavaScript on the page. Use it only when every editor of that page is already trusted with unfiltered HTML, and keep the plain token for widgets clients touch.

The template engine also accepts trim, upper and lower on a token, which are occasionally handy for a short snippet of plain text.

Use the Code control in Elementor #

Add the widget to a page, or reload the editor if the page was already open. The field shows as a dark editor block under your label, with line numbers down the side. Paste the snippet and the preview updates as soon as you click away.

The editor is a small window, so a long snippet scrolls inside it. That’s fine for pasting, less so for reading; write the snippet somewhere roomier if you plan to edit it by hand.

Here is the finished widget on the front end, built from three pasted badge blocks:

Common use cases #

• Payment, review and trust badges that providers hand out as HTML.
• Schema or structured data blocks an editor needs to paste per page.
• Small SVG icons or logos pasted as markup.
• A short CSS or JSON snippet your widget’s script reads.

Tips for working with the Code field #

• Say what to paste in the Description. Editors can’t tell from an empty editor what the field expects.
• Guard the token with {% if %}. An unused field would otherwise leave an empty wrapper on the page.
• Test a real provider snippet once. That’s how you find out which parts survive the filter.
• Keep raw for trusted editors only. The plain token is the safe default for client sites.
• Formatted text rather than markup? Use the WYSIWYG field so editors get a visual editor instead of code.

Frequently Asked Questions #

Wrapping up #

Drop a Code field into a Content section, pick the language, write a Description that says what to paste, and print the token inside an {% if %} guard. Keep the plain token for client sites and reach for raw only with trusted editors. For rich text instead of markup, see the WYSIWYG field, and check pricing for what each plan includes.