0

I am trying to run the below script on a vehicles WordPress page template. The page template shows products that are the result of a product filter (make, model, year, transmission, etc..). The product filter uses Javascript. This is replacing a current WordPress product filter that is too slow.

The page the products are displayed on is www.example.com/vehicles

I did try adding the script to the content editor, it displayed correctly on the page, but for some reason the URL keeps changing (need to figure out that strange issue). Also, I am thinking this script should not be in the page content editor or in the page template, but instead located in the functions.php file.

I am not sure what the code should be in the functions.php file and also the code needed for the page template to call the script.

Any help is greatly appreciated.

<link href="https://example.thirdparty.com/static/css/chunk.css" rel="stylesheet">
<link href="https://example.thirdparty.com/static/css/main.css" rel="stylesheet">

<script src="https://example.thirdparty.com/static/js/runtime-main.js"></script>
<script src="https://example.thirdparty.com/static/js/chunk.js"></script>
<script src="https://example.thirdparty.com/static/js/main.js"></script>

Part Two:

How do I call this type of PHP function in the page template?

The PHP function will need to be called in the page template that shows the product filter results. We will call this the page.php page template. Here is sample code of that page template, with content towards the bottom that mentions "call PHP function my_custom_enqueue_scripts here"

<?php
/**
 * Full results page with product filter support to be shared across 
templates.
 *
* @package theme name
*/

?>
<div class="row pagetop">
<div class="small-12 medium-12 columns">
        <header class="page-headermore">
            <h1 class="page-title">
                <?php esc_html_e( 'Vehicles', 'acme' ); ?>
            </h1>
            <div class="breadcrumbs" xmlns:v="http://rdf.data- 
vocabulary.org/#">
                <?php
                if ( function_exists( 'bcn_display' ) ) {
                    bcn_display();
                }
                ?>
            </div>
        </header>
</div>
</div>

<div class="row collapse">

<p>Call the my_custom_enqueue_scripts PHP function within this div.</p>

</div>
Improve this question

1 Answer 1

Reset to default
3

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'/'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 );
Improve this answer
3
  • Thank you very much for the detailed PHP function. I edited my original question and added a "Part Two" and added the page template code. How do I call that type of PHP function on the page template?
    – Webman
    Nov 11, 2019 at 16:56
  • Perhaps the updated answer can help? :)
    – Sally CJ
    Nov 12, 2019 at 4:34
  • 1
    Thank you so much for your detailed answer and explanation. This is working great!
    – Webman
    Nov 12, 2019 at 15:49

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.