Wordpress custom category page not loading javasctipt files and giving 404 error

Question

I have started from scratch to develop a theme, now i have a code snippet from one websites where in he is using the script like -

<script>
        head.js(
            { jquery : "js/jquery.min.js" },
            { mousewheel : "js/jquery.mousewheel.js" },
            { mwheelIntent : "js/mwheelIntent.js" },
            { jScrollPane : "js/jquery.jscrollpane.min.js" },
            { history : "js/jquery.history.js" },
            { stringLib : "js/core.string.js" },
            { easing : "js/jquery.easing.1.3.js" },
            { smartresize : "js/jquery.smartresize.js" },
            { page : "js/jquery.page.js" }
        );
</script>

Now i when i try this in my category-{slug}.php it searches these files in the folder wordpress/category/{slug}/

Now i also tried here `

<script>
        head.js(
            { jquery : "<?php bloginfo('template_url')?>/js/jquery.min.js" },
            { mousewheel : "<?php bloginfo('template_url')?>/js/jquery.mousewheel.js" },
            { mwheelIntent : "<?php bloginfo('template_url')?>/js/mwheelIntent.js" },
            { jScrollPane : "<?php bloginfo('template_url')?>/js/jquery.jscrollpane.min.js" },
            { history : "<?php bloginfo('template_url')?>/js/jquery.history.js" },
            { stringLib : "<?php bloginfo('template_url')?>/js/core.string.js" },
            { easing : "js/jquery.easing.1.3.js" },
            { smartresize : "<?php bloginfo('template_url')?>/js/jquery.smartresize.js" },
            { page : "<?php bloginfo('template_url')?>/js/jquery.page.js" }
        );`
</script>

Then also i get a 404 error in firebug but when i try something like this -

{jquery : "../../wp-content/themes/testing/js/literature"},

It works, Now i wanted to know that why it is looking these dependancies in the folder category rather than my theme directory whereas at the same time if i wrote these lines

<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/literature/head.min.js"></script>

in my head section and to my surprise they work, can anyone tell me what is going on here

Answer 1

Accordingly to your code, you're using a script called head.js , which allows you to add more scripts to your header. If you truly want to use head.js, you have to add that script in your head manually. I discourage using what you don't really need.

Put this PHP code in your functions.php file, which should be located in your theme directory. If not, create it. This is how you usually include scripts to your theme.

add_action('wp_enqueue_scripts', 'mytheme_enqueue_scripts');

function mytheme_enqueue_scripts() {
    // jQuery comes with WordPress, no need to include it


    $dir = get_stylesheet_directory_uri() . '/js';

    // Vanilla scripts
    wp_enqueue_scripts('stringLib',     $dir . '/core.string.js');

    // All these guys depend on jQuery, hence the "array('jquery')"
    wp_enqueue_scripts('easing',        $dir . '/jquery.easing.1.3.js',         array('jquery'));
    wp_enqueue_scripts('easing',        $dir . '/jquery.smartresize.js',        array('jquery'));
    wp_enqueue_scripts('easing',        $dir . '/jquery.page.js',               array('jquery'));
    wp_enqueue_scripts('history',       $dir . '/jquery.history.js',            array('jquery'));
    wp_enqueue_scripts('mousewheel',    $dir . '/jquery.mousewheel.js',         array('jquery'));
    wp_enqueue_scripts('mwheelintent',  $dir . '/jquery.easing.1.3.js',         array('jquery'));
    wp_enqueue_scripts('mwheelintent',  $dir . '/mwheelIntent.js',              array('jquery'));
    wp_enqueue_scripts('jscrollpane',   $dir . '/jquery.jscrollpane.min.js',    array('jquery'));

    // This one happens to rely on jScrollPane
    wp_enqueue_scripts('mwheelintent',  $dir . '/mwheelIntent.js',              array('jscrollpane'));
}

PS. Don't forget that PHP code always starts with <?php

Answer 2

在加载category- {slug} .php之前先加载wp-blog-header.php吗？