How to load JS and CSS assets in WordPress using Advanced Scripts
Many tutorials in this site provide instructions to enqueue .js and .css files using a custom functionality plugin like this:
if ( is_page() ) {
wp_enqueue_style( 'glightbox', plugin_dir_url( __FILE__ ) . 'assets/css/glightbox.min.css' );
wp_enqueue_script( 'glightbox', plugin_dir_url( __FILE__ ) . 'assets/js/glightbox.min.js', '', '3.0.7', true );
}
The process involves placing/uploading the assets to a folder inside the plugin and referencing them in the above code often needing to connect via FTP to the site’s hosting server.
Some users prefer to use Advanced Scripts instead which lets us directly upload (if you want) the asset files or paste their CDN URLs when creating scripts.
Let us see how Advanced Scripts can be used to load the CSS and JS files for GLightbox on all static Pages as an example.
Install and activate Advanced Scripts.
Loading a CSS file
Go to Tools > Advanced Scripts and add a new script.
Title:
GLightbox CSS
Type:
CSS: Load from URL
Location:
Front-end
Hooks:wp_head
URL:
(Locate the file’s CDN link and paste it or download it and click Upload..)
Conditions:
Expression is true: is_page()
Save and activate.
Loading a JS file
Title:
GLightbox JS
Type:
JavaScript: Load from URL
Location:
Front-end
Hooks:wp_footer
Priority:
10
URL:
(Locate the file’s CDN link and paste it or download it and click Upload..)
Conditions:
Expression is true: is_page()
Save and activate.
Tip: When loading multiple JS files where one is needed for the other to work, you may want to ensure that the loading order is correct by dragging the script (in the right side list) below/above the other as necessary.