EN

Embed a Calculator in WordPress

Tested on a fresh WordPress 6 install with the block editor (Gutenberg). Ten minutes, no plugin required.

Copy the embed code

This is the code you'll paste. The example embeds the time card calculator — swap in any widget from the list above.

<iframe src="https://timecardcentral.com/embed/time-card/" width="100%" height="1060" style="border:0;border-radius:12px" loading="lazy" title="Free calculator by TimeCard Central"></iframe>

Swap /embed/time-card/ for any other widget and adjust the height — the full list is on the Help Center home. The only requirement is keeping the attribution link inside the frame.

Step 1. Open the page editor

Log in to your WordPress dashboard (yoursite.com/wp-admin). In the left menu go to Pages → Add New Page (or open an existing page — the steps are identical). Give the page a title such as “Time Card Calculator”.

The same flow works for posts: Posts → Add New.

WordPress dashboard with Pages → Add New Page highlighted in the left menu

Step 2. Add the Custom HTML block

Click the black + (Add block) button in the content area. Type html in the block search and click Custom HTML. Shortcut: type /html on an empty line and press Enter.

WordPress block inserter with a search for html and the Custom HTML block highlighted

Step 3. Paste the embed code

The block shows an Edit HTML button — click it. A code editor opens (with optional CSS and JavaScript tabs); paste the embed code into the HTML tab and click Update. The block now renders the live calculator right in the editor.

Custom HTML block in WordPress with the iframe code pasted and the preview showing the calculator

Step 4. Publish and view the live page

Click Publish, confirm with Continue, final review → Publish, then open View Page. The calculator is live for your visitors — height, borders and loading behavior all come from the snippet.

Published WordPress page showing the embedded time card calculator working on the live site

Frequently asked questions

Can I put a calculator in the sidebar or footer?
Yes. Go to Appearance → Widgets, add a Custom HTML block to your sidebar or footer widget area, and paste the same code. Use a narrower widget (hours, clock in/out, or overtime) — 1060px-tall widgets fit better in full-width pages.
The code shows as plain text instead of a calculator.
The code landed in a Paragraph or Code block. Delete it, add a Custom HTML block (step 2), and paste there. In the classic editor, switch the editor from Visual to Text (HTML) tab first.
My theme's page shows it, but very narrow.
The iframe is width:100%, so it fills whatever column contains it. If your theme squeezes the content column, use the narrow widgets (hours, overtime, clock in/out) or a full-width page template.
Does this slow down my site or affect PageSpeed?
No meaningful effect: the snippet uses loading="lazy", so nothing loads until the visitor scrolls near the widget. There is no additional JavaScript or CSS on your page.
Can I change the height?
Yes — edit the height attribute in the code. Start from the suggested heights and adjust to your theme. If a scrollbar appears inside the frame, add a few pixels.

Other guides

GhostHTML card in the Koenig editorJoomlaCustom Module, article HTMLAny HTML site / static siteHand-coded pages, Hugo, Jekyll, Astro