How to Insert Particles.JS into WordPress Using SiteOrigin

If you, like me have spent way too many New Years' resolutions deciding to learn Javascript.

Then you'll know how frustrating it is when you encounter 'the site' that just has to have Javascript. Specifically a particle.js system in your above-the-fold content.

And so it was that with renewed vigor, I embarked on hunting down the exact steps that would result in a particle system. A Particle system that I can now happily say I have floating across my header content.

Like all good stories, the journey did not start well. Plugin after plugin was installed and then discarded.

Until eventually I reached out to SiteOrigin. As expected I was told upfront that they can't help with custom scripts.

I was unphased.

For all of you, that know your Support Centers you'll have realized that you get the good the bad and the ugly.

The guys at SiteOrigin though, are hands down the best Support Center I've ever had the pleasure of dealing with.

And so it was, that bolstered by years of previous assistance, I stated my case, aka came out and admitted that I'm hopeless at Javascript.

As expected the guy who responded, Alex, replied with some helpful advice.

Admittedly it was advice that required me to mentally embark into unfamiliar territory, Javascript.

And so by grinding my way through his suggestions, never quite sure I was heading in the right direction, while at the same time Googling for solutions with every new phrase I came across, I achieved my goal.

No one was more surprised than I.

Special thanks also goes out to the YooTheme guys whose tutorial provided my first useful insight into how one goes about getting a JS Script to work.

And so, to save you from getting lost in an unfamiliar coding language, and without further ado, here follows.

How to install a particle JS system on just one page of your WordPress website using SiteOrigin.

Step 1

Download Vincent Garreau's particle javascript. And extract the file.

Step 2

Use the on-screen particle configurator to create your own particle system.  When you're done click the Download current config (json) option.

Step 3

Log into your CPanel File Manager or connect via FTP.  Navigate to Your Uploads folder.  Normally it's public_html/yoururlname/wp-content/uploads. And create a new folder called particles.

Step 4

Click into the newly created particle folder and then click the Upload button. An upload window will open.

Now click Select File and choose the json file you previously downloaded.

Upload the file.

Step 5

Repeat the upload process for the particle.min.js file. You'll find it amongst the files you extracted earlier.

Step 6

Now open the WordPress page you want your particle.js to be on.

Add a row and then add the Custom HTML widget.

Step 7

If you want a full-width row, click the spanner and select Edit Row.  Open the Layout Tab on the right and change the Row Layout to Full Width. You should probably also change the rows background colour or add a background image.

Step 8

Now you need to add the javascript and css that makes everything work. Open the Custom HTML widget and add the following:

<script>
// particles
jQuery(function () {
var url = 'wp-content/uploads/particles/particles.min.js';
jQuery.getScript(url, function() {
particlesJS.load('particles-js', 'wp-content/uploads/particles/particles.json');
});
});
</script>
<style>/* particles */
#particles-js {
position: absolute;
width: 100%;
height: 520px;
margin-top:-200px;
margin-bottom:-150px;
}
</style>

Then open the Attributes tab on the right and assign the widget the ID particle-js

 

Step 9

Lastly, add a SiteOrigin Headline widget. Set it up the way you want as long as you make sure you've added some top and bottom padding. In my case I added 200px both top and bottom.

Step 10

Update the page and view it. You should now see something like this. Plus when you move your mouse over the row the particles and connected lines should follow it.

Another cool feature is that if you click repeatedly it increases the particles on the page.