Skip to main content
Home › Free Embed Widgets › WordPress Guide

How to Embed a Financial Calculator on WordPress

By Ziv Shay | Updated April 2026

A complete, step-by-step guide to adding free calculator widgets to your WordPress website. No plugins needed — works with the Block Editor, Classic Editor, Elementor, and all page builders.

Table of Contents

Method 1: WordPress Block Editor (Gutenberg)

The Block Editor is the default WordPress editor since version 5.0. This is the recommended method for most WordPress users.

  1. Get Your Embed Code: Visit the embed widgets page, choose a calculator, and click "Copy Embed Code".
  2. Open Your Page or Post: Go to the WordPress admin dashboard and open the page or post where you want to add the calculator.
  3. Add a Custom HTML Block: Click the + button to add a new block. Search for "Custom HTML" and select it.
  4. Paste the Embed Code: Paste the iframe code you copied into the Custom HTML block.
  5. Preview: Click the "Preview" tab on the Custom HTML block to verify the calculator displays correctly.
  6. Publish: Click Publish or Update. Your calculator is now live.

Here is an example embed code for the mortgage calculator:

<iframe src="https://aihowtoinvest.com/embed/mortgage?theme=light&accent=4f46e5" width="100%" height="520" frameborder="0" style="border-radius:12px;border:1px solid #e5e7eb;" title="Mortgage Calculator"></iframe>
Tip: If you do not see the Custom HTML block, make sure you are using the Block Editor (Gutenberg). Some WordPress installs may have the Classic Editor plugin active.

Method 2: Classic Editor

If you are using the WordPress Classic Editor (either by preference or plugin), you can still embed calculators easily.

  1. Get Your Embed Code from the embed widgets page.
  2. Open the Text Tab: In the Classic Editor, click the Text tab in the top-right corner of the editor (not Visual).
  3. Paste the Code: Position your cursor where you want the calculator and paste the iframe embed code.
  4. Switch to Visual: Click back to the Visual tab. You should see a placeholder or the calculator preview.
  5. Publish: Click Publish or Update.
Important: Do not paste iframe code in the Visual tab — it will be stripped out. Always switch to the Text tab first, paste the code, then switch back.

Method 3: Elementor

  1. In the Elementor editor, search for the HTML widget in the elements panel.
  2. Drag the HTML widget to your desired location on the page.
  3. Paste the iframe embed code into the HTML Code field.
  4. Click Update to save your page.

Method 4: Divi Builder

  1. Add a new Code Module to your Divi layout.
  2. Paste the iframe embed code into the code content area.
  3. Save the module and publish your page.

You can also add calculators to your WordPress sidebar, footer, or any widget area.

  1. Go to Appearance → Widgets in your WordPress dashboard.
  2. Add a Custom HTML widget to your desired sidebar or widget area.
  3. Paste the iframe embed code. You may want to set a specific width (e.g., width="100%") to fit the sidebar.
  4. Save the widget. The calculator will appear in the sidebar on all applicable pages.
Tip for sidebars: Sidebars are typically narrow. Consider using a smaller height (400-500px) and the embed will automatically adapt to the available width.

Customization Options

Every calculator widget supports the following URL parameters for customization:

Theme (Light or Dark)

Add ?theme=light or ?theme=dark to the iframe URL to match your website design.

<!-- Light theme (default) --> <iframe src="https://aihowtoinvest.com/embed/mortgage?theme=light" ...></iframe> <!-- Dark theme --> <iframe src="https://aihowtoinvest.com/embed/mortgage?theme=dark" ...></iframe>

Custom Accent Color

