Title: Adding Javascript Calculator into WordPress Page Last modified: August 21, 2016 --- # Adding Javascript Calculator into WordPress Page * [ljonewint](https://wordpress.org/support/users/ljonewint/) * (@ljonewint) * [12 years, 4 months ago](https://wordpress.org/support/topic/adding-javascript-calculator-into-wordpress-page/) * Hi, I need help with displaying a calculator “within” my theme’s page correctly. Though I copied the page template (page.php) and added the calculator script below the loop, it will only display on a page, but on a page alone. How do I get it to show within a page like all other content? If I use another template( blog.template.php or single.php, the calculator won’t show at all. The page shows blank. Here’s what’s currently showing with page.php content. [http://dailyfitnesszone.com/fitness-goal-calculator/](http://dailyfitnesszone.com/fitness-goal-calculator/) Viewing 11 replies - 1 through 11 (of 11 total) * [Andrew Nevins](https://wordpress.org/support/users/anevins/) * (@anevins) * WCLDN 2018 Contributor | Volunteer support * [12 years, 4 months ago](https://wordpress.org/support/topic/adding-javascript-calculator-into-wordpress-page/#post-4517994) * Which theme are you using? * Thread Starter [ljonewint](https://wordpress.org/support/users/ljonewint/) * (@ljonewint) * [12 years, 4 months ago](https://wordpress.org/support/topic/adding-javascript-calculator-into-wordpress-page/#post-4518004) * It’s a fitness theme. I purchased it from _[ a very spammy theme provider ]_… I think. Currently, I’m trying to use text editor and the calculator seems to be fine. I just now have to figure out how to get everything else on the page, which is tome consuming. If you know an easier way, that would be great!! 🙂 * [Andrew Nevins](https://wordpress.org/support/users/anevins/) * (@anevins) * WCLDN 2018 Contributor | Volunteer support * [12 years, 4 months ago](https://wordpress.org/support/topic/adding-javascript-calculator-into-wordpress-page/#post-4518006) * Have you asked Infinite 8 Grids about this? They’d probably know the best method for you to integrate custom JS into your theme. * If they’re not responding try a plugin to hold your JS modifications [http://wordpress.org/plugins/css-javascript-toolbox/](http://wordpress.org/plugins/css-javascript-toolbox/) * Thread Starter [ljonewint](https://wordpress.org/support/users/ljonewint/) * (@ljonewint) * [12 years, 4 months ago](https://wordpress.org/support/topic/adding-javascript-calculator-into-wordpress-page/#post-4518007) * They honestly have not been the best at responding to any inquiry I’ve had. One developer suggested uploading it as an HTML page and then using lightbox to display the calculator, but I was never able to figure out how to get that to work. That’s when I decided to make a custom page template. It’s more than a notion though because none of their pages will work with the JavaScript calculator. If the header and everything displays like I want it, then the calculator is distorted. The calculator only shows fine if none of their script is on the page. Go figure. I’ll try the plug-in you suggested and see if that gets me where I need to be. Thanks for the suggestion. * Thread Starter [ljonewint](https://wordpress.org/support/users/ljonewint/) * (@ljonewint) * [12 years, 4 months ago](https://wordpress.org/support/topic/adding-javascript-calculator-into-wordpress-page/#post-4518177) * Hi Andrew, I created the page from scratch in HTML. On the HTML page, it shows perfectly. However, when I upload that page to WP, the calculator’s display doesn’t show properly. It seems to be stripped of cells and colors. Any suggestions? I could not upload the plugin you suggested because I received a Mod_Security warning when I tried to click to install. Actually, even it I attempt to click plugin details I get the warning. * Any reason why a perfect page wouldn’t show once uploaded to WP? * [Andrew Nevins](https://wordpress.org/support/users/anevins/) * (@anevins) * WCLDN 2018 Contributor | Volunteer support * [12 years, 4 months ago](https://wordpress.org/support/topic/adding-javascript-calculator-into-wordpress-page/#post-4518178) * Generally you have to follow certain protocol when using JavaScript with WordPress: [http://codex.wordpress.org/Using_Javascript](http://codex.wordpress.org/Using_Javascript) * Most commonly people using jQuery aren’t using”noconflict wrappers”; [http://codex.wordpress.org/Function_Reference/wp_enqueue_script#jQuery_noConflict_Wrappers](http://codex.wordpress.org/Function_Reference/wp_enqueue_script#jQuery_noConflict_Wrappers) * Thread Starter [ljonewint](https://wordpress.org/support/users/ljonewint/) * (@ljonewint) * [12 years, 4 months ago](https://wordpress.org/support/topic/adding-javascript-calculator-into-wordpress-page/#post-4518180) * I admire your timely responses! Question…Is there a plugin that will work to solve the problem or more manual coding that I’ll have to grapple with? I’m not a professional “developer.” In fact, it took me 3 days to create that one page because I have to watch and re-watch YouTube Videos and filter through discussion posts and Google links. Reading the links you sent put my head in a frenzy. 🙂 Please advise. * [Andrew Nevins](https://wordpress.org/support/users/anevins/) * (@anevins) * WCLDN 2018 Contributor | Volunteer support * [12 years, 4 months ago](https://wordpress.org/support/topic/adding-javascript-calculator-into-wordpress-page/#post-4518188) * > I received a Mod_Security warning when I tried to click to install. * Can you contact your hosting providers about that? * Other than trying a plugin I think you may have to hire a professional to do this for you: - [http://jobs.wordpress.net/](http://jobs.wordpress.net/) - [http://directory.codepoet.com/](http://directory.codepoet.com/) * Thread Starter [ljonewint](https://wordpress.org/support/users/ljonewint/) * (@ljonewint) * [12 years, 4 months ago](https://wordpress.org/support/topic/adding-javascript-calculator-into-wordpress-page/#post-4518193) * Andrew, There is something wrong with the plugin, not my system. That is not happening with any plugin, it’s just that particular one. * Also, several developers have attempted to understand why the calculator isn’t working. It seems to be WordPress related and not the code itself. The code works just fine when used in a regular HTML page. Additionally, I came up with another way to install the calculator in WordPress last evening and after completing all the steps we thought would work, it finally looked great in the WP Visual Editor and we thought we figured it out. Once we click “view page” it’s once again distorted. We believe it’s b/c WP keeps adding weird and tags everywhere, but not positive about it. I came to the WP support boards because I thought someone with WP experience would be able to help with the issue. It’s not that people are familiar with what to do, it’s that people are not familiar with the way WP works. * Thank for trying to help. Hopefully, someone will jump on board here who will be able to help me understand how to install a simple javascript calculator to my WP page. I honestly don’t think it should’ve taken this much time, especially seeing how it only took it minutes to pop up when I created the HTML page for it. I thought once I uploaded it to WP as a custom page template it would be just fine, but again, it’s something in WP that keeps distorting it. That….I’m sure of. * Perhaps take a look at the page and the code. * The link when installed as a custom page: [http://dailyfitnesszone.com/fitness-goal-calculator/](http://dailyfitnesszone.com/fitness-goal-calculator/) The link when installed directly to WP page: [http://dailyfitnesszone.com/test-calculator-page/](http://dailyfitnesszone.com/test-calculator-page/) * The yellow background should be there. This was created as a table, so the grid lines in the cells should be visible, the cells should be smaller…not as wide, and the compute/reset button should be functioning. WP is like a “fun mirror” in this regard. It’s taking the calculator and stretching it for some reason and/or not displaying all of the calculator correctly. Surely, I’m not the first person to experience this issue on WP???? * [Andrew Nevins](https://wordpress.org/support/users/anevins/) * (@anevins) * WCLDN 2018 Contributor | Volunteer support * [12 years, 4 months ago](https://wordpress.org/support/topic/adding-javascript-calculator-into-wordpress-page/#post-4518195) * A glance between at the source code of the two pages shows that your custom page doesn’t have the same JavaScript as the WordPress page. Your WordPress page is missing fundamental JS of your calculator. * I would point out the JavaScript I’m referring to if there wasn’t a scary copyright sign on it, so I’ll not post it here. * Thread Starter [ljonewint](https://wordpress.org/support/users/ljonewint/) * (@ljonewint) * [12 years, 4 months ago](https://wordpress.org/support/topic/adding-javascript-calculator-into-wordpress-page/#post-4518196) * It’s not working either way. I even tested it on a Nother word press site that I have and it still distorts it. Not as bad, but distorts it nonetheless. As I have been reading through WP support forums Installing JavaScript seems to be a problem. I’ll try to reach out to some of those people to see what solutions they have found if I’m not able to get help here. Viewing 11 replies - 1 through 11 (of 11 total) The topic ‘Adding Javascript Calculator into WordPress Page’ is closed to new replies. * In: [Fixing WordPress](https://wordpress.org/support/forum/how-to-and-troubleshooting/) * 11 replies * 2 participants * Last reply from: [ljonewint](https://wordpress.org/support/users/ljonewint/) * Last activity: [12 years, 4 months ago](https://wordpress.org/support/topic/adding-javascript-calculator-into-wordpress-page/#post-4518196) * Status: not resolved ## Topics ### Topics with no replies ### Non-support topics ### Resolved topics ### Unresolved topics ### All topics