How to: Conditionally Enqueue JS and Stylesheets, for Custom Post Type (Single and Archive Templates)

Question

I’ve created a plugin for my child theme, in which custom functions are stored. Additionally, within the plugin, I'm also enqueueing stylesheets and .js which control the output of two templates, for a custom post type named workshops. (The only place on the site where the enqueued styles and .js are needed.)

With that in mind, when the active template is either single-workshop.php and archive-workshop.php, I want to call the following .js and stylesheets:

• Bootstrap 4 to structure the pages,
• Google Maps API to display map and location pin
• Owl carousel and Chocolat.js to display images in a modal popup
• A combined .js file to initialise some of the above

The code I’m using below doesn’t work with the if statements in place but does in a non-conditional state:

function renchlist_enqueue_styles() {
  if ( is_page_template( array( 'archive-workshop.php', 'single-workshop.php' ) ) ) {
   wp_enqueue_style('bootstrap-grid-nk', get_stylesheet_directory_uri() .'/library/bootstrap/css/bootstrap-grid.min.css');
    wp_enqueue_style ( 'nk-owl-style', get_stylesheet_directory_uri () . '/library/owl/css/owl.carousel.css', array (), '1.3.3' );
    wp_enqueue_style ( 'owl-style', get_stylesheet_directory_uri () . '/library/owl/css/owl.theme.default.min.css');
    wp_enqueue_style('nk-chocolat-style', get_stylesheet_directory_uri() .'/library/chocolat/css/chocolat.css');
  }
}
add_action('wp_enqueue_scripts', 'renchlist_enqueue_styles');



function renchlist_add_scripts() {
  if ( is_page_template( array( 'archive-workshop.php', 'single-workshop.php' ) ) ) {

     wp_enqueue_script( 'nk-combined-js', get_stylesheet_directory_uri() . '/library/renchlist-combined.js', array('jquery'), null, true );
     wp_enqueue_script( 'google-map', 'https://maps.googleapis.com/maps/api/js?key=XXXXXXXXXXXX', array(), '3', true );
     wp_enqueue_script( 'google-map-init', get_stylesheet_directory_uri() . '/library/js/google_maps.js', array('google-map'), '0.1', true );
   
  }

I'm flummoxed as the source of my error - grateful for any help.

Answer 1

Try using is_post_type_archive() and is_singular():

// ...
if ( is_post_type_archive( 'my-post-type' ) || is_singular( 'my-post-type' ) ) {
    // your enqueue code goes here
}
// ...

These functions will check to see if you're on, respectively, an archive page for the post type my-post-type or a single my-post-type post. (Change the my-post-type to what you've named your custom post type when you registered it, of course.)