Run Product Filter Javascript On Page Template

by

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:

  1. WordPress checks if the URL satisfies a standard Page request/URL that may look like https://example.com/vehicles.

  2. 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 );

Leave a Comment