2

I have registered some styles and scripts that should be loaded if a template part is loaded in a template file. For ex:

in home.php

<?php get_template_part( 'template-parts/external_links'); ?>

(this template-part is loaded across different template files) therefore, I want to enqueue (a previously registered file in functions.php)

Using template files for example I use:

if(is_page_template('admin.php')){
        wp_enqueue_script( 'unicorn-admin');
    }

Is there a way to enqueue a file when get_template_part( 'template-parts/external_links'); is used?

3
  • 1
    What problem does conditionally loading the script solve? What context for this can you provide, and the reasoning for this specific solution? Knowing this will allow the correct answer to be given as there are several approaches to this and not all of them may be appropriate to your use case ( if this attempted solution even fits your use case )
    – Tom J Nowell
    Sep 21, 2021 at 20:17
  • I'm developing with other people, a theme, It's tailor-made, therefore it has a lot of specific pages templates, some of them reuse template parts (that needs its own js and css), it's hard to look out every template page to find if a template part is loaded (and enqueue the script) my goal is to keep as fewer code loaded as possible, to accomplish this I'm splitting javascript and CSS into smaller parts, and only use them when it's needed. This is why I want to know if there's any conditional or function, to enqueue scripts only if a template part is loaded. Sep 21, 2021 at 21:12
  • 1
    Put the enqueue script in the template-part file but register it in the functions file where you register/enqueue all your other scripts. Oct 4, 2021 at 14:06

3 Answers 3

5
+25

You can use the get_template_part_{$slug} hook, which fires before a template part is loaded. You can find the reference here, which I find more useful than the official reference.

So, I tested it in the twentytwentyone theme (yes I modified the theme directly but only for testing). I tested it with the template-parts/content/content-single.php part, and I created a test.js file, with an alert inside it, in the assets/js/ folder of the theme. Then, I placed the following code in functions.php.

function test_template_part_hook($slug, $name, $args) {
    wp_enqueue_script('test', get_template_directory_uri() . '/assets/js/test.js', array('jquery'));
}

add_action( 'get_template_part_template-parts/content/content-single', 'test_template_part_hook', 10, 3 );

And the alert triggers in every single post, of course, you should modify the above code with your own paths to your files and complete the wp_enqueue_scriptfunction with the rest of the arguments that function uses.

So, basically what you need to do is what is described above, using get_template_part_slug as the action name, where slug is the path of the template part file you want to use, in your case, for what I read in you question, slug = 'template-parts/external_links', so the entire hook name should be get_template_part_template-parts/external_links.

2
  • Tested and seem to work great. Just a note, if you use Woocommerce wc_get_template_part this wont work. Sep 26, 2021 at 8:19
  • it will work with Woo if you add an endpoint, then call the template part - like ` \add_action( 'woocommerce_account_ask-a-pharmacist_endpoint', [ $this, 'pharmacist_endpoint' ] );` and then use get_template_part in your callback method.
    – Q Studio
    Dec 2, 2021 at 17:13
1

Just call wp_enqueue_script/wp_enqueue_style in the template part file itself.

0

A question very similar to this has already been answered here. Essentially, the solution is to write a function to load your scripts conditionally outside of your site's initial enqueue functions.

First, create the functions with the necessary conditionals to load the scripts or styles you want, something like:

// Conditional script loading
function conscripts($type) {
  if($type==='blue'):
    // Register blue stylesheet
    wp_enqueue_style( 'blue', get_template_directory_uri() . '/assets/styles/blue.css', array(), filemtime(get_template_directory() . '/assets/styles/scss'), 'all' );
  elseif($type==='red'):
    // Register red stylesheet
    wp_enqueue_style( 'red', get_template_directory_uri() . '/assets/styles/red.css', array(), filemtime(get_template_directory() . '/assets/styles/scss'), 'all' );
  endif;
}

Next, use the function to load the correct scripts/styles when the template part you're using is being used. Something like:

if( get_field('color') == 'red') {

        get_template_part( 'red' ); 
        conscripts('red');

} elseif (get_field('color') == 'blue') {

        get_template_part('blue' ); 
        conscripts('blue');
}

Without seeing your actual code I can't give you a more detailed answer, and while this approach isn't automated, it's a tidy solution to script/style bundling if you're unsure of what templates are being loaded where.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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