Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

I feel like I am definitely missing something simple here... but for the life of me, can't find what I'm missing.

I am of the "bad habit" of including jQuery functions directly in the header.php file (among other spots). This is frowned upon, as I understand, and functions should be kept in a separate file using the wp_enqueue function to load them (if I get that correctly).

I have this simple function in my header.php that should fire on document ready:

<script>
    // Scroll to Top
    jQuery(document).ready(function () {
        // Force element to hidden state when page loads
        jQuery('.scroll-to-top').hide();

        // Check to see if the window is top if not then display button
        jQuery(window).scroll(function () {
            if (jQuery(this).scrollTop() > 200) {
                jQuery('.scroll-to-top').fadeIn();
            } else {
                jQuery('.scroll-to-top').fadeOut();
            }
        });
        //Click event to scroll to top
        jQuery('.scroll-to-top').click(function () {
            jQuery('html, body').animate({ scrollTop: 0 }, 800);
            return false;
        });
    });
</script>

So to do things "correctly", I take my code out and placed it in myScripts.js (removing script tags of course). I've created a functions.php file specific to my theme, and I've added this code:

<?php
    function add_my_script() {
        wp_enqueue_script(
            'myScripts', // name your script so that you can attach other scripts and de-register, etc.
            get_template_directory_uri() . '/js/myScripts.js', // this is the location of your script file
            array('jquery') // this array lists the scripts upon which your script depends
        );
    }

    add_action( 'wp_enqueue_scripts', 'add_my_script' );
?>

But when I load my page, the script doesn't work anymore. It's been working fine the "wrong" way for months now, but I'd really like to get it working as it should before I keep adding other scripts to the site. Any thoughts on what I'm missing here? Do I need another line / call somewhere to activate the script?

share|improve this question
    
are you using a child theme? –  Milo Oct 11 '13 at 17:34
    
The code looks right, have you verified the myScripts.js is loaded in the browser? –  Waldermort Oct 11 '13 at 17:35
    
@Milo I am using a child theme. The functions.php is included in the child theme folder, as is the js file. –  Charlie74 Oct 11 '13 at 17:35
1  
Change get_template_directory_uri to get_bloginfo('stylesheet_directory') –  Waldermort Oct 11 '13 at 17:37
    
@Waldermort I'd wondered how to tell if it's loaded.. when I view the page source, I don't see myScripts.js loaded, but then I also don't see the functions.php, so I'm guessing I wouldn't be able to see it that way? –  Charlie74 Oct 11 '13 at 17:42

2 Answers 2

When using a child theme, get_template_directory_uri() returns the URI of the parent theme, you want to swap that for get_stylesheet_directory_uri(), which will load assets from your child theme directory.

share|improve this answer
    
Hmmm that's a good tip to know! I made the change... still no luck getting the code to work though. I've got to be missing something silly... :( –  Charlie74 Oct 11 '13 at 17:41
    
perhaps a silly question, but is your file in a directory named js? –  Milo Oct 11 '13 at 18:15
    
@Milo It appears his <script> tags are not being added to his page. –  Waldermort Oct 11 '13 at 18:17
    
Yes, I double checked file locations and such. Everything seems right. Oh well... need to take a break, thanks for the help so far you guys. I will check back in later... why is doing this RIGHT so hard, and doing things wrong so EASY??? Haha... –  Charlie74 Oct 11 '13 at 18:26

If the <script> tags are not on the page with a full path to the .js file, it could be that somewhere in your theme there is a call to remove_all_actions('wp_enqueue_scripts'). If this is the case you can try adding the tags manually

function add_my_script() {
    echo "<script type='text/javascript' src='" . get_stylesheet_directory_uri() . "/js/myScripts.js'></script>";
}    
add_action( 'wp_head', 'add_my_script', 20 );

Note the 20 is to give it a very low priority as you want WP to add it's jquery script tags before your own.

share|improve this answer
    
Unfortunately, even forcing this in there still did not work. While the <script> tag did finally show up in the source code, the actual code was still not working. I'm not sure why it won't work when it's not included directly in the header.php file, but I've decided to just keep going with what I was doing before. I've, unfortunately, spent way too much time trying to "fix" something that was never really broken. Thanks again for the help. –  Charlie74 Oct 12 '13 at 15:15

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.