Adding JS to child theme

  • Hey everyone.

    I have been searching the internet trying to find a solution but have not yet.

    I will try to provide as much information with out being confusing.

    Here is my website I am trying to make changes to:JakeCreative.Guru

    I am using this theme: Responsive Mobile

    What I am trying to achieve is to have the main navigation to be sticky and ease to certain section of the page. I am try to use some jQuery plugins or code (files are in my child theme directory).

    I am having the JS files called but I am getting errors.
    Uncaught TypeError: $ is not a function
    Uncaught TypeError: jQuery(…).sticky is not a function

    I think it has to do with having jQuery called more than once. If so I have not found how to solve that issue. If you know how that would be great information.

    Here is the code I am using. It is placed in my child theme’s footer.php file:

    ...
<!-- Script for sticky.js -->
<script>
	jQuery(document).ready(function(){
	  jQuery("#main-menu-container").sticky({topSpacing:0});
	});
</script>

<!-- Script for scrollNav.js -->
<script>
	jQuery(document).ready(function(){
		jQuery('.main-nav li a').addClass('page-scroll');
	});
</script>

<!-- Scrolling Scripts for Fixed Nav -->
	<script src="<?php echo get_stylesheet_directory_uri(); ?>/js/jquery.easing.min.js"></script>
	<script src="<?php echo get_stylesheet_directory_uri(); ?>/js/scrolling-nav.js"></script>
	<script src="<?php echo get_stylesheet_directory_uri(); ?>/js/jquery.sticky.js"></script>

</body>
</html>

    Thanks for the help!

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

  • Making separate for file for js & enqueuing them in functions would always be better approach. Try it.
    Thanks!

    Thread Starter JakeCr8Guru

    (@jakecr8guru)

    I don’t think enqueuing is the problem.

    I have done that before and still got the errors. I understand that is a better practice but I am still getting the js called so that shouldn’t be the problem.

    The above issue may arise because dependencies is not use while enqueue scripts. Try adding ‘jquery’ inside ‘array(‘jquery’)’ in the place of enqueue scripts.
    Thanks

    Thread Starter JakeCr8Guru

    (@jakecr8guru)

    I tried that and this is what I got:

    <?php

function my_scripts_method() {
	wp_enqueue_script( 'sticky-menu', get_stylesheet_directory_uri() . '/js/jquery.sticky.js', array( 'jquery' ), true );
}

add_action( 'wp_enqueue_scripts', 'my_scripts_method' );

?>

<?php

function my_scripts_method() {
	wp_enqueue_script( 'scrolling-menu', get_stylesheet_directory_uri() . '/js/scrolling-nav.js', array( 'jquery' ), true );
}

add_action( 'wp_enqueue_scripts', 'my_scripts_method' );

?>

<?php

function my_scripts_method() {
	wp_enqueue_script( 'easinging-menu', get_stylesheet_directory_uri() . '/js/jquery.easing.min.js', array( 'jquery' ), true);
}

add_action( 'wp_enqueue_scripts', 'my_scripts_method' );

?>

<!-- Script for sticky.js -->
<script>
	jQuery(document).ready(function(){
	  jQuery("#main-menu-container").sticky({topSpacing:20});
	});
</script>

<!-- Script for scrollNav.js -->
<script>
	jQuery(document).ready(function(){
		jQuery('.main-nav li a').addClass('page-scroll');
	});
</script>

    I know it is not correct but I need to know what to do for this specific thing. I have three plugins. I think two for sure use jQuery.

    You have three functions with same name.
    How about putting them in one function:

    function my_scripts_method() {
	wp_enqueue_script( 'sticky-menu', get_stylesheet_directory_uri() . '/js/jquery.sticky.js', array( 'jquery' ), true );
	wp_enqueue_script( 'scrolling-menu', get_stylesheet_directory_uri() . '/js/scrolling-nav.js', array( 'jquery' ), true );
	wp_enqueue_script( 'easinging-menu', get_stylesheet_directory_uri() . '/js/jquery.easing.min.js', array( 'jquery' ), true);
}

add_action( 'wp_enqueue_scripts', 'my_scripts_method' );

    Note that above function should be in functions.php of child theme.

    Thread Starter JakeCr8Guru

    (@jakecr8guru)

    Thanks ikaring.

    That makes more sense. I am still getting those errors.

    Uncaught TypeError: $ is not a function
    Uncaught TypeError: jQuery(…).sticky is not a function

    I have in my function.php file:

    <?php
