$conf, $runtime; function_exists('chdir') AND chdir(APP_PATH); $r = 'mysql' == $conf['cache']['type'] ? website_set('runtime', $runtime) : cache_set('runtime', $runtime); } function runtime_truncate() { global $conf; 'mysql' == $conf['cache']['type'] ? website_set('runtime', '') : cache_delete('runtime'); } register_shutdown_function('runtime_save'); ?>wp enqueue script - how to load css and js based on post template|Programmer puzzle solving

Programmer puzzle solving

    最新消息：Welcome to the puzzle paradise for programmers! Here, a well-designed puzzle awaits you. From code logic puzzles to algorithmic challenges, each level is closely centered on the programmer's expertise and skills. Whether you're a novice programmer or an experienced tech guru, you'll find your own challenges on this site. In the process of solving puzzles, you can not only exercise your thinking skills, but also deepen your understanding and application of programming knowledge. Come to start this puzzle journey full of wisdom and challenges, with many programmers to compete with each other and show your programming wisdom! Translated with DeepL.com (free version)
    你的位置： HOME>matter>wp enqueue script - how to load css and js based on post template

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

    matteradmin10PV0评论

    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 2232 silver badges16 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

    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' );

    Articles related to this article

    Post a comment

    comment list (0)

    1. No comments so far