Using Shortcodes

Shortcodes provide a simple way to embed Vareon calculators and features directly into your WordPress posts and pages. They’re perfect for adding interactive elements without touching code.

Basic Usage

The basic shortcode format is:

[vareon type="calculator-type"]

Simply paste this shortcode into any WordPress post or page editor, and the calculator will automatically render when the page is viewed.

Alternative Shortcode Names

For compatibility, you can also use these alternative shortcode names:

[smartcalc type="calculator-type"] - Legacy compatibility alias
[vc type="calculator-type"] - Short alias

All three shortcodes (vareon, smartcalc, vc) work identically. We recommend using vareon as the primary shortcode name.

Calculator Shortcodes

Basic Calculator Types

All calculators follow the same pattern:

[vareon type="calculator-name"]

For example:

[vareon type="bmi"] - BMI Calculator
[vareon type="mortgage"] - Mortgage Calculator
[vareon type="loan"] - Loan Calculator
[vareon type="savings"] - Savings Calculator

Available Calculator Types

See the Calculator Library for a complete list of all available calculator types and their shortcodes.

Shortcode Attributes

You can customize calculators using attributes:

Theme

Control the visual appearance. If omitted, the calculator uses your global theme settings.

Lite Version:

light - Light theme
dark - Dark theme

Pro Version: In addition to light and dark, Pro users can use:

ocean - Ocean blue theme
forest - Forest green theme
sunset - Sunset orange theme
purple - Purple theme
mint - Mint green theme
midnight - Midnight blue theme
rose - Rose pink theme
coral - Coral theme
custom - Custom theme (configured in Pro settings)

Examples:

[vareon type="mortgage" theme="light"]
[vareon type="mortgage" theme="dark"]
[vareon type="mortgage" theme="ocean"]  // Pro only

Width

Set a custom width:

[vareon type="loan" width="600px"]
[vareon type="loan" width="100%"]

Show Title

Control whether the calculator title is displayed:

[vareon type="bmi" show_title="1"]  // Show title (default)
[vareon type="bmi" show_title="0"]  // Hide title

Branding

Control the “Powered by Vareon” branding:

[vareon type="bmi" branding="1"]  // Show branding (default)
[vareon type="bmi" branding="0"]  // Hide branding

Note: Both Lite and Pro can control branding per shortcode using the branding attribute. Both versions can also disable branding globally in settings.

Examples

Simple Calculator

[vareon type="bmi"]

Calculator with Light Theme

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

Calculator with Custom Width

[vareon type="loan" width="800px" theme="dark"]

Calculator Without Title

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

Calculator Without Branding

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

Lite vs Pro Differences

Supported Attributes

Both Lite and Pro support all shortcode attributes (type, width, theme, show_title, branding).

Theme Support

Lite: Only light and dark themes
Pro: All Lite themes plus ocean, forest, sunset, purple, mint, midnight, rose, coral, and custom

Branding Control

Both Lite and Pro can control branding in the same ways:

Per shortcode using branding="0" or branding="1"
Globally in plugin settings

Custom Colors

Custom colors are configured globally in Pro settings, not via shortcode attributes. Use the Pro settings panel to set primary and accent colors that apply to all calculators.

Best Practices

Test First: Always preview your page after adding a shortcode to ensure it displays correctly
Use Appropriate Width: Match the calculator width to your content area
Choose the Right Theme: Use light theme for light backgrounds, dark theme for dark backgrounds
Keep It Simple: Start with basic shortcodes and add attributes only when needed
Verify Calculator Type: Ensure the calculator type exists in your version (Lite vs Pro)

Troubleshooting

Calculator Not Showing

Ensure the plugin is activated
Check that you’re using the correct shortcode syntax
Verify the calculator type exists in your version (Lite vs Pro)
Invalid calculator types: If you use an invalid type value, the shortcode will return an empty string (nothing renders). Double-check the calculator type name.

Styling Issues

Try switching between light and dark themes
Check if your theme’s CSS is overriding calculator styles
Ensure you’re using a supported WordPress version

Next Steps

Browse the Calculator Library to see all available calculators
Learn about Gutenberg Blocks for visual editing
Check out Customization Options for advanced settings