Doesn't Work - Multiple Errors - Installation Instructions Don't Work in WordPress

[samhayman]

There's 9 errors when installing particles in WordPress using the instructions provided by Vincent Garreau because he has failed to provide the correct instructions for usage in WordPress and assumes everyone understands how to properly load and initialize js in WordPress.

Uncaught TypeError: Cannot read property 'getElementsByClassName' of null at window.particlesJS (particles.min.js:9) at HTMLDocument. (particles-set.js?ver=1.0.0:4) at i (jquery.js:2) at Object.fireWith [as resolveWith] (jquery.js:2) at Function.ready (jquery.js:2) at HTMLDocument.K (jquery.js:2)

[digiltd]

Wow, drop the attitude, nobody owes you anything. You haven't paid for something that doesn't work, there is no mention that this is for use in WordPress so why should he document.

It is clear you don't know what you are doing, which is fair enough, we all start somewhere.

But are you going to complain about every single bit of javascript that you can't get to work in WordPress, not because the code won't work in WordPress, but because you don't know how to use javascript in WordPress?

Or do you learn how to use javascript in WordPress?

You don't barge in, call out the developer by name and state they have "failed to provide correct instructions". There are a lot of people that will help you learn what you need to learn, but not with that sort of attitude.

Just be polite and respectful next time.

(oh and try googling that first line in the error)

[JohnRodney]

@samhayman Hey i stumbled on your issue while trying to set this up in wordpress as well. 99.9% likely you aren't using the right element id for the initialization function.

When I dug into the minified source code it looks like:

  var t=document.getElementById(e),
        i="particles-js-canvas-el",
        s=t.getElementsByClassName(i);

It is important to notice that your method is actually called on the return value of the getElementById. The response to google the first line will lead you down an avenue of people saying that you should load the document after the head or with a document.onload, but since they call it on the return value t it is actually the t that is null and not the document. If your document wasn't ready then the initial getElementById would be throwing the error and not the getElementsByClassName.

To get this working in wordpress I did the following: Add a div

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

As the documentation states. Then add a custom script that is something like:

<style>
  canvas{
    top: 0;
    left: 0;
    position: fixed;
    background-color: #2b87da;
    z-index: 1;
  }
</style>
<script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>
<script>
  function loadParticles() {
    var options = {
      "particles": {
        "number": {
          "value": 90,
          "density": {
            "enable": true,
            "value_area": 552.4033491425909
          }
        },
        "color": {
          "value": "#ffffff"
        },
        "shape": {
          "type": "circle",
          "stroke": {
            "width": 0,
            "color": "#000000"
          },
          "polygon": {
            "nb_sides": 5
          },
          "image": {
            "src": "img/github.svg",
            "width": 100,
            "height": 100
          }
        },
        "opacity": {
          "value": 0.5,
          "random": false,
          "anim": {
            "enable": false,
            "speed": 1,
            "opacity_min": 0.1,
            "sync": false
          }
        },
        "size": {
          "value": 3,
          "random": true,
          "anim": {
            "enable": false,
            "speed": 40,
            "size_min": 0.1,
            "sync": false
          }
        },
        "line_linked": {
          "enable": true,
          "distance": 150,
          "color": "#ffffff",
          "opacity": 0.4,
          "width": 1
        },
        "move": {
          "enable": true,
          "speed": 6,
          "direction": "none",
          "random": false,
          "straight": false,
          "out_mode": "out",
          "bounce": false,
          "attract": {
            "enable": false,
            "rotateX": 600,
            "rotateY": 1200
          }
        }
      },
      "interactivity": {
        "detect_on": "canvas",
        "events": {
          "onhover": {
            "enable": true,
            "mode": "repulse"
          },
          "onclick": {
            "enable": true,
            "mode": "push"
          },
          "resize": true
        },
        "modes": {
          "grab": {
            "distance": 400,
            "line_linked": {
              "opacity": 1
            }
          },
          "bubble": {
            "distance": 400,
            "size": 40,
            "duration": 2,
            "opacity": 8,
            "speed": 3
          },
          "repulse": {
            "distance": 200,
            "duration": 0.4
          },
          "push": {
            "particles_nb": 4
          },
          "remove": {
            "particles_nb": 2
          }
        }
      },
      "retina_detect": true
    };
    particlesJS("particles-js", options);
  }
  jQuery(document).ready(function() {
    loadParticles();
  });
</script>

Notice the first argument passed into the particlesJS function MUST match exactly your div's id or you will get the error you mentioned above. Even though the OP was slightly rude I hope this helps anyone that runs into this issue in the future.

This issue can probably be closed now.

[digiltd]

Thanks @JohnRodney

You might want to have a little look at wp_enqueue_script and whilst I have no doubt your way works, it is not the recommended way of handling javascript in WordPress.

