This members-only tutorial provides the steps to add particles.js as a background for a homepage Section for viewports that are at least 481px wide in Oxygen using matchMedia (thanks SupaMike).
Live Demo
Let us load particles.js library on the homepage.
Install and activate My Custom Functionality plugin.
Connect to your hosting account using a FTP client and navigate to site's /wp-content/plugins/my-custom-functionality-master directory.
/wp-content/plugins/my-custom-functionality-master
Upload particles.min.js to plugin's assets/js directory.
assets/js
Edit plugin.php and replace
plugin.php
add_action( 'wp_enqueue_scripts', 'custom_enqueue_files' ); /** * Loads <list assets here>. */ function custom_enqueue_files() { // if this is not the front page, abort. // if ( ! is_front_page() ) { // return; // } // loads a CSS file in the head. // wp_enqueue_style( 'highlightjs-css', plugin_dir_url( __FILE__ ) . 'assets/css/style.css' ); /** * loads JS files in the footer. */ // wp_enqueue_script( 'highlightjs', plugin_dir_url( __FILE__ ) . 'assets/js/highlight.pack.js', '', '9.9.0', true ); // wp_enqueue_script( 'highlightjs-init', plugin_dir_url( __FILE__ ) . 'assets/js/highlight-init.js', '', '1.0.0', true ); }
with
This is a premium members-only content.
To view the rest of the content, please sign up for membership ($47/month or $399 one-time).
Already a member? Log in below or here.
Enter your email address to subscribe to this blog and receive notifications of new tutorials by email.
Join 514 other subscribers
Email Address
Subscribe
Session expired
Please log in again. The login page will open in a new tab. After logging in you can close it and return to this page.