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

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.

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 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.)

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0