Add Calculator to WordPress

To add your calculator to WordPress, you will need to convert your code from a full HTML file to a fragment of HTML including only the <body> content, style definitions, and JavaScript.

Steps to Add Calculator to WordPress

Because code will be added to an existing HTML page (the WordPress HTML page), it will not require the , <html>, <head>, and <body> tags.

In the calculator code, the JavaScript (JS) and Cascading Style Sheets (CSS) are in an external file called within the <head> tag. Additionally, WordPress has its own CSS styles that conflict with your calculator styles.

The following steps will assist you in modifying your calculator code to function properly in WordPress.

1) Lock Your Original Files

First, lock your original calculator code files so they don’t get accidently changed.

  1. Right-click on the directory where your calculator code is located.
  2. Select “Properties” from the menu that appears.
  3. In the Properties window, locate the Read-only checkbox and check it.
  4. In the “Confirm Attribute Changes” dialog, click on the “Save” or “Apply” button to save the changes.
  5. Select the “Apply changes to this folder, subfolders and files” radio button.
  6. This will set the Read-only attribute on your calculator files, effectively locking them and preventing any modification.
  7. However, it’s important to note that this only prevents changes to the files, and you can still open and view them as usual.
  8. If you need to make any future changes to the files, you can simply uncheck the Read-only checkbox to unlock them.

2) Create a New Directory

Create a new directory to save the modified calculator code file. Name it something like “Calculator-WordPress-Code”.

3) Create the New Calculator WordPress Code File

Create a file that will contain the modified code to properly render the calculator in WordPress.

  1. Open the Calculator.html file in Notepad++.
  2. Select the entire <div> code between the <body> and </body> HTML tags.
  3. Press Ctrl+C to copy the selected code to the clipboard.
  4. Press Ctrl+N to create a new file in Notepad++ that will contain the new code.
  5. Press Ctrl+V to paste the <div>…</div> code in the new document.
  6. Press Ctrl+S to save the document in the new “Calculator-WordPress-Code” directory as HTML named “Calculator-WordPress-Code.html”.

4) Consolidating the Code

In the original calculator code, the JavaScript (JS) and Cascading Style Sheets (CSS) are in an external files called within the <head> tag. This will not work in WordPress. The easiest way to fix this requires putting the JS and CSS in <style> and <script> HTML tags.

Add the Style and Script Code Blocks

Just before the opening <div> tag at the top of the Calculator-WordPress-Code.html file, create <style> and <script> tags.

Add the Calculators CSS

Because the CSS code cannot be included using an external file, it needs to be added using a <style>…</style> HTML tag.

  1. Open the calculator’s css/main.css file in Notepad++.
  2. Press Ctr+A to select all of the file’s contents.
  3. Back in the “Calculator-WordPress-Code.html” file, paste (Ctrl+V) the CSS code between the <style>…</style> tags.
  4. Press Ctrl+S to save this code.

Add the Calculators JavaScript

Because the JavaScript code cannot be included using an external file, it needs to be added using a <script>…</script> HTML tag.

  1. Open the calculator’s js/main.css file in Notepad++:
  2. Press Ctr+A to select all of the file’s contents
  3. Back in the “Calculator-WordPress-Code.html” file, paste (Ctrl+V) the JavaScript code between the <script>…</script> tags.
  4. Press Ctrl+S to save this code

5) Add and Preview Your Code in WordPress

  1. Open the WordPress page where the calculator will be displayed.
  2. Add a block and insert “Custom HTML” (see image above).
  3. Copy the entire contents of the “Calculator-WordPress-Code.html” file and paste it into the “Write HTML…” block in WordPress.
  4. Now click on Preview in the toolbar and your should see your calculator. You may notice it looks look correct. However this is misleading.

6) Preview Live Version

  1. Save the WordPress page Ctrl+S.
  2. Make sure it is Published and live.
  3. In the upper right of the WordPress page, click the “View Page” icon.

Notice the calculator looks different in the live version. We need to fix this in the next steps.

7) Fix the CSS

Because WordPress has its own CSS definitions, there is a conflict with the calculator styles. Let’s fix this.

Add WordPress Columns

First, lets put the calculator in a column.

  1. Delete the calculator code block from the WordPress page. (we will create a new code block in a column)
  2. Add a “Two columns; one-third, two-thirds split” column structure.

Add Calculator Code in the Column

In the left one-third column, add a Custom HTML block and paste your calculator code.
Save the changes then view the new version by clicking the “View Page” icon in the upper right.
Looks better but still not correct.

Fix the Final CSS Code

Now we just need to modify some CSS Properties to make it look correct.

In the CSS class “.calcDiv{…}”
  1. Remove the “display: inline-block;” Property.
    (this is not needed in WordPress)
  2. Change the width Property from “auto” to “260px”. Like: width: 260px;
    (this sets the width of the calculator)
In the CSS class “.buttonStyle{…}”

Add this Property: text-align: center;
(this makes the button text center in the buttons.)

In the CSS class “#calculatorOutput{…}”
  1. Change “height: 1em;” Property to “height: 1.8em;”
    (this makes the height of the display taller)
  2. Just after “padding: 0.3em;” add this Property: padding-top: 0em;
    (this moves the text up centering it in the display)

Update the code in WordPress, save it, and view the page to see if it looks correct.