Set the accent color to match your brand using the accent parameter (hex color without the #):

<!-- Blue accent (default) --> <iframe src="https://aihowtoinvest.com/embed/mortgage?accent=4f46e5" ...></iframe> <!-- Green accent --> <iframe src="https://aihowtoinvest.com/embed/mortgage?accent=10b981" ...></iframe> <!-- Red accent --> <iframe src="https://aihowtoinvest.com/embed/mortgage?accent=ef4444" ...></iframe>

Remove Branding (Pro)

Pro subscribers can remove the "Powered by" footer link by adding branding=none:

<iframe src="https://aihowtoinvest.com/embed/mortgage?branding=none" ...></iframe>

Sizing

Set the width and height attributes on the iframe to control the calculator size. Using width="100%" makes it responsive.

Troubleshooting

Calculator not showing up?

Make sure you pasted the code in the Text/HTML view, not the Visual editor. Some WordPress themes strip iframe tags in the Visual editor. Also check that your security plugins (like Wordfence or Sucuri) are not blocking iframes from external sources.

Calculator looks too small or too large?

Adjust the height attribute in the iframe tag. Each calculator has a recommended height listed on the embed page. Use width="100%" for responsive width.

Seeing a blank space?

Some ad blockers or privacy extensions may block third-party iframes. Test in a private/incognito browser window without extensions to confirm.

Need help?

Email us at hello@aihowtoinvest.com and we will help you get set up.

Available Calculators

All 11 calculators are free to embed on your WordPress site:

Ready to Add Calculators to Your WordPress Site?

Browse all 11 free calculator widgets and generate your embed code.

Get Your Embed Code
About the AuthorZiv Shay is a software engineer and fintech enthusiast based in Israel, building free financial tools since 2024. Learn more
From Our Network
Planning a trip? Check out AttractionScout
Find the best tours & attractions in 20 cities worldwide
Explore Destinations →

★ Smart Money Tips

The average American could save $5,000/year by optimizing their tax strategy. Try our tax calculator →

Paying an extra $100/month on your mortgage saves $30,000+ in interest over the life of the loan. Calculate your savings →

Starting to invest at 25 vs 35 can mean $500,000+ more at retirement thanks to compound interest. See the difference →

Refinancing student loans at a 2% lower rate saves $10,000–$20,000 over the loan term. Check your rate →

Frequently Asked Questions

How can I improve my financial health?+
Start by tracking your spending, building an emergency fund with 3–6 months of expenses, and paying down high-interest debt. Use our budget tracker and debt payoff calculator to create a clear plan.
What financial tools should everyone use?+
How do I create a budget that works?+
Follow the 50/30/20 rule: 50% of income for needs, 30% for wants, and 20% for savings and debt repayment. Track every expense for one month, then adjust. Our budget tracker makes this easy.
What is the best way to start investing?+
Begin with low-cost index funds through a tax-advantaged account like a 401(k) or IRA. Start with whatever you can afford and increase over time. Use our compound interest calculator to see how small investments grow.
How much should I save for emergencies?+
Aim for 3–6 months of essential living expenses in a high-yield savings account. Start with a $1,000 starter fund, then build gradually. Use our FIRE calculator to plan your savings targets.

About AI How To Invest

AI How To Invest provides 175+ free financial calculators and tools to help you make smarter money decisions. From mortgage and retirement planning to debt payoff strategies and investment analysis, our tools are designed to be fast, accurate, and easy to use. All calculator data stays in your browser — we never sell your personal information.

Trusted by tens of thousands of users for financial planning, tax optimization, and investment research. Learn more about us →

Mortgage Tools Retirement Planning Tax Calculators Debt Payoff Investing Insurance AI Tools
PRO UPGRADE

Download Your Personalized Financial Report

Get a detailed PDF with your calculation results, action steps, and money-saving strategies tailored to your numbers.

📄
PDF Report
Printable report with your results, payment breakdown, and comparison charts.
💡
Action Plan
Step-by-step recommendations based on your specific financial situation.
📈
5-Year Projection
See where you'll be in 1, 3, and 5 years with different strategies.
Get PDF Report — $2.99 All Tools Unlimited — $9.99

Pay securely via PayPal • Reports emailed within minutes • 100% money-back guarantee

Popular Tools

Mortgage Calculator Car Insurance Tax Calculator Retirement Credit Score Compound Interest Debt Payoff Budget Tracker Salary Calculator Net Worth Social Security Rent vs Buy Invoice Generator Paycheck Calculator Refinance AI Detector Best Savings Accounts Best Credit Cards Best Brokerages Mortgage Rates CD Rates
Our Sites: Tax Calculators Student Loans Travel Attractions Financial Tools
Best Of: Best Savings Accounts Best Credit Cards Best Brokerages Mortgage Rates CD Rates

© 2024–1970 AIHowToInvest.com — 175+ Free Financial Tools | About | Contact | Privacy | Terms | Disclaimer

Affiliate Disclosure: Some links on this page are affiliate links. If you click through and make a purchase, we may earn a commission at no additional cost to you. This does not influence our calculator results or editorial content. Learn more.
Important Disclaimer: The tools and calculators on this site are for informational and educational purposes only. They do not constitute financial, investment, tax, or legal advice. Results are estimates and may differ from actual values. Always consult a qualified financial advisor, CPA, or attorney before making financial decisions. Read our full disclaimer.
About Us Contact Privacy Policy Terms of Service Disclaimer
© 2024–1970 AI How To Invest. All rights reserved. All calculations are estimates for informational purposes only.

Stay Updated

Get free tips and tools delivered to your inbox