In WordPress, you should use wp_enqueue_script() to load JavaScript files, and wp_enqueue_style() to load CSS files, and the functions should be called using the wp_enqueue_scripts action hook. Additionally, the theme needs to call wp_head() (in header.php) and wp_footer().
And to enqueue a script only on specific pages, you would use a conditional tag like is_page() in your case.
So this should work and be placed in the theme functions.php file:
add_action( 'wp_enqueue_scripts', 'my_custom_enqueue_scripts' );
function my_custom_enqueue_scripts() {
// If the Page slug is 'vehicles', then we load the files.
if ( is_page( 'vehicles' ) ) {
wp_enqueue_style( 'chunk-styles', 'https://example.thirdparty.com/static/css/chunk.css', [], null );
wp_enqueue_style( 'main-styles', 'https://example.thirdparty.com/static/css/main.css', [], null );
wp_enqueue_script( 'runtime-main', 'https://example.thirdparty.com/static/js/runtime-main.js', [], null );
wp_enqueue_script( 'chunk-js', 'https://example.thirdparty.com/static/js/chunk.js', [], null );
wp_enqueue_script( 'main-js', 'https://example.thirdparty.com/static/js/main.js', [], null );
}
}
UPDATE
So here’s what would happen with the above code:
-
WordPress checks if the URL satisfies a standard Page request/URL that may look like
https://example.com/vehicles. -
If so, WordPress will enqueue (i.e. register and load) the CSS and JS files referenced in the above code. So for example, you’d see these in the document’s
head(<head>here</head>):<link rel="stylesheet" href="https://example.thirdparty.com/static/css/chunk.css" /> ... other 'link"https://wordpress.stackexchange.com/"script'/HTML tags here ... <script src="https://example.thirdparty.com/static/js/chunk.js"></script>
So the function (my_custom_enqueue_scripts()) should not need to be manually called anywhere in the source/HTML, because the function is hooked to wp_enqueue_scripts and the function would be automatically called when WordPress calls that hook (i.e. functions/callbacks registered to run in that hook) on the /vehicles page.
But if you must print the link and script tags in the div as shown in the updated question, then you’d use wp_register_style() with wp_register_script() in the above function and not wp_enqueue_style() with wp_enqueue_script(). So:
add_action( 'wp_enqueue_scripts', 'my_custom_enqueue_scripts' );
function my_custom_enqueue_scripts() {
// If the Page slug is 'vehicles', then register the files.
if ( is_page( 'vehicles' ) ) {
wp_register_style( 'chunk-styles', 'https://example.thirdparty.com/static/css/chunk.css', [], null );
wp_register_style( 'main-styles', 'https://example.thirdparty.com/static/css/main.css', [ 'chunk-styles' ], null );
wp_register_script( 'runtime-main', 'https://example.thirdparty.com/static/js/runtime-main.js', [], null );
wp_register_script( 'chunk-js', 'https://example.thirdparty.com/static/js/chunk.js', [ 'runtime-main' ], null );
wp_register_script( 'main-js', 'https://example.thirdparty.com/static/js/main.js', [ 'chunk-js' ], null );
}
}
And then in your div, call wp_print_styles() and wp_print_scripts():
<div class="row collapse">
<?php
wp_print_styles( 'main-styles' ); // also loads chunk-styles
wp_print_scripts( 'main-js' ); // also loads chunk-js and runtime-main
?>
</div>
A Better Practice: Load CSS files in head.
Yes, you should, despite <link> is allowed in body.
add_action( 'wp_enqueue_scripts', 'my_custom_enqueue_scripts' );
function my_custom_enqueue_scripts() {
// If the Page slug is 'vehicles', then enqueue the CSS and register the JS.
if ( is_page( 'vehicles' ) ) {
wp_enqueue_style( 'chunk-styles', 'https://example.thirdparty.com/static/css/chunk.css', [], null );
wp_enqueue_style( 'main-styles', 'https://example.thirdparty.com/static/css/main.css', [ 'chunk-styles' ], null );
wp_register_script( 'runtime-main', 'https://example.thirdparty.com/static/js/runtime-main.js', [], null );
wp_register_script( 'chunk-js', 'https://example.thirdparty.com/static/js/chunk.js', [ 'runtime-main' ], null );
wp_register_script( 'main-js', 'https://example.thirdparty.com/static/js/main.js', [ 'chunk-js' ], null );
}
}
And then in your div, call wp_print_scripts() only:
<div class="row collapse">
<?php
// wp_print_styles( 'main-styles' ); // the files already loaded in 'head'
wp_print_scripts( 'main-js' ); // also loads chunk-js and runtime-main
?>
</div>
Or Use the original PHP function and load the JS files in the footer.
Yes, just set the 5th parameter for wp_enqueue_script() to true which loads the script file in the page footer (printed somewhere before </body> or wherever you put the call to wp_footer()). E.g.
wp_enqueue_script( 'chunk-js', 'https://example.thirdparty.com/static/js/chunk.js', [], null, true );