I'm trying to embed this code:

into my Wordpress about fitness, but I don't know why it's not working correctly -

I've downloaded the export of the code, which works perfectly in the standalone HTML (+ js and css) file (specifically the completed form will display in the results div.

I've then embedded the HTML in my Wordpress template page - it appears on the front end fine, I've properly linked in the css and js in the same order as in the HTML - and checking them in (View Source shows they are connected)

Completing the form and hitting calculate DOES do something (it shows amounts the protein / fat / carb field) - however, the results div (with calories per day) does not appear.

I think it might have something to do with jquery as I get this error in the console (but don't understand):

Uncaught TypeError: $(...).fadeOut is not a function
at calcDailyCals (script.js?ver=1.0:51)
at HTMLFormElement.<anonymous> (script.js:3)
at HTMLFormElement.dispatch (jquery-3.4.1.slim.min.js:2)
at HTMLFormElement.v.handle (jquery-3.4.1.slim.min.js:2)

Can anyone help? Just not sure why it would work in the standalone HTML file and not on a Wordpress page.

Thanks

I'm trying to embed this code: https://codepen.io/jme11/pen/zMVJVX

into my Wordpress about fitness, but I don't know why it's not working correctly -

I've downloaded the export of the code, which works perfectly in the standalone HTML (+ js and css) file (specifically the completed form will display in the results div.

I've then embedded the HTML in my Wordpress template page - it appears on the front end fine, I've properly linked in the css and js in the same order as in the HTML - and checking them in (View Source shows they are connected)

Completing the form and hitting calculate DOES do something (it shows amounts the protein / fat / carb field) - however, the results div (with calories per day) does not appear.

I think it might have something to do with jquery as I get this error in the console (but don't understand):

Uncaught TypeError: $(...).fadeOut is not a function
at calcDailyCals (script.js?ver=1.0:51)
at HTMLFormElement.<anonymous> (script.js:3)
at HTMLFormElement.dispatch (jquery-3.4.1.slim.min.js:2)
at HTMLFormElement.v.handle (jquery-3.4.1.slim.min.js:2)

Can anyone help? Just not sure why it would work in the standalone HTML file and not on a Wordpress page.

Thanks

• theme-development
• jquery
• embed
• scripts

2 Answers 2

To use jquery in Wordpress you have to use the jQuery function instead of $, this is done to avoid naming conflicts. A good way to return the jquery function to its original $ is to wrap the code inside a block like this:

jQuery(function($) {
    //code here
});

The jquery script added was conflicting with the slim jquery that was also being loaded - by bootstrap footer code.

I replaced the slim jquery in the bootstrap footer includes with the full min jquery and it worked.