function my_scripts_method() {
	wp_enqueue_script( 'sticky-menu', get_stylesheet_directory_uri() . '/js/jquery.sticky.js', array( 'jquery' ), true );
	wp_enqueue_script( 'scrolling-menu', get_stylesheet_directory_uri() . '/js/scrolling-nav.js', array( 'jquery' ), true );
	wp_enqueue_script( 'easinging-menu', get_stylesheet_directory_uri() . '/js/jquery.easing.min.js', array( 'jquery' ), true);
}

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

    then in my footer.php:

    <!-- Script for sticky.js -->
<script>
	jQuery(document).ready(function(){
	  jQuery("#main-menu-container").sticky({topSpacing:0});
	});
</script>

<!-- Script for scrollNav.js -->
<script>
	jQuery(document).ready(function(){
		jQuery('.main-nav li a').addClass('page-scroll');
	});
</script>

</body>
</html>

    Everything is up to date and my server should be fine. Has no one else ever tired to do this before? Could the theme be the problem? These are just things I am wondering.

    Hi JakeCr8Guru.
    It seems <?php wp_footer(); ?>` is not set before your footer scripts.
    wp_footer() handles enqueued scripts for footer area, and it is usually set right before closing body tag.

    However, you need those plugin js before your inline footer scripts, so put <?php wp_footer(); ?> before script tags.

    Thread Starter JakeCr8Guru

    (@jakecr8guru)

    In my footer.php file it does have the <?php wp_footer(); ?> i just didn’t copy that.

    Unless you mean I need some thing in my functions.php. I tired that and I am pretty sure that is not right.

    Do I need the code for the script to be in my functions also or is the footer the right place?

    It is OK to place script in footer.php.
    But it seems <!-- Scrolling Scripts for Fixed Nav --> is located after your footer script tags. That is the problem. It must be loaded beforehand.

    <!-- Scrolling Scripts for Fixed Nav -->
	<script type="text/javascript" src="https://www.jakecreative.guru/wp-content/cache/minify/000000/nc5LDoAgDEXRDVlhS4gvWOSjLZi4ezVxBUzv4ORaI9CjFuULlOvCCRTdDvIC174YunTyG6eV2oYME9XEs0PuGU65hDlzmeyQo15qSq9BxV2Dxv-ijf1-Pw.js"></script>

    It would be better to turn off W3 Total Cache plugin for checking bugs.

    Thread Starter JakeCr8Guru

    (@jakecr8guru)

    Awesome! perfect.

    Seems to be working good. Thanks for all your help.

    You are welcome.

    There is an error remains on scrolling-nav.js.

    Just wrap whole code inside the following:

    (function($){
//paste original code here
})(jQuery);

    This should fix it.

    Thread Starter JakeCr8Guru

    (@jakecr8guru)

    I see what you mean.

    I added that to my code but it does not fix the issue.

    <!-- Script for scrollNav.js -->
<script>
	(function($){
		jQuery(document).ready(function($){
			$('.main-nav .menu li a').addClass('page-scroll');
		});
	})(jQuery);
</script>

    And I have the menu items jumping to where they need to but the easing script is not working.

    I have tried switching $ and jquery back and forth but no success.

    Thread Starter JakeCr8Guru

    (@jakecr8guru)

    I also added that to the scrolling-nav.js

    (function($) {
//jQuery to collapse the navbar on scroll
    $(window).scroll(function() {
        if ($(".navbar").offset().top > 50) {
            $(".navbar-fixed-top").addClass("top-nav-collapse");
        } else {
            $(".navbar-fixed-top").removeClass("top-nav-collapse");
        }
    });

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

    still have error.

    It is ok to leave inline script as below:

    <!-- Script for scrollNav.js -->
<script>
	jQuery(document).ready(function(){
		jQuery('.main-nav li a').addClass('page-scroll');
	});
</script>

    scrolling-nav.js needs the above wrapping code.
    Or you can just replace $ with jQuery in scrolling-nav.js, too.

    Thread Starter JakeCr8Guru

    (@jakecr8guru)

    I cant get the error to go away. Any other suggestions?

Viewing 15 replies - 1 through 15 (of 21 total)
  • The topic ‘Adding JS to child theme’ is closed to new replies.