how to load css and js based on post template

Question

I have created a post having the following template:

<?php
/*
Template Name: Html Code
Template Post Type: post, page
*/
?>
<?php get_header(); ?>
<?php get_sidebar(); ?>
<div id="content">
<?php
 the_post();
 the_content();
?>
</div>
<?php get_footer(); ?>

Now I want to load css and js based on this template. My conditional code is here:

 if(is_page_template('htmlcode.php')){

            wp_enqueue_style( 'code-mirror-css', get_template_directory_uri() . '/code-mirror/plugin/codemirror/lib/codemirror.css', array(), 'all');
            wp_enqueue_style( 'code-mirror-monokai', get_template_directory_uri() . '/code-mirror/plugin/codemirror/theme/monokai.css', array(), 'all');

            wp_enqueue_script( 'code-mirror-js', get_template_directory_uri() . '/code-mirror/plugin/codemirror/lib/codemirror.js', array(), '1.0.0', true );
            wp_enqueue_script( 'code-mirror-addon', get_template_directory_uri() . '/code-mirror/plugin/codemirror/addon/selection/selection-pointer.js', array(), '1.0.0', true );
            wp_enqueue_script( 'code-mirror-mode-xml', get_template_directory_uri() . '/code-mirror/plugin/codemirror/mode/xml/xml.js', array(), '1.0.0', true );
            wp_enqueue_script( 'code-mirrror-mode-javascript', get_template_directory_uri() . '/code-mirror/plugin/codemirror/mode/javascript/javascript.js', array(), '1.0.0', true );
            wp_enqueue_script( 'code-mirrror-mode-css', get_template_directory_uri() . '/code-mirror/plugin/codemirror/mode/css/css.js', array(), '1.0.0', true );
            wp_enqueue_script( 'code-mirrror-mode-vbscript', get_template_directory_uri() . '/code-mirror/plugin/codemirror/mode/vbscript/vbscript.js', array(), '1.0.0', true );
            wp_enqueue_script( 'code-mirrror-mode-htmlmixed', get_template_directory_uri() . '/code-mirror/plugin/codemirror/mode/htmlmixed/htmlmixed.js', array(), '1.0.0', true );
            wp_enqueue_script( 'code-mirrror-config', get_template_directory_uri() . '/code-mirror/js/config.js', array(), '1.0.0', true );
     }

But no css and js file is loaded. I inspect it by view source. Any idea?

Did you include all the wp_enqueue_style inside a callback to wp_enqueue_scripts action? — Alvaro
– Alvaro, Commented Nov 23, 2018 at 19:33

Alvaro · Accepted Answer · 2018-11-23 19:43:59Z

It looks like your condition check is correct. As per the comments to the question, don't forget to add it as a callback to the wp_enqueue_scripts action hook.

function enqueue_styles_and_scripts() {
    if ( is_page_template('htmlcode.php') ) {
        wp_enqueue_style( 'code-mirror-css', get_template_directory_uri() . '/code-mirror/plugin/codemirror/lib/codemirror.css', array(), 'all');
        wp_enqueue_style( 'code-mirror-monokai', get_template_directory_uri() . '/code-mirror/plugin/codemirror/theme/monokai.css', array(), 'all');

        wp_enqueue_script( 'code-mirror-js', get_template_directory_uri() . '/code-mirror/plugin/codemirror/lib/codemirror.js', array(), '1.0.0', true );
        wp_enqueue_script( 'code-mirror-addon', get_template_directory_uri() . '/code-mirror/plugin/codemirror/addon/selection/selection-pointer.js', array(), '1.0.0', true );
        wp_enqueue_script( 'code-mirror-mode-xml', get_template_directory_uri() . '/code-mirror/plugin/codemirror/mode/xml/xml.js', array(), '1.0.0', true );
        wp_enqueue_script( 'code-mirrror-mode-javascript', get_template_directory_uri() . '/code-mirror/plugin/codemirror/mode/javascript/javascript.js', array(), '1.0.0', true );
        wp_enqueue_script( 'code-mirrror-mode-css', get_template_directory_uri() . '/code-mirror/plugin/codemirror/mode/css/css.js', array(), '1.0.0', true );
        wp_enqueue_script( 'code-mirrror-mode-vbscript', get_template_directory_uri() . '/code-mirror/plugin/codemirror/mode/vbscript/vbscript.js', array(), '1.0.0', true );
        wp_enqueue_script( 'code-mirrror-mode-htmlmixed', get_template_directory_uri() . '/code-mirror/plugin/codemirror/mode/htmlmixed/htmlmixed.js', array(), '1.0.0', true );
        wp_enqueue_script( 'code-mirrror-config', get_template_directory_uri() . '/code-mirror/js/config.js', array(), '1.0.0', true );
    }
}
add_action( 'wp_enqueue_scripts', 'enqueue_styles_and_scripts' );

Stack Exchange Network

how to load css and js based on post template

1 Answer 1

Your Answer

Hot Network Questions

how to load css and js based on post template

1 Answer 1

Your Answer

Sign up or log in

Post as a guest

Related

Hot Network Questions