Why isn't my custom Javascript showing up in my custom template?

Question

I'm in the process of converting an HTML homepage to WordPress format and I'm not sure what to do with the Javascript that's included within the of the index.html homepage (as opposed to the JS located in separate files). To see what I'm talking about, view the source of http://tstand.com - the script starts at line 89 and ends at line 239.

My instinct was to move this script to a separate Javascript file (I named it menuscroll.js) and then enqueue it via functions.php as I did with all other style sheets and Javascript files associated with that page, as seen below.

function wpse_enqueue_page_template_styles() {
      if ( is_page_template( 'page-2820.php' ) ) {
          wp_enqueue_style( 'main', get_template_directory_uri() .   '/assets/css/main.css' );
          wp_enqueue_style( 'animate', get_template_directory_uri() . '/assets/css/animate.css' );
          wp_enqueue_style( 'animate-min', get_template_directory_uri() . '/assets/animate.min.css' );
          wp_enqueue_style( 'component', get_template_directory_uri() . '/assets/css/component.css' );
    }
 }

add_action( 'wp_enqueue_scripts', 'wpse_enqueue_page_template_styles' );

add_action('wp_enqueue_scripts','Load_Template_Scripts_wpa83855');
   function Load_Template_Scripts_wpa83855(){
       if ( is_page_template('page-2820.php') ) {
        wp_enqueue_script( 'default', '//use.edgefonts.net/source-sans-pro:i6,n6,n4,i4,i3,n3,n7,i7:default.js');
        wp_register_script( 'menuscroll', get_template_directory_uri() . '/assets/js/menuscroll.js');
        wp_enqueue_script( 'menuscroll.js', get_template_directory_uri() . '/assets/js/menuscroll.js');

   } 
}

The custom template I've created is page-2820.php. A resource online led me to believe that I should register it before enqueueing it, however still no success. All other CSS/JS files seem to be working properly.

Here are the contents of menuscroll.js

    // JS for showing features titles
$(function(){
    $("#i1").hover(function(){
        $('#desc-i1').fadeIn();
    }, function() { 
        $('#desc-i1').fadeOut(100); 
    });
    $("#i2").hover(function(){
        $('#desc-i2').fadeIn();
    }, function() { 
        $('#desc-i2').fadeOut(100); 
    });
    $("#i3").hover(function(){
        $('#desc-i3').fadeIn();
    }, function() { 
        $('#desc-i3').fadeOut(100); 
    });
    $("#i4").hover(function(){
        $('#desc-i4').fadeIn();
    }, function() { 
        $('#desc-i4').fadeOut(100); 
    });
    $("#i5").hover(function(){
        $('#desc-i5').fadeIn();
    }, function() { 
        $('#desc-i5').fadeOut(100); 
    });
    $("#i6").hover(function(){
        $('#desc-i6').fadeIn();
    }, function() { 
        $('#desc-i6').fadeOut(100); 
    });
    $("#i7").hover(function(){
        $('#desc-i7').fadeIn();
    }, function() { 
        $('#desc-i7').fadeOut(100); 
    });
});

var isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent) ? true : false;

jQuery(document).ready(function($){
if(!isMobile) {
    $(window).scroll(function(){
        if ($(this).scrollTop() < $('#s4').offset().top-50) {
            $('#features-area').removeClass('fadeIn')
            $('#features-area').addClass('fadeOut')
        }
        if ($(this).scrollTop() >= $('#s4').offset().top-50) {
            $('#features-area').addClass('fadeIn')
            $('#features-area').removeClass('fadeOut')
        }
<!--#s3 text fade in fade/ out -->
        if ($(this).scrollTop() < $('#s3').offset().top-350) {
            $('#s3-left').removeClass('fadeInLeft')
            $('#s3-left').addClass('fadeOutLeft')
        }
        if ($(this).scrollTop() >= $('#s3').offset().top-350) {
            $('#s3-left').addClass('fadeInLeft')
            $('#s3-left').removeClass('fadeOutLeft')
        }
    });
}
});

I would strongly appreciate it if someone could point out what I'm doing wrong here.

Thanks a lot! :)

EDIT: Removed Jquery and Jquery-ui from enqueue script, added contents of menuscroll.js

A couple of things: 1. Why are you calling your own version of jquery-ui, jquery, and jquery-min? WordPress comes loaded with jquery-ui and jquery already. Also, why load min and the full libraries? 2. When you navigate to that page and view source, do you see "page-template-page-page-2820-php"? If not, the template file you created isn't being called, so is_page_template('page-2820.php') won't fire. — darrinb
– darrinb, Commented Apr 13, 2016 at 0:52
Thanks for your answer, I've never dealt with WordPress's backend much so I assumed the Jquery + Jquery-ui files were specific to the homepage template. I've removed them. Any idea what I'd doing wrong with the custom Javascript file I made (menuscroll.js)? — Angela Martinez
– Angela Martinez, Commented Apr 13, 2016 at 13:06

Caspar · Accepted Answer · 2016-04-13 17:00:03Z

0

You can either register the script and then enqueue it (which is how you're doing it above), or you can simply enqueue it all in one go. Either way, if your script requires jQuery, you should designate it as a dependency with your registration, so WordPress will know to load it automatically for you.

So, either:

wp_register_script( 'menuscroll', get_template_directory_uri() . '/assets/js/menuscroll.js', array( 'jquery' ), false, true );
wp_enqueue_script( 'menuscroll' );

(Note that the 'handle' argument for the register and enqueue functions must match. The array tells WordPress you need jquery; false says, no special script version, and true says, load it at the bottom of the page.)

Or all in one go, like this:

wp_enqueue_script( 'menuscroll', get_template_directory_uri() . '/assets/js/menuscroll.js', array( 'jquery' ), false, true );

Ought to do the trick.

answered Apr 13, 2016 at 17:00

Caspar

9607 silver badges16 bronze badges

Thanks Caspar, I tried that but it still doesn't seem to take any effect. I will edit my question to include the contents of my custom menuscroll.js - in case there is something wrong in there.

Angela Martinez
– Angela Martinez

2016-04-13 21:00:51 +00:00
Commented Apr 13, 2016 at 21:00
2 things: (1) Can you confirm that the script is loading by inspecting the page? And, are there any errors showing up in the browser console? (2) Try changing out all those $s in the first part of the script with jQuery. (probably not necessary for the part inside the second function.)

Caspar
– Caspar

2016-04-14 11:46:31 +00:00
Commented Apr 14, 2016 at 11:46

Add a comment |

Stack Exchange Network

Why isn't my custom Javascript showing up in my custom template?

1 Answer 1

Your Answer

Hot Network Questions

Why isn't my custom Javascript showing up in my custom template?

1 Answer 1

Your Answer

Sign up or log in

Post as a guest

Related

Hot Network Questions