Trying to Add JS Particles Background via Enfold theme

M | C… I have implemented Particles.js inside an Enfold Color Section recently… if you’re still interested I can post the steps here.

Ok… hopefully this makes sense and is easy to follow for designers/developers that use Enfold regularly.
Firstly here’s a simplified version of the Enfold One Page Portfolio demo that I’ve set up to show results… http://dev.twotreescreative.com.au/. And you’ll notice that I’ve implemented TWO instances of particles.js on the same page, one instance behind a Color Section element (not full width) and one instance behind a Grid Row element (full width). .. this just requires some additional code a little later to call additional instances of particles.js.

NOTE: These steps assume you’re using a child theme with Enfold.

Step 1 – Configure Particles.js and download the package.

Go to http://vincentgarreau.com/particles.js/ and click “Download” on the box in the middle of the screen so you’ll have particles.js-master.zip on your machine. Inside the zip you’ll need particles.js OR the minified version particles.min.js AND the files inside the “demo” folder.
While you’re still on http://vincentgarreau.com/particles.js/ it’s also useful to configure your particles display using the controls on the right of screen. When you’re happy enough… click to “Download current config (json)” at the bottom of the controls panel… the contents of this file (which will be named particlesjs-config.json) will be handy later.

Step 2 – Adding files to your hosting account (via FTP or cPanel or whatever).

FTP to your server and browse to the /wp-content/themes/enfold-child/ folder (where “enfold-child” is the name of your child theme).
Upload particles.js OR the minified version particles.min.js (from the root of the “particles.js-master.zip” package you downloaded previously) to the root of your child theme folder.
Now create two new folders/directories in your child theme directory… one named “js” and one named “css”.
In the “js” folder, upload the file “app.js” from your machine, which you’ll find inside the “particles.js-master.zip” package – it’s in “demo > js > app.js”.
Now jump back up to your child theme directory and open the new “css” folder you created… upload the file “style.css” from your machine, which you’ll find inside the “particles.js-master.zip” package – it’s in “demo > css > style.css”.

Step 3 – Loading script files via the Child Theme Functions.php and adding some css to your Child Theme Stylesheet.

In your WordPress admin, (via “Appearance > Editor”) add the following to your Theme Functions (functions.php)… obviously you’ll replace “dev.twotreescreative.com.au” and “enfold-child” to reflect your own site.

function enfold_customization_custom_js() {
?>
<script type = "text/javascript" src = "http://dev.twotreescreative.com.au/wp-content/themes/enfold-child/particles.js"></script>
<script type = "text/javascript" src = "http://dev.twotreescreative.com.au/wp-content/themes/enfold-child/js/app.js"></script>
<?php
}
add_action( 'wp_footer', 'enfold_customization_custom_js' );

Once you’ve saved/updated the functions file, and you’re still in “Appearance > Editor” … add the following css to your Child Theme stylesheet – some of these properties can be tweaked later to suit your needs.

* =============================================================================
   Particles.js CSS
   ========================================================================== */
/* ---- base ---- */
html{
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
canvas{
  display:block;
  vertical-align:bottom;
}
/* ---- particles.js container ---- */
#particles-js {
  position:absolute;
  width: 100%;
  height: 100%;
  background-image: url('');
  background-size: cover;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  top: 0;
}

Step 4 – Time for a test.

Edit the page (in WordPress admin) that you want to add the particles.js to and add a “Code Block” Element (from Avia Layout Builder) as the last element INSIDE the Color Section (or Grid Row) in which you’re after the particles effect.
Edit the “Code Block” and enter

<div id="particles-js"></div>

in the Code Block Content area. Save and Update page and view results on front end. All things being equal, you should be seeing some particles floating around behind the specific Color Section… but they’ll just be the default “look”.

Step 5 – Applying your specific settings for your particles.

FTP to your site (from Step 2) and go into your Child Theme and then open the app.js file inside “js > app.js”.
You’re now going to open and copy all of the contents of the file you downloaded (in Step 1) named “particlesjs-config.json” – which contains your custom configuration options from http://vincentgarreau.com/particles.js/ – into the “app.js” file.
NOTE: In the app.js file, ONLY replace code between curly braces, that is { and } … don’t replace the first line of script “particlesJS(‘particles-js’,” (which I think is at line 14) or the last line, which is just “);” … just replace everything in between with the contents of you “particlesjs-config.json” file.
Save the app.js file on your server and refresh the front-end of your site to check that the config of the particles has updated.

__________________________________

There may be better ways to implement all this… but this is just how I got it to work, with enough flexibility to get the effect I was after.

• This reply was modified 6 years, 11 months ago by Two Trees.

I get

Uncaught TypeError: Cannot read property ‘getElementsByClassName’ of null
at window.particlesJS (particles.js:1495)
at app.js:14

what could be wrong? the link in fuctions.php word to the app.js and particles.js

thank you!

@ two trees…

yes… have a look here. just the first color section it should be.

can give you also admin login & FTP if you wand.

THX a lot!

Oooh shit havn’t seen the bad charecters… its working now. thanks for your input. have a nice day my friend!

Hi Two Trees

Thanks so much that. I followed your instructions and it all worked brilliantly except that the particles effect does not appear as background to the color action but as an element, i.e. other content in the section does not appear over the top but before it. Any advice on what I’m doing wrong would be much appreciated.

Peter

Hi

It seems to be working now – I just deleted the files and uploaded them again and it’s working now. Sorry to have and bothered you and thanks again for the original post.

Peter

Hi rotem,
I’m open to help you figure out the issue… but I would need to see the published page, to check how the elements are rendering. Is there a link you can post here?

Hi Basilis,
I will have a look at adding the documentation to the library as soon as I get some free time.
Should I specify a specific folder with the pull request?
Thanks,
Lee

I tried above methods but my particles.js background is positioned right after my avia content (I already tried to replace the code right before the end of color section.

Halo… did you get this solved? If you’re able to link me to the page in question, I can see if anything jumps out at me as to what’s going wrong.
I know you said you’d added a link… but I can’t see it.
Cheers, Lee

@TwoTrees: You’re a rockstar! Tutorial worked seemlessly. Big, big, kudos!
Cheers,
Andi