Unable to run JS file in custom theme

  • Resolved ourcore

    (@ourcore)


    8 years, 9 months ago

    Hey, everyone!

    I’m in the process of converting a Bootstrap template into my first WordPress theme, and I’ve got all of my stylesheets and scripts referenced in functions.php, and a few initialization codes in footer.php, but there’s one particular file that’s not executing correctly: https://blackrockdigital.github.io/startbootstrap-creative/js/creative.js.

    Script:

    (function($) {
    "use strict"; // Start of use strict

    // jQuery for page scrolling feature - requires jQuery Easing plugin
    $('a.page-scroll').bind('click', function(event) {
        var $anchor = $(this);
        $('html, body').stop().animate({
            scrollTop: ($($anchor.attr('href')).offset().top - 50)
        }, 1250, 'easeInOutExpo');
        event.preventDefault();
    });

    // Highlight the top nav as scrolling occurs
    $('body').scrollspy({
        target: '.navbar-fixed-top',
        offset: 51
    })

    // Closes the Responsive Menu on Menu Item Click
    $('.navbar-collapse ul li a:not(.dropdown-toggle)').click(function() {
        $('.navbar-toggle:visible').click();
    });

    // Fit Text Plugin for Main Header
    $("h1").fitText(
        1.2, {
            minFontSize: '35px',
            maxFontSize: '65px'
        }
    );

    // Offset for Main Navigation
    $('#mainNav').affix({
        offset: {
            top: 100
        }
    })

    // Initialize WOW.js Scrolling Animations
    new WOW().init();

})(jQuery); // End of use strict

    I’ve set this particular file to use jQuery and to be called before the tag via functions.php, but none of the scripts inside are executing and Chrome is returning this error (sometimes, it mentions fittext, but the entire creative.js script is not running):
    Uncaught TypeError: $(...).scrollspy is not a function

    I’ve tried replacing the $ alias with jQuery, but it had no effect. I’ve also confirmed this is getting called after the jQuery library.

    Any help would be really appreciated. Thanks!

Viewing 15 replies - 1 through 15 (of 15 total)

  • Hi ourcore,

    I know you said that you’ve confirmed that this file is being called after jQuery, how have you confirmed this? You can make 100% sure that they’re being called in the right order by adding jQuery as a dependency when enquiring the script in your functions.php

    Also, I’m pretty sure that .scrollspy() is a Bootstrap function, have you included all of the relevant Bootstrap files as well?

    Cheers,

    Thread Starter ourcore

    (@ourcore)

    Hi, Dominic,

    I’ve confirmed by reviewing my executed page source and jQuery 1.11.3 and Bootstrap 3.3.6 are being called in the header, while creative.js is in the footer.

    I’ve also ensured to add jQuery as a dependancy:
    wp_enqueue_script ( ‘creative’, get_template_directory_uri() . ‘/js/creative.js’, array(‘jquery’), ”, true );

    The only difference from when I was running the site outside of WordPress is that I was using local copies of jQuery and Bootstrap. Really not sure what could be causing the issue.

    Thanks.

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    What’s in your browser’s console log? What is it supposed to be doing and how do you know that it’s not running? Is it running at all and just not getting to a certain section of code? Which theme are you using?

    Thread Starter ourcore

    (@ourcore)

    Hi, Andrew.

    I included the Uncaught TypeError from the Chrome console. This is the only error as all other files are running correctly.

    The file in question is a collection of small scripts that do a few things, including stylizing <h1> using the FitText plugin, stylizing the navbar after scrolling, and initializing WOW.js, and none of these effects are being applied, so I believe the entire creative.js file is not running.

    I started with a Bootstrap template and converted it to a WordPress theme from scratch.

    Thanks.

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    That error says that the scrollspy library is not being loaded in before the script is running

    Thread Starter ourcore

    (@ourcore)

    That’s how I’m interpreting the error too, but I don’t understand why it’s not being loaded. I’m calling Bootstrap in the header, and from what I can see, it includes Scrollspy: https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js?ver=4.4.2.

    I’m separately calling WOW.js, but still none of creative.js is running.

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    You said you did this:

    wp_enqueue_script ( 'creative', get_template_directory_uri() . '/js/creative.js', array('jquery'), '', true );

    Which says the creative.js file should rely on jquery, but you should be doing something like this:

    wp_enqueue_script ( 'bootstrap', get_template_directory_uri() . '/js/bootstrap.js', array('jquery'), '', true );
