0
X
Add Snippet To Project
New Project
Add To Existing Project
<?php
// Add the particle effect background to the body tag
function wpturbo_add_particle_background() {
wp_enqueue_script( 'particles-js', 'https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js', array(), '2.0.0', true );
wp_add_inline_script( 'particles-js', "
window.addEventListener('DOMContentLoaded', function() {
particlesJS('particles-js', {
'particles': {
'number': {
'value': 80,
'density': {
'enable': true,
'value_area': 800
}
},
'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': 'grab'
},
'onclick': {
'enable': true,
'mode': 'push'
},
'resize': true
},
'modes': {
'grab': {
'distance': 140,
'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
});
});
" );
}
add_action( 'wp_enqueue_scripts', 'wpturbo_add_particle_background' );
To enable the particle effect background, you need to do the following:
Once you have done this, the particle effect background will be added to the body of your WordPress site. You can customize the particle effect by modifying the values in the JavaScript code.
Please note that this code assumes you have already included the particles.min.js library in your theme. If not, you can include it by adding the relevant <script> tag in your theme's header file.
Make sure to test the functionality and appearance of the particle effect background on different devices and screen sizes to ensure a smooth user experience.