Skip to content
CalcPier
CalcPier

Tutorial

How to Add a Mortgage Calculator to WordPress

Add a working mortgage calculator to any WordPress page in under 3 minutes. No plugin, no signup, no code knowledge required. The widget loads inside an iframe and updates results as users type.

Before you start

Step-by-step

  1. 1

    Open the page or post editor in WordPress

    Log in to your WordPress admin at yoursite.com/wp-admin. From the left sidebar, click Pages (for a static page) or Posts (for a blog post). Then click the title of the page you want to edit, or click Add New to create a fresh one. The Gutenberg block editor opens.

  2. 2

    Add a Custom HTML block

    Inside the editor, click the + button (top-left of the content area) to add a new block. In the search field, type "Custom HTML" and select the Custom HTML block. Alternatively, type /html and press Enter — WordPress inserts the block for you.

  3. 3

    Paste the iframe code

    Click inside the Custom HTML block. Paste the embed code below. Do not modify the src attribute — that is what loads the calculator. Height 900 works for most layouts; if the calculator gets cut off, increase to 1000 or 1100.

  4. 4

    Preview on the frontend

    Click Preview (top-right of the editor) to open the page in a new tab. Scroll to where you added the block and confirm the calculator loads. Try typing a home price — the monthly payment should update in real time.

  5. 5

    Publish and verify on mobile

    Click Publish (or Update if editing an existing page). Open the published URL on your phone. WordPress responsive themes keep the widget full width automatically, but verify the calculator fits and the inputs are tappable at 375px width (iPhone SE baseline).

The embed code

Copy this exactly. It works on WordPress.com Premium, WordPress.org, and any theme.

<iframe src="https://calcpier.com/embed/mortgage-calculator/" width="100%" height="900" style="border:0;border-radius:12px;max-width:900px" title="Mortgage Calculator by CalcPier" loading="lazy"></iframe>
<p style="font-size:12px;color:#666;text-align:center;margin-top:8px">Calculator by <a href="https://calcpier.com/">CalcPier</a> - free financial tools for US homebuyers.</p>

Optional: sidebar or narrow widget

For a sidebar or narrow column, reduce the height and max-width. Replace the code above with: 

<iframe src="https://calcpier.com/embed/mortgage-calculator/" width="100%" height="1100" style="border:0;border-radius:12px;max-width:400px" title="Mortgage Calculator by CalcPier" loading="lazy"></iframe>
<p style="font-size:12px;color:#666;text-align:center;margin-top:8px">Calculator by <a href="https://calcpier.com/">CalcPier</a> - free financial tools for US homebuyers.</p>

Height increases to 1100 because the calculator stacks vertically at narrow widths.

Frequently asked questions

Does this work on WordPress.com free plan?

No. The WordPress.com Free and Personal plans block Custom HTML blocks and iframes. You need the Premium plan ($8/month) or higher on WordPress.com. If you self-host WordPress.org (SiteGround, Bluehost, Kinsta, etc.), Custom HTML blocks work on every plan with no restrictions.

Will the calculator slow down my WordPress site?

No. The widget is loaded inside an iframe with the loading="lazy" attribute, which means browsers only fetch it when the user scrolls near it. The widget itself is HTML + CSS + 15 KB of JavaScript — smaller than most WordPress plugins. Your Core Web Vitals scores will not drop.

Can I use a WordPress plugin instead of the Custom HTML block?

Yes, but it is not necessary. Plugins like Insert Headers and Footers or Widget Shortcodes add overhead without benefit. The Custom HTML block does the job with zero plugin dependencies. If you use Elementor, Divi, or WPBakery, they have native HTML widgets — search "HTML" in their element library.

How do I make the calculator show at a specific width?

Change max-width in the style attribute. For a sidebar widget, replace max-width:900px with max-width:400px. For a full-width embed inside a page, remove max-width entirely. The calculator is responsive — it adapts to any container width from 320px up.

What if the calculator gets cut off at the bottom?

The iframe has a fixed height of 900 pixels. On pages where the calculator content is longer (mobile view, narrow containers), increase height to 1100 or 1200. Alternatively, switch to a responsive iframe approach using CSS aspect-ratio — but 900px covers 95% of use cases.

Is the calculator free for commercial WordPress sites?

Yes. The widget is free for commercial and non-commercial use. The only requirement is that the attribution link ("Powered by CalcPier") at the bottom of the widget stays visible. You may not wrap the iframe in a way that hides the footer, and you may not remove the attribution.

Other platforms