0

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?

Improve this question
3
  • Did you include all the wp_enqueue_style inside a callback to wp_enqueue_scripts action?
    – Alvaro
    Nov 23, 2018 at 19:33
  • no. I exactly did as above.
    – Abdus Sattar Bhuiyan
    Nov 23, 2018 at 19:35
  • Then include those inside it, let me write it in an answer.
    – Alvaro
    Nov 23, 2018 at 19:37

1 Answer 1

Reset to default
1

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' );
Improve this answer

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.