wp enqueue script - how to load css and js based on post template

admin管理员组

文章数量:1130349

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?

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?

• wp-enqueue-script
• wp-enqueue-style

Share Improve this question asked Nov 23, 2018 at 19:08 Abdus Sattar BhuiyanAbdus Sattar Bhuiyan 22322 silver badges1616 bronze badges 3

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

Add a comment  | 

1 Answer 1

Sorted by: 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' );

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?

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?

• wp-enqueue-script
• wp-enqueue-style

Share Improve this question asked Nov 23, 2018 at 19:08 Abdus Sattar BhuiyanAbdus Sattar Bhuiyan 22322 silver badges1616 bronze badges 3

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

Add a comment  | 

1 Answer 1

Sorted by: 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' );

本文标签： wp enqueue scripthow to load css and js based on post template