Title: Adding JS to child theme
Last modified: August 30, 2016

---

# Adding JS to child theme

 *  [JakeCr8Guru](https://wordpress.org/support/users/jakecr8guru/)
 * (@jakecr8guru)
 * [10 years, 6 months ago](https://wordpress.org/support/topic/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](http://www.jakecreative.guru/)
 * I am using this theme: [Responsive Mobile](https://wordpress.org/themes/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)

1 [2](https://wordpress.org/support/topic/adding-js-to-child-theme/page/2/?output_format=md)
[→](https://wordpress.org/support/topic/adding-js-to-child-theme/page/2/?output_format=md)

 *  [WEN Solutions](https://wordpress.org/support/users/wen-solutions/)
 * (@wen-solutions)
 * [10 years, 6 months ago](https://wordpress.org/support/topic/adding-js-to-child-theme/#post-6721832)
 * Making separate for file for js & enqueuing them in functions would always be
   better approach. Try it.
    Thanks!
 *  Thread Starter [JakeCr8Guru](https://wordpress.org/support/users/jakecr8guru/)
 * (@jakecr8guru)
 * [10 years, 6 months ago](https://wordpress.org/support/topic/adding-js-to-child-theme/#post-6721922)
 * 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.
 *  [WEN Solutions](https://wordpress.org/support/users/wen-solutions/)
 * (@wen-solutions)
 * [10 years, 6 months ago](https://wordpress.org/support/topic/adding-js-to-child-theme/#post-6721944)
 * 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](https://codex.wordpress.org/Function_Reference/wp_enqueue_script).
   
   Thanks
 *  Thread Starter [JakeCr8Guru](https://wordpress.org/support/users/jakecr8guru/)
 * (@jakecr8guru)
 * [10 years, 6 months ago](https://wordpress.org/support/topic/adding-js-to-child-theme/#post-6721995)
 * 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.
 *  [ikaring](https://wordpress.org/support/users/ikaring/)
 * (@ikaring)
 * [10 years, 6 months ago](https://wordpress.org/support/topic/adding-js-to-child-theme/#post-6722019)
 * 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](https://wordpress.org/support/users/jakecr8guru/)
 * (@jakecr8guru)
 * [10 years, 6 months ago](https://wordpress.org/support/topic/adding-js-to-child-theme/#post-6722027)
 * 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.
 *  [ikaring](https://wordpress.org/support/users/ikaring/)
 * (@ikaring)
 * [10 years, 6 months ago](https://wordpress.org/support/topic/adding-js-to-child-theme/#post-6722032)
 * 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](https://wordpress.org/support/users/jakecr8guru/)
 * (@jakecr8guru)
 * [10 years, 6 months ago](https://wordpress.org/support/topic/adding-js-to-child-theme/#post-6722034)
 * 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?
 *  [ikaring](https://wordpress.org/support/users/ikaring/)
 * (@ikaring)
 * [10 years, 6 months ago](https://wordpress.org/support/topic/adding-js-to-child-theme/#post-6722036)
 * 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="http://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](https://wordpress.org/support/users/jakecr8guru/)
 * (@jakecr8guru)
 * [10 years, 6 months ago](https://wordpress.org/support/topic/adding-js-to-child-theme/#post-6722037)
 * Awesome! perfect.
 * Seems to be working good. Thanks for all your help.
 *  [ikaring](https://wordpress.org/support/users/ikaring/)
 * (@ikaring)
 * [10 years, 6 months ago](https://wordpress.org/support/topic/adding-js-to-child-theme/#post-6722038)
 * 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](https://wordpress.org/support/users/jakecr8guru/)
 * (@jakecr8guru)
 * [10 years, 6 months ago](https://wordpress.org/support/topic/adding-js-to-child-theme/#post-6722040)
 * 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](https://wordpress.org/support/users/jakecr8guru/)
 * (@jakecr8guru)
 * [10 years, 6 months ago](https://wordpress.org/support/topic/adding-js-to-child-theme/#post-6722041)
 * 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.
 *  [ikaring](https://wordpress.org/support/users/ikaring/)
 * (@ikaring)
 * [10 years, 6 months ago](https://wordpress.org/support/topic/adding-js-to-child-theme/#post-6722046)
 * 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](https://wordpress.org/support/users/jakecr8guru/)
 * (@jakecr8guru)
 * [10 years, 6 months ago](https://wordpress.org/support/topic/adding-js-to-child-theme/#post-6722055)
 * I cant get the error to go away. Any other suggestions?

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

1 [2](https://wordpress.org/support/topic/adding-js-to-child-theme/page/2/?output_format=md)
[→](https://wordpress.org/support/topic/adding-js-to-child-theme/page/2/?output_format=md)

The topic ‘Adding JS to child theme’ is closed to new replies.

## Tags

 * [child theme](https://wordpress.org/support/topic-tag/child-theme/)
 * [jquery](https://wordpress.org/support/topic-tag/jquery/)
 * [type error](https://wordpress.org/support/topic-tag/type-error/)

 * In: [Hacks](https://wordpress.org/support/forum/plugins-and-hacks/hacks/)
 * 21 replies
 * 3 participants
 * Last reply from: [ikaring](https://wordpress.org/support/users/ikaring/)
 * Last activity: [10 years, 6 months ago](https://wordpress.org/support/topic/adding-js-to-child-theme/page/2/#post-6722074)
 * Status: not resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics