How to add a calculator to WordPress without a plugin

Search the WordPress plugin directory for "calculator" and you will find plenty of options. For a standard calculator, such as a scientific, graphing, statistics or unit calculator, you do not need any of them. WordPress can show a calculator widget with the Custom HTML block it already has, and nothing new gets installed on your site.

Plugin or embed?

A calculator plugin runs on your server. It needs updates, adds settings pages and can load its scripts on pages where no calculator appears. An embed is a frame that loads the calculator from another site, only on the page where you paste it, and the provider maintains it.

Plugins still have a place. If you need a calculator built around your own formula, such as a price quote that sends leads to your inbox, a form-builder plugin is the right tool. For a ready-made maths, science or finance calculator, an embed is less work and less to maintain.

Block editor: the Custom HTML block

These steps follow the WordPress.org Custom HTML block documentation.

1. In the calculator widget gallery, press Copy code on a calculator, or open its own page to change the size first.
2. Open the post or page in the editor. Click the Block Inserter (the + button) and choose Custom HTML, or type /html on a new line and press Enter.
3. Click Edit HTML, paste the code, and check the preview that appears to the right of the code. Click Update.
4. Save or publish the post, then open it on the front end to check the calculator.

The Edit HTML button arrived with WordPress 7.0. On earlier versions you paste straight into the block and use Preview in the block toolbar to see the result.

This is the code for the Statistics Calculator, exactly as the widget gallery gives it:

<iframe src="https://widemath.com/embed/statistics-calculator/" title="Statistics Calculator by WideMath" width="100%" height="820" style="border:0;max-width:960px" loading="lazy" allow="clipboard-write; fullscreen"></iframe>
<p style="margin:6px 0 0;font:14px/1.4 sans-serif"><a href="https://widemath.com/statistics-calculator/">Statistics Calculator</a> by WideMath</p>

The iframe loads the calculator from widemath.com/embed/, a page made for frames with no menus and no ads. The p line under it is a credit with a link to the full tool. Please keep it; it is the only thing we ask in return for the free widget.

Classic editor: the Text tab

Sites that use the Classic Editor have two tabs above the right side of the editing area, Visual and Text. The WordPress.org classic editor guide explains that Text mode shows you the code.

1. Click the Text tab.
2. Paste the embed code on its own line where the calculator should appear.
3. Click Update or Publish.

Avoid switching back and forth between Visual and Text after pasting. WordPress's own user manual warns that switching views can lose some HTML.

Elementor, Divi and other page builders

• Elementor: drag the HTML widget (the one with the </> icon) onto the page and paste the code into its text area. Elementor restricts this widget to administrators by default; an administrator can change that in the Role Manager.
• Divi 5: inside a row, click the grey plus icon and add the Code module. Paste the code into the Text field on the Content tab.
• Other builders: look for an element called HTML, Code or Embed code. Any element that outputs raw HTML will work.

If the calculator disappears after saving

WordPress removes iframe tags from content saved by users who lack a permission called unfiltered_html. According to the WordPress roles and capabilities documentation:

• On a single site, Administrators and Editors have it. Authors and Contributors do not, so a calculator they paste is stripped when the post is saved.
• On a Multisite network, only Super Admins have it. A normal site administrator on a network loses the frame too.

The fix is to have an Editor or Administrator (on Multisite, a Super Admin) paste the code once the author has finished. If an Author saves the post again later, the frame is stripped again.

WordPress.com: the plan rule

On WordPress.com the steps are the same: add a Custom HTML block, click Edit HTML, paste, then Update. Whether the frame survives depends on the plan. The WordPress.com Custom HTML block page says that to add tags like iframe "you will need a paid plan with hosting features activated".

• Free plan: the iframe is removed. Link to the calculator instead, for example https://widemath.com/statistics-calculator/.
• Paid plans (Personal, Premium, Business and Commerce at the time of writing): frames work once hosting features are activated. The activation page explains that installing a plugin or uploading a theme activates them, as a one-time step; Commerce sites are activated automatically. Until then, the WordPress.com code guide says the same limits as free sites apply.

WordPress.com has changed its plans and wording several times, so check those two support pages if your plan behaves differently.

Size, sidebars and security headers

• Size. The frame is 100% wide up to a maximum width, so it fits your theme's content column. Many themes use a column of 600 to 750 px; in a column that narrow the graphing calculator stacks its list under the graph and needs about 750 px of height instead of 600. If something is cut off, raise the height by 50 to 100 px.
• Sidebars. In a widget area, add a Custom HTML block (or the Custom HTML widget on classic widget screens). Sidebars are narrow, so choose the scientific calculator, which is 460 px wide at most and built for phone widths.
• Speed. The code includes loading="lazy", so a calculator further down the page only loads when a reader scrolls near it. Nothing is added to your other pages.
• Security headers. If a security plugin or your host sends a Content-Security-Policy header with a frame-src or child-src rule, add https://widemath.com to it, or the browser will block the frame.

Other platforms, from Google Sites to Squarespace, are covered in the complete guide to adding a calculator to your website. Running a class blog? Pick a calculator by subject in free calculator widgets for teachers.

Questions people ask