Using Shortcodes

Shortcodes are the best option when you need to embed calculators outside the standard block editor flow.

Supported Shortcodes

Lite supports these shortcode tags:

• [vareon]
• [vareoncalc]

These two tags work the same way.

Basic Syntax

Use the type attribute to choose the calculator:

[vareon type="loan"]

Alias version:

[vareoncalc type="loan"]

Supported Attributes

Lite supports these shortcode attributes:

• type
• theme
• width
• branding

No other shortcode attributes should be documented for Lite.

Attribute Reference

type

The calculator slug to render.

Examples:

[vareon type="mortgage"]
[vareon type="bmi"]
[vareon type="unit-converter"]

If type is invalid, the shortcode returns an empty string and nothing renders.

theme

Overrides the global Lite theme for that one embed.

Supported theme values:

• light
• dark
• modern

Examples:

[vareon type="loan" theme="dark"]
[vareon type="savings" theme="modern"]

width

Sets the width of the embed shell.

Accepted values:

• Pixel widths such as 620px
• Percentages such as 100%
• Safe CSS units such as 40rem, 70vw, 50ch, 1fr, 12pt
• Keywords auto, inherit, and initial

Examples:

[vareon type="loan" width="620px"]
[vareon type="mortgage" width="100%"]
[vareon type="percentage" width="40rem"]

If the width value is invalid, Lite falls back to 100%.

branding

Overrides the global branding setting for that one embed.

• branding="1" shows branding
• branding="0" hides branding

Examples:

[vareon type="bmi" branding="0"]
[vareon type="loan" branding="1"]

Shortcode Builder

Use the builder below to generate a valid Lite shortcode.

The builder keeps the shortcode minimal and only appends overrides when you actually change them.

Copy-Paste Examples

Simple calculator

[vareon type="loan"]

Calculator with dark theme

[vareon type="mortgage" theme="dark"]

Calculator with modern theme

[vareon type="savings" theme="modern"]

Calculator with custom width

[vareon type="percentage" width="520px"]

Calculator without branding

[vareon type="bmi" branding="0"]

Full example

[vareon type="loan" theme="dark" width="620px" branding="0"]

What the Shortcode Actually Does

The builder only generates shortcode text. It does not render calculators by itself.

When WordPress renders [vareon ...] or [vareoncalc ...], the Lite shortcode handler:

• Merges shortcode defaults
• Sanitizes the calculator type
• Sanitizes width
• Only accepts Lite themes: light, dark, modern
• Resolves branding from the shortcode override or the global setting
• Checks that the calculator exists
• Enqueues the needed frontend assets

Then it outputs a wrapper like:

<div class="vareoncalc" style="width:100%;max-width:620px;" data-config="{...}"></div>

After that, the frontend loader finds .vareoncalc[data-config], parses the config, loads the matching calculator module, and mounts the live calculator inside that wrapper.

Where Shortcodes Work Best

Shortcodes are useful in:

• Shortcode blocks
• Classic Editor content
• Widget areas that process shortcodes
• Elementor shortcode widgets
• Other page builders that support WordPress shortcodes
• Theme templates that render shortcodes

For page-builder-specific guidance, see: Page Builders

Documentation Rule

Only document the current Lite shortcode interface:

• [vareon]
• [vareoncalc]
• type
• theme
• width
• branding

Troubleshooting Shortcodes

The shortcode renders nothing

Most likely causes:

• The plugin is not active
• The type value is invalid
• The shortcode is placed in an area that does not execute shortcodes

The calculator is too wide or too narrow

• Use width="100%" for container-based layouts
• Use a pixel max width like 620px for tighter layouts
• Check the parent column or builder container width

The theme is wrong

• Confirm the theme value is one of light, dark, or modern
• If no theme is set, the shortcode uses the global plugin setting

Next Steps

• Calculator Library
• Page Builders
• Troubleshooting