[Support request] Add javascript in functions.php

[Jose]

Hi,

I am trying to add some javascript in the homepage in different languages, adding it in functions.php and using Elements.

It works well when testing it in a page (see link attached), but the page doesn’t load properly when I change the function to see it in the Homepage.

Could you please tell me exactly how the correct function would be to show that code in both the homepage in Spanish and English?

[David]

Hi there,

what is the Javascript meant to do ?

[Jose]

It’s a javascript particles background in the header (I’ve attached an image)

[David]

So what changes are you making to add it to the front page ?

[Jose]

Were you able to see the image I had attached?

[Jose]

The changes I made are:

1. I’ve uploaded the javascript file in the template folder in the child directory.


2. I’ve added a function like this one in my functions.php child theme:

function particles_js() {
if( is_page( ID ) ) {
wp_enqueue_script(‘my-js’, ‘DIRECTORY AND NAME OF MY .JS FILE’, array(‘jquery’), ”, false);
}
}

add_action(‘wp_enqueue_scripts’, ‘particles_js’);

3. I’ve created an Element type Header and added this code:

. 

And select the display rule to the testing page I was using.


4. I’ve added some CSS to display it properly.

It works perfectly when using it in the testing page but when trying to use it in the home page it doesn’t.

Any idea what the exactly function to add in the functions.php should be?

I think I should use “is_front_page()” or “is_home” to be able to see it in the homepage in both languages


[Elvin]

It doesn’t look like you’re enqueuing the script properly. I’ve checked the path you’re using to point to the particle.js file and it’s pointing nowhere.

If you’re enqueuing a script, make sure the path is right. Ideally, you should host the script locally as well.

But the alternative to that, you can simply use a cdnjs link for the script source.

You can hook this on your wp_footer.

<script src="https://cdnjs.cloudflare.com/ajax/libs/particlesjs/2.2.3/particles.min.js"></script>

Make sure you have the init script as well. Libraries won’t run if you don’t have init script to specify what you want from it.

Read the documentation here:
https://marcbruederlin.github.io/particles.js/?utm_source=cdnjs&utm_medium=cdnjs_link&utm_campaign=cdnjs_library#documentation

[Author]

Posts