0

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 Apr 13 '16 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 Apr 13 '16 at 13:06
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.

  • 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 Apr 13 '16 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 Apr 14 '16 at 11:46

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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