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.