[Support request] Where to add CSS and JavaScript

[Giovanni]

Hi guys,

I want to add custom CSS and JavaScript to my theme. Where should I do that?
I understand that the CSS goes in Customize > Additional CSS.

But what about JavaScript?
I’ve tried to add it in a page’s HTML between script tags but doesn’t seem to work.

[David]

Hi Giovanni

What is the code you’re trying to add?
For most needs, the simplest place to put it is the WP_Head hook found in Appearance > GP Hooks.

[Giovanni]

Hi David, that’s what I would like to accomplish:

https://www.w3schools.com/howto/howto_css_modals.asp

Where do I put the JavaScript?
Where do I put the CSS (Additional CSS or Simple CSS)?

[David]

Hi, the JS can be added to the WP_Head hook as mentioned above, it will need to wrapped in script tags. e.g

<script>
My javascript
</script>

OK you have the Simple CSS plugin, i would put all my CSS in that.

[Giovanni]

That didn’t work out.

Here’s what I’ve done:

1) Created a new page and pasted the html in the text tab.
2) Pasted the css in the Additional css (tried also to put it in the same html page, wrapped in style tags)
3) Pasted the js in the wp_head hook between script tags (tried also to put it in the same html page, wrapped in script tags).

[David]

Hi Giovanni,

aah my bad, the JS needs to be placed in the WP_Foot, so it runs after the DOM is loaded, otherwise the script runs before the elements exist.

[Giovanni]

There we go!

Few more questions:

1) Is it better to use Simple CSS or Additional CSS?
2) Does all JS go into the wp_footer hook? Even if the script is only supposed to work on specific pages?
3) Is it still necessary to use a child theme?

[Leo]

1) They are essentially the same. You can see the differences here: https://docs.generatepress.com/article/adding-css/

2) Yes. You will need to use PHP condition tags:
https://docs.generatepress.com/article/using-hooks-conditional-tags/

3) Not necessary. See this article for more info:
https://docs.generatepress.com/article/using-child-theme/

Let us know if this helps.

[Author]

Posts