Title: Theme not loading jquery file
Last modified: January 18, 2022

---

# Theme not loading jquery file

 *  [shaibustephen](https://wordpress.org/support/users/shaibustephen/)
 * (@shaibustephen)
 * [4 years, 5 months ago](https://wordpress.org/support/topic/theme-not-loading-jquery-file/)
 * I am trying to convert the html responsive navigation menu i got somewhere to
   use same in my wordpress theme which i am developing from scratch. I have done
   everything but the theme it is no loading my js.
 * This is how i enqueue it.
 *     ```
       /**
        * Enqueue scripts and styles.
        */
       function koo_scripts() {
       	/**
       	 * Style
       	 */
       	wp_enqueue_style( 'ebson-store-bootstrap', get_template_directory_uri() . '/assets/css/bootstrap.min.css' );
   
       	wp_enqueue_style( 'ebson-store-fontawesome', get_template_directory_uri() . '/assets/css/font-awesome.css' );
       	wp_enqueue_style( 'ebson-store-google-font', 'https://fonts.googleapis.com/css?family=Open+Sans:300,400,400i,600,700,800|Poppins:300,400,400i,500,600,700,800,900&display=swap', false );
   
   
       	wp_enqueue_style( 'ebs-store-style', get_stylesheet_uri());
       	wp_style_add_data( 'ebs-store-style', 'rtl', 'replace' );
   
   
       		/**
       	 * Scripts.
       	 */
       	wp_enqueue_script( 'jquery');
       	 wp_enqueue_script('ebson-store-bootstrap-bundle-minjs', get_template_directory_uri() . '/assets/js/bootstrap.bundle.min.js', array( 'jquery' ),'',true); 
       	wp_enqueue_script( 'ebson-store-jquery-2.1.3js', 'https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js', array( 'jquery' ),'1.0.5',true); 
       	wp_enqueue_script( 'ebson-store-jqueryjs', get_template_directory_uri() . '/js/vendor/jquery-1.12.0.min.js', array( 'jquery' ),'',true); 
       	wp_enqueue_script( 'ebson-store-modernizrjs', get_template_directory_uri() . '/js/vendor/modernizr-2.8.3.min.js', array( 'jquery' ),'',true); 
       	wp_enqueue_script( 'ebson-store-mainjs', get_template_directory_uri() . '/assets/js/main.js', array( 'jquery' ),'',true); 
       	wp_enqueue_script( 'ebson-store-megamenujs', get_template_directory_uri() . '/assets/js/megamenu.js', array( 'jquery' ),'',true); 
   
   
       	if ( is_singular() && comments_open() && get_option( 'thread_comments' ) ) {
       		wp_enqueue_script( 'comment-reply' );
       	}
       }
       add_action( 'wp_enqueue_scripts', 'koo_scripts' );
   
       function koo_javascript() {
         ?>
           <script>
               window.Modernizr || document.write('<script src="js/vendor/modernizr-2.8.3.min.js"><\/script>')
           </script>
   
         <?php
       }
   
       add_action( 'wp_footer', 'koo_javascript' );
       ```
   
 * This is my jquery
 *     ```
       /*global jQuery */
       jQuery(document).ready(function () {
   
           "use strict";
   
           jQuery('ul.menu  > li:has( > ul)').addClass('menu-dropdown-icon');
           //Checks if li has sub (ul) and adds class for toggle icon - just an UI
   
           jQuery('ul.menu  > li > ul:not(:has(ul))').addClass('normal-sub');
           //Checks if drodown menu's li elements have anothere level (ul), if not the dropdown is shown as regular dropdown, not a mega menu (thanks Luka Kladaric)
   
           jQuery("ul.menu ").before("<a href=\"#\" class=\"menu-mobile\">Navigation</a>");
   
           //Adds menu-mobile class (for mobile toggle menu) before the normal menu
           //Mobile menu is hidden if width is more then 959px, but normal menu is displayed
           //Normal menu is hidden if width is below 959px, and jquery adds mobile menu
           //Done this way so it can be used with wordpress without any trouble
   
           jQuery("ul.menu  > li").hover(
               function (e) {
                   if (jQuery(window).width() > 943) {
                       jQuery(this).children("ul").fadeIn(150);
                       e.preventDefault();
                   }
               }, function (e) {
                   if (jQuery(window).width() > 943) {
                       jQuery(this).children("ul").fadeOut(150);
                       e.preventDefault();
                   }
               }
           );
           //If width is more than 943px dropdowns are displayed on hover
   
           //the following hides the menu when a click is registered outside
           jQuery(document).on('click', function(e){
               if(jQuery(e.target).parents('.menu').length === 0)
                   jQuery("ul.menu ").removeClass('show-on-mobile');
           });
   
           jQuery("ul.menu  > li").click(function() {
               //no more overlapping menus
               //hides other children menus when a list item with children menus is clicked
               var thisMenu = jQuery(this).children("ul");
               var prevState = thisMenu.css('display');
               jQuery("ul.menu  > li > ul").fadeOut();
               if (jQuery(window).width() < 943) {
                   if(prevState !== 'block')
                       thisMenu.fadeIn(150);
               }
           });
           //If width is less or equal to 943px dropdowns are displayed on click (thanks Aman Jain from stackoverflow)
   
           jQuery(".menu-mobile").click(function (e) {
               jQuery("ul.menu ").toggleClass('show-on-mobile');
               e.preventDefault();
           });
           //when clicked on mobile-menu, normal menu is shown as a list, classic rwd menu story (thanks mwl from stackoverflow)
   
       });
       ```
   
 * This is the original jquery
 *     ```
       /*global $ */
       $(document).ready(function () {
   
           "use strict";
   
           $('.menu > ul > li:has( > ul)').addClass('menu-dropdown-icon');
           //Checks if li has sub (ul) and adds class for toggle icon - just an UI
   
           $('.menu > ul > li > ul:not(:has(ul))').addClass('normal-sub');
           //Checks if drodown menu's li elements have anothere level (ul), if not the dropdown is shown as regular dropdown, not a mega menu (thanks Luka Kladaric)
   
           $(".menu > ul").before("<a href=\"#\" class=\"menu-mobile\">Navigation</a>");
   
           //Adds menu-mobile class (for mobile toggle menu) before the normal menu
           //Mobile menu is hidden if width is more then 959px, but normal menu is displayed
           //Normal menu is hidden if width is below 959px, and jquery adds mobile menu
           //Done this way so it can be used with wordpress without any trouble
   
           $(".menu > ul > li").hover(
               function (e) {
                   if ($(window).width() > 943) {
                       $(this).children("ul").fadeIn(150);
                       e.preventDefault();
                   }
               }, function (e) {
                   if ($(window).width() > 943) {
                       $(this).children("ul").fadeOut(150);
                       e.preventDefault();
                   }
               }
           );
           //If width is more than 943px dropdowns are displayed on hover
   
           //the following hides the menu when a click is registered outside
           $(document).on('click', function(e){
               if($(e.target).parents('.menu').length === 0)
                   $(".menu > ul").removeClass('show-on-mobile');
           });
   
           $(".menu > ul > li").click(function() {
               //no more overlapping menus
               //hides other children menus when a list item with children menus is clicked
               var thisMenu = $(this).children("ul");
               var prevState = thisMenu.css('display');
               $(".menu > ul > li > ul").fadeOut();
               if ($(window).width() < 943) {
                   if(prevState !== 'block')
                       thisMenu.fadeIn(150);
               }
           });
           //If width is less or equal to 943px dropdowns are displayed on click (thanks Aman Jain from stackoverflow)
   
           $(".menu-mobile").click(function (e) {
               $(".menu > ul").toggleClass('show-on-mobile');
               e.preventDefault();
           });
           //when clicked on mobile-menu, normal menu is shown as a list, classic rwd menu story (thanks mwl from stackoverflow)
   
       });
       ```
   

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

 *  [Smit Rathod](https://wordpress.org/support/users/smit08/)
 * (@smit08)
 * [4 years, 4 months ago](https://wordpress.org/support/topic/theme-not-loading-jquery-file/#post-15265312)
 * Hi [@shaibustephen](https://wordpress.org/support/users/shaibustephen/)
 * I checked your code. Your code seems right, does your bootstrap script enqueue?
   Or any your script is not loading?
 *  Thread Starter [shaibustephen](https://wordpress.org/support/users/shaibustephen/)
 * (@shaibustephen)
 * [4 years, 4 months ago](https://wordpress.org/support/topic/theme-not-loading-jquery-file/#post-15265637)
 * I mean the jquery i posted it’s code
 *  Thread Starter [shaibustephen](https://wordpress.org/support/users/shaibustephen/)
 * (@shaibustephen)
 * [4 years, 4 months ago](https://wordpress.org/support/topic/theme-not-loading-jquery-file/#post-15265640)
 * The theme mobile menu does not toggle navigation bar or toggle the dropdown too

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

The topic ‘Theme not loading jquery file’ is closed to new replies.

 * In: [Fixing WordPress](https://wordpress.org/support/forum/how-to-and-troubleshooting/)
 * 3 replies
 * 2 participants
 * Last reply from: [shaibustephen](https://wordpress.org/support/users/shaibustephen/)
 * Last activity: [4 years, 4 months ago](https://wordpress.org/support/topic/theme-not-loading-jquery-file/#post-15265640)
 * Status: not resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics