Menu
How do I implement or install the particles.js into wordpress?
http://vincentgarreau.com/particles.js/
I have tried install the particle.js but doesn't work, maybe i miss located some important details.
I also tried the "particles login page" plugin, then try to copy it into the content page, but still no luck.
Any suggestion will be a great help
Thanks.
861
To accomplish it, one of the things you can do is to add a particle effect. In WordPress, there are several options to add a particle effect, which you can adopt according to your skill level. If you have no coding skills, you can add a particle effect to your page using a page builder plugin like Elementor.
Method 1: Add a directory in your theme called particle-background-wp and copy your particlesjs-config.json file to that folder. The json will automatically be loaded. Method 2. Add a filter rn-pbwp-custom-json that returns a JSON string of the config.
To display the particle js background select the page template as “Particle Background” or use the shortcode [particlejs-banner]. How can I add my own particles.js config file? No Need to create configuration file, everything is configurable from wordpress Dashboard, just go to Dashboard-> ParticleJs Banner and configure accordingly.
Method 1. Add JavaScript to Entire WordPress Site Using Insert Headers and Footers Plugin Sometimes a plugin or tool will need you to copy and paste a JavaScript code snippet into your website to work correctly. Usually, these scripts will go in the header or footer section of your WordPress blog, so the code is loaded on every page view.
You can enqueue a trustworthy CDN if you are not in a position to install it locally.
The following is to be added to your functions.php if you have a standard wordpress architecture.
function enqueue_particlejs(){
wp_enqueue_script('particle-js','https://cdn.jsdelivr.net/npm/[email protected]/particles.min.js');
}
add_action('wp_enqueue_scripts', 'enqueue_particlejs');
Then you'd need to use their way of actually triggering it on page, which means assigning an id of "particle-js" to one of your dom elements.
<div id="particle-js"></div>
If you don't have access to the javascript files then you can get away inlining it:
<script>
particlesJS.load('particle-js', '<?= get_template_directory_uri() . '/assets/particlejs.json' ?>', function() {
});
</script>
You'll need to create a particlejs.json file somewhere in your wordpress directory and reference it above.
They give one as example or just export one from the website you linked.
143
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With