wp_enqueue_script ( 'creative', get_template_directory_uri() . '/js/creative.js', array('bootstrap'), '', true );

    Thread Starter ourcore

    (@ourcore)

    I see what you mean. I hadn’t thought about the Bootstrap dependency. Unfortunately, I’m still getting the same error.

    Here’s my functions.php:

    <?php

function mparra_styles() {
	wp_enqueue_style ( 'bootstrap', get_template_directory_uri() . '/css/bootstrap.min.css') ;
	wp_enqueue_style ( 'font-awesome', get_template_directory_uri() . '/fonts/font-awesome/css/font-awesome.min.css' );
	wp_enqueue_style ( 'creative', get_template_directory_uri() . '/css/creative.css' );
	wp_enqueue_style ( 'style', get_template_directory_uri() . '/style.css' );
	wp_enqueue_style ( 'mobile', get_template_directory_uri() . '/css/mobile.css' );
	wp_enqueue_style ( 'magnific-popup', get_template_directory_uri() . '/css/magnific-popup.css' );
	wp_enqueue_style ( 'animate', get_template_directory_uri() . '/css/animate.min.css' );
}
add_action( 'wp_enqueue_scripts', 'mparra_styles' );

function mparra_scripts() {
	wp_enqueue_script ( 'civem', '//cloud.github.com/downloads/javanto/civem.js/civem-0.0.7.min.js' );
	wp_enqueue_script ( 'websim', get_template_directory_uri() . '/js-webshim/minified/polyfiller.js' );
	wp_enqueue_script ( 'recaptcha', '//google.com/recaptcha/api.js' );
	wp_enqueue_script ( 'bootstrap', get_template_directory_uri() . '/js/bootstrap.min.js', array('jquery'), '', true );
	wp_enqueue_script ( 'creative', get_template_directory_uri() . '/js/creative.js', array('bootstrap'), '', true );
	wp_enqueue_script ( 'jquery-easing', get_template_directory_uri() . '/js/jquery.easing.min.js', array('jquery'), '', true );
	wp_enqueue_script ( 'jquery-fittext', get_template_directory_uri() . '/js/jquery.fittext.js', array('jquery'), '', true );
	wp_enqueue_script ( 'wow', get_template_directory_uri() . '/js/wow.min.js' );
	wp_enqueue_script ( 'magnific-popup', get_template_directory_uri() . '/js/jquery.magnific-popup.min.js', array('jquery'), '', true );
}
add_action( 'wp_enqueue_scripts', 'mparra_scripts' );

remove_filter( 'the_content', 'wpautop' );

?>

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    That looks correct. Can you link your site so that we can explore this?

    You can test whether things are available after the website has been loaded by putting library calls into the Console, e.g.: $.scrollspy . Putting it in *after* the site has loaded will exclude any loading issues. If it’s defined then it has loaded eventually, which is a good result.

    Thread Starter ourcore

    (@ourcore)

    I’ll keep that in mind. I’m only running it locally at the moment, but I’ll upload it to my server tonight to troubleshoot further.

    In the meantime, this is the template version: https://www.marioparra.me. Thanks.

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Weird, when I run $.scrollspy on your template site, it says the same error

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Oh sorry, you need to run this:

    $('foo').scrollspy

    (foo being any element)

    When I run that on your template site, the function does in fact exist.

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    If you view source your wordpress website, do you see this order of files (top to bottom):

    <script src="js/bootstrap.min.js"></script>
<script src="js/jquery.easing.min.js"></script>
<script src="js/jquery.fittext.js"></script>
<script src="js/wow.min.js"></script>
<script src="js/jquery.magnific-popup.min.js"></script>
<script src="js/creative.js"></script>

    ?

    Thread Starter ourcore

    (@ourcore)

    You did it! I was calling creative.js directly after Bootstrap, instead of at the bottom. I re-ordered the files in my functions.php and now everything’s working!

    Wow, I’ll never overlook the order that I call my scripts in ever again. Thanks, Andrew.

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    That’s great to hear ??

Viewing 15 replies - 1 through 15 (of 15 total)
  • The topic ‘Unable to run JS file in custom theme’ is closed to new replies.