There is loads out there on the subject, here is a nice intro (https://code.tutsplus.com/articles/the-ins-and-outs-of-the-enqueue-script-for-wordpress-themes-and-plugins--wp-22509)[The Ins and Outs of The Enqueue Script For WordPress Themes and Plugins]

If you are planning on getting into WordPress development it is worth reading up on.

Good luck

[JohnRodney]

@digiltd Yea I've used the wp_enque_script in the past and have a few custom wordpress plugins under my belt.

Just in this case I need all the styles and scripts scoped to this page, and the divi theme the client is using supports direct custom code. Also the project is underbid and overscope so sadly won't be the most proud of the code produced here, but its about the time vs money factor. Things are a bit messy on the site already so its about deadline first refactor later. NOT my favorite way to code but reality sometimes I guess. If I finish ahead of schedule I will definitely refactor to a plugin using the correct patterns. Other issue is they have no staging environment so its direct coding on prod and in those cases I tend to avoid direct PHP coding as any syntax errors will crash the entire site.

Also the OP seemed to be in the beginning phases of coding so I wanted the solution to be as simple as possible for him. Your comment will definitely help those in the future who stumble here and would like to follow best practices.

Cheers and happy coding!

[sysRoot]

Alright, read through this issue. I am using wpBakery page builder on wordpress. I have successfully enqueued the scripts, and have solved the error of elementID by changing from class to ID. I had Mark Bruederlins particles.js working fine, however one point to make is I was using <canvas class="particles-js"> </canvas> but his implementation doesn't seem to work well for mobile devices even with the documentation. So I figured why not try to make this one work, as it is a bit more complex and full featured. I know this isn't a help forum... but this is what I used in WPBakery's Raw JS module like I did for Mark's implementation, and wrote this in

<script type="text/javascript"> /* window.onload = function() { Particles.init({ selector: '.particles-bg', color: ['#00ff00', '#7FFF00', '#458B00'], connectParticles: true, responsive: [ { breakpoint: 768, options: { maxParticles: 200, color:'#48F2E3', connectParticles: true } }, { breakpoint: 425, options: { maxParticles: 100, connectParticles: true } }, { breakpoint: 320, options: { maxParticles: 25 } } ] }); }; */ /* particlesJS.load(@dom-id, @path-json, @callback (optional)); */ particlesJS.load('particles-js', '/wp-content/themes/theme-child/scripts/particles.json', function() { console.log('callback - particles.js config loaded'); }); </script> callback - particles.js config loaded <<< I see this in console, so I know it's loading to some extent

I included the previous code I was using as reference. I have left my particles-js css as is hoping it would work So my two questions are this... can I not draw to a canvas? And if one is false, am I missing anything? @JohnRodney 's solution seems promising, but I can tell it's bad practice Using a <div> also seems to break my page's formatting/theme.

So to re-iterate, I previously had another implementation of particles.js working. I have edited my class on my canvas to an id, have made appropriate change from class to id in styles.css, and then added the above code from github readme.

I feel like I'm missing something like the window.onload or something equally stupid outside the scope of my current JS knowledge. I am learning on udemy and it's going well, but I'm no where near capable of fully understanding how this script works, as I'm only up to expressions vs statemets and learning about Objects

I apologize that I'm posting here, but there's not exactly a help forum available for particles.js and I figured someone MIGHT be able to point me in the right direction.

[sysRoot]

I answered my own question about canvas... it seems to be looking for a div in the JS directly? I'll have to check to be sure. I am currently using John Rodney's direct implementation to tweak the css a bit. the div doesn't break the page when particles.js is actually drawing to it.

[sysRoot]

jQuery(document).ready(function() { loadParticles(); Thought this was what I was missing... maybe my path to my .json file isn't written correctly? but it is contained at the location mentioned above. Removed John Rodney's direct implementation from my site, as it was for some reason small, and I couldn't specify my parameters with ease.

Correction. It was indeed what I was missing... Now I don't understand why my div isn't responsive to the height and width of the row it's inside of... But that seems like a problem for me to figure out. Figured this out as well, see CSS note at bottom.

If anyone stumbles upon this. This is what I did I added this in a WPBakery RawJS

<script type="text/javascript"> /* particlesJS.load(@dom-id, @path-json, @callback (optional)); */ jQuery(document).ready(function() { particlesJS.load('particles-js', '/wp-content/themes/theme-child/scripts/particles.json', function() { console.log('callback - particles.js config loaded'); } ) }) </script>

And then I added a Raw HTML field <div id="particles-js"></div>

Then I added my scripts to my ./scripts folder under my child theme's directory. I then enqueued them using the wp function in my child theme's functions.php Which looks something like this

wp_enqueue_script( 'particles', '/wp-content/themes/theme-child/scripts/particles.js', array( 'jquery' ), '2017', true ); wp_enqueue_script( 'particles-min', '/wp-content/themes/theme-child/scripts/particles.min.js', array( 'jquery' ), '2017', true );

I then added css for the ID class particles.js in my child theme's style.css

That should get it working within your WPBakery row #particles-js {position:absolute;display:block;top: 0;bottom:0;left: 0;right: 0;z-index: -1;} This is the css I used, however, be warned that setting the z-index to -1 did put it behind my text, it did disable interactivity.

[RyanPWalker]

@JohnRodney

Notice the first argument passed into the particlesJS function MUST match exactly your div's id or you will get the error you mentioned above.

This was my issue. Thank you for the insight.