[M PezParticipant]

I have added some custom code to the primary theme’s JavaScript file. It’s working fine but it will obviously get overwritten during an update.

Can you please tell me the recommended way to do this with my child theme?

This is the JavaScript that I am trying to insert:
jQuery( window ).load( function(){jQuery( '.pez-init-masonry' ).animate( { opacity : 1 }, 500 );});

Like I said, I have it working, I am just trying to understand how I can modify JavaScript in X so it survives an update.

Thanks.

[KoryKeymaster]

Hey Michelle,

The quickest and easiest way to do this is to add it via the Custom section of the Customizer, but that is really best for things you aren’t changing or editing a lot (i.e. Google Analytics). If you need to implement something a little more robust, this post should help you out.

Thanks!

[M PezParticipant]

OMG, has that JavaScript option always been in the customizer? I don’t know how I ever missed that.

Thanks.

[ChristianModerator]

Hey Michelle,

You’re welcome and yes, it has always been there.

[brandonmorganParticipant]

Hello,

I would like to take advantage of the Customizer > Custom > JavaScript (vs functions.php or third party plugins such as “Per Page Add to Head”). I notice though that the Customizer double-wraps the script tag I place in there with <script id=”x-customizer-js”>, which in source code view appears to deactivate the script tag I placed— though I’m not sure (see attached screenshot).

I would like to use the Customizer Custom JavaScript option with confidence. Do I include the <script> tag in the JavaScript I place in the Customizer Custom JavaScript (the double-wrapping is a non-issue), or do I place just the raw JavaScript without the <script> tag? Please clarify.

Thank You.

[RupokMember]

Hi @brandonmorgan

Thanks for updating the thread. You should not add the script tag within custom JS field. Just place your raw script there.

Hope this makes sense.

Cheers!

[shivagarwalParticipant]

Hello,

I am using the custom js for adding a small javascript function. I don’t see anything called custom.js in the list of javascript scripts in the page.

I get a function not defined error. Do I need to do anything else other than just add my javascript to custom js?
How do I make sure that my script actually got added. Which file can I see it?

[RupokMember]

Hi @shivagarwal

Custom JS will be printed as internal script not in external file like custom.js. Let’s open the page source and find (CMD/CTRL + F) the code.

Hope this makes sense.

[Author]

Posts