Title: Jquery codes stop working
Last modified: May 24, 2017

---

# Jquery codes stop working

 *  [monaabdelkader](https://wordpress.org/support/users/monaabdelkader/)
 * (@monaabdelkader)
 * [9 years ago](https://wordpress.org/support/topic/jquery-codes-stop-working/)
 * Hi,
 * I’m working on custom wordpress theme (building it from scratch), when I added
   <?php wp_head(); ?> and <?php wp_footer(); ?> to my header and footer php files
   all the jquery scripts in my website stop working, what should I do??

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

 *  [Uros Tasic](https://wordpress.org/support/users/wpaurorautasic/)
 * (@wpaurorautasic)
 * [9 years ago](https://wordpress.org/support/topic/jquery-codes-stop-working/#post-9163478)
 * This is very [good article](https://premium.wpmudev.org/blog/adding-scripts-and-styles-wordpress-enqueueing/)
   about adding scripts in WordPress.
 *  Thread Starter [monaabdelkader](https://wordpress.org/support/users/monaabdelkader/)
 * (@monaabdelkader)
 * [9 years ago](https://wordpress.org/support/topic/jquery-codes-stop-working/#post-9163618)
 * I was writing the codes that stopped working between <script></script> tags directly
   before </body>, Is it wrong to write them in this way??
 *  Moderator [bcworkz](https://wordpress.org/support/users/bcworkz/)
 * (@bcworkz)
 * [9 years ago](https://wordpress.org/support/topic/jquery-codes-stop-working/#post-9165926)
 * For the most part, yes, that is the wrong approach. You can get away with doing
   that for short snippets. For the most part all scripts should be in external 
   files and enqueued.
 * I think the specific reason adding wp_head() broke your scripts is that call 
   loaded other resources that conflicted with your current scripts. Part of the
   reason for enqueuing is it helps prevent conflicts and properly resolves dependencies
   so things are loaded in the correct order and are less likely to conflict.
 * Do be aware that in enqueuing your jQuery scripts, you should specify [‘jquery’]
   as a dependency. This will load the WP local version of jQuery which runs in 
   noConflict mode, so unless you include a noConflict wrapper, you cannot use the
   common `$` shortcut. Without the wrapper, you must explicitly call `jQuery` anywhere
   you used the `$` shortcut.
 *  Thread Starter [monaabdelkader](https://wordpress.org/support/users/monaabdelkader/)
 * (@monaabdelkader)
 * [9 years ago](https://wordpress.org/support/topic/jquery-codes-stop-working/#post-9176725)
 * hi,
 * I removed all the <script></script> tags and its contents from footer.php and
   created my_script.js and copied these codes into it
 *     ```
       // Smooth Scrolling Internal Anchor Links
       jQuery(document).ready(function ($) {
           $(".scroll").click(function (event) {
               event.preventDefault();
               $('html,body').animate({scrollTop: $(this.hash).offset().top}, 1000);
           });
       });
   
       // Team Bio Section
       $(document).ready(function () {
           $('#photo_1').click(function () {
               $('#bio_1').show();
           });
           $('#photo_2').click(function () {
               $('#bio_2').show();
           });
           $('#photo_3').click(function () {
               $('#bio_3').show();
           });
           $('#photo_4').click(function () {
               $('#bio_4').show();
           });
           $('#photo_5').click(function () {
               $('#bio_5').show();
           });
           $('#photo_6').click(function () {
               $('#bio_6').show();
           });
           $('#photo_7').click(function () {
               $('#bio_7').show();
           });
       });
   
       // Recommendation Page - Select City    
       $(document).ready(function () {
           $('select[name="cityId"]').change(function () {
               if ($(this).val() === 'alexandria') {
                   $('#city_service').html('<optgroup label="نوع الخدمة"><option value="alex_1" class="dropdown-item" onclick="myService_alex1()">خدمة (1)</option><option value="alex_2" class="dropdown-item" onclick="myService_alex2()">خدمة (2)</option><option value="alex_3" class="dropdown-item" onclick="myService_alex3()">خدمة (3)</option></optgroup>');
               } else if ($(this).val() === 'minya') {
                   $('#city_service').html('<optgroup label="نوع الخدمة"><option value="minya_1" class="dropdown-item" onclick="myService_minya1()">خدمة (1)</option><option value="minya_2" class="dropdown-item" onclick="myService_minya2()">خدمة (2)</option></optgroup><optgroup label="نوع الخدمة"><option value="minya_3" class="dropdown-item" onclick="myService_minya3()">خدمة (3)</option><option value="minya_4" class="dropdown-item" onclick="myService_minya4()">خدمة (4)</option></optgroup>');
               }
           });
       });
   
       // Recommendation Page - Select Service
       function myService_alex1() {
           $('#recommend_alex1').show();
           $('.recommendation').not('#recommend_alex1').hide();
           $('#recommendations').css('margin-bottom', '51px');
       }
       function myService_alex2() {
           $('#recommend_alex2').show();
           $('.recommendation').not('#recommend_alex2').hide();
           $('#recommendations').css('margin-bottom', '51px');
       }
       function myService_alex3() {
           $('#recommend_alex3').show();
           $('.recommendation').not('#recommend_alex3').hide();
           $('#recommendations').css('margin-bottom', '51px');
       }
   
       function myService_minya1() {
           $('#recommend_minya1').show();
           $('.recommendation').not('#recommend_minya1').hide();
           $('#recommendations').css('margin-bottom', '51px');
       }
       function myService_minya2() {
           $('#recommend_minya2').show();
           $('.recommendation').not('#recommend_minya2').hide();
           $('#recommendations').css('margin-bottom', '51px');
       }
       function myService_minya3() {
           $('#recommend_minya3').show();
           $('.recommendation').not('#recommend_minya3').hide();
           $('#recommendations').css('margin-bottom', '51px');
       }
       function myService_minya4() {
           $('#recommend_minya4').show();
           $('.recommendation').not('#recommend_minya4').hide();
           $('#recommendations').css('margin-bottom', '51px');
       }
   
       and I put this code snippet in functions.php file
       ```
   
 * <?php
    function wpb_adding_scripts() { wp_register_script(‘my_script’, get_template_directory_uri().‘/
   js/my_script.js’, array(‘jquery’), true); wp_enqueue_script(‘my_script’); } add_action(‘
   wp_enqueue_scripts’, ‘wpb_adding_scripts’ ); `
 * Only // Smooth Scrolling Internal Anchor Links // is working and all other functions
   are not working, I replaced all $ with jQuery but nothing happened, could you
   please help me??
 * **[Moderator note: code fixed. Please wrap code in the backtick character or 
   [use the code button](https://make.wordpress.org/support/handbook/forum-welcome/#post-code-safely).
   In addition, for long pastes, use gist.github.com and paste a link to that here.]**
    -  This reply was modified 9 years ago by [Steven Stern (sterndata)](https://wordpress.org/support/users/sterndata/).
    -  This reply was modified 9 years ago by [monaabdelkader](https://wordpress.org/support/users/monaabdelkader/).
    -  This reply was modified 9 years ago by [monaabdelkader](https://wordpress.org/support/users/monaabdelkader/).
 *  Thread Starter [monaabdelkader](https://wordpress.org/support/users/monaabdelkader/)
 * (@monaabdelkader)
 * [9 years ago](https://wordpress.org/support/topic/jquery-codes-stop-working/#post-9179741)
 * hi,
 * I removed all the <script></script> tags and its contents from footer.php and
   created my_script.js and copied these codes into it
 *     ```
       // Smooth Scrolling Internal Anchor Links
       jQuery(document).ready(function ($) {
           $(".scroll").click(function (event) {
               event.preventDefault();
               $('html,body').animate({scrollTop: $(this.hash).offset().top}, 1000);
           });
       });
   
       // Team Bio Section
       $(document).ready(function () {
           $('#photo_1').click(function () {
               $('#bio_1').show();
           });
           $('#photo_2').click(function () {
               $('#bio_2').show();
           });
           $('#photo_3').click(function () {
               $('#bio_3').show();
           });
           $('#photo_4').click(function () {
               $('#bio_4').show();
           });
           $('#photo_5').click(function () {
               $('#bio_5').show();
           });
           $('#photo_6').click(function () {
               $('#bio_6').show();
           });
           $('#photo_7').click(function () {
               $('#bio_7').show();
           });
       });
   
       // Recommendation Page - Select City    
       $(document).ready(function () {
           $('select[name="cityId"]').change(function () {
               if ($(this).val() === 'alexandria') {
                   $('#city_service').html('<optgroup label="نوع الخدمة"><option value="alex_1" class="dropdown-item" onclick="myService_alex1()">خدمة (1)</option><option value="alex_2" class="dropdown-item" onclick="myService_alex2()">خدمة (2)</option><option value="alex_3" class="dropdown-item" onclick="myService_alex3()">خدمة (3)</option></optgroup>');
               } else if ($(this).val() === 'minya') {
                   $('#city_service').html('<optgroup label="نوع الخدمة"><option value="minya_1" class="dropdown-item" onclick="myService_minya1()">خدمة (1)</option><option value="minya_2" class="dropdown-item" onclick="myService_minya2()">خدمة (2)</option></optgroup><optgroup label="نوع الخدمة"><option value="minya_3" class="dropdown-item" onclick="myService_minya3()">خدمة (3)</option><option value="minya_4" class="dropdown-item" onclick="myService_minya4()">خدمة (4)</option></optgroup>');
               }
           });
       });
   
       // Recommendation Page - Select Service
       function myService_alex1() {
           $('#recommend_alex1').show();
           $('.recommendation').not('#recommend_alex1').hide();
           $('#recommendations').css('margin-bottom', '51px');
       }
       function myService_alex2() {
           $('#recommend_alex2').show();
           $('.recommendation').not('#recommend_alex2').hide();
           $('#recommendations').css('margin-bottom', '51px');
       }
       function myService_alex3() {
           $('#recommend_alex3').show();
           $('.recommendation').not('#recommend_alex3').hide();
           $('#recommendations').css('margin-bottom', '51px');
       }
   
       function myService_minya1() {
           $('#recommend_minya1').show();
           $('.recommendation').not('#recommend_minya1').hide();
           $('#recommendations').css('margin-bottom', '51px');
       }
       function myService_minya2() {
           $('#recommend_minya2').show();
           $('.recommendation').not('#recommend_minya2').hide();
           $('#recommendations').css('margin-bottom', '51px');
       }
       function myService_minya3() {
           $('#recommend_minya3').show();
           $('.recommendation').not('#recommend_minya3').hide();
           $('#recommendations').css('margin-bottom', '51px');
       }
       function myService_minya4() {
           $('#recommend_minya4').show();
           $('.recommendation').not('#recommend_minya4').hide();
           $('#recommendations').css('margin-bottom', '51px');
       }
       ```
   
 * and I put this code snippet in functions.php file
 *     ```
       <?php
       function wpb_adding_scripts() {
       wp_register_script(‘my_script’, get_template_directory_uri() . ‘/js/my_script.js’, array(‘jquery’), true);
       wp_enqueue_script(‘my_script’);
       }
       add_action( ‘wp_enqueue_scripts’, ‘wpb_adding_scripts’ );
       ```
   
 * Only // Smooth Scrolling Internal Anchor Links // is working and all other functions
   are not working, I replaced all $ with jQuery but nothing happened, could you
   please help me??
 *  Moderator [bcworkz](https://wordpress.org/support/users/bcworkz/)
 * (@bcworkz)
 * [9 years ago](https://wordpress.org/support/topic/jquery-codes-stop-working/#post-9181325)
 * Any time you use `$(document).ready(function ())` when using the WP version of
   jQuery, pass `$` to the closure to continue to use the $ shortcut within and 
   use `jQuery` in place of the first `$`. You did so once, but did not follow through
   to the rest.
 * Unless you need code executed before the document is ready, you can declare all
   of your functions within one all encompassing document ready closure. There is
   generally no need to have separate document ready closures. Alternately, do not
   pass `$` and simply replace all other occurrences of `$` with `jQuery`. So basically
   either this:
 *     ```
       jQuery(document).ready( function($) {
         $('selector').method();
         function foo() {
           $('selector').method();
         }
         function bar() {
           $('selector').method();
         }
       });
       ```
   
 * or this:
 *     ```
       jQuery('selector').method();
       function foo() {
         jQuery('selector').method();
       }
       function bar() {
         jQuery('selector').method();
       }
       ```
   
 * Your PHP is fine the way it is (except the quote characters are messed up), but
   FYI, you do not need to both register and enqueue unless you need to use the ‘
   my_script’ tag elsewhere besides wp_enqueue_script(). Just enqueuing is generally
   adequate:
 *     ```
       // no wp_register_script() generally required
       wp_enqueue_script('my_script', get_template_directory_uri() . '/js/my_script.js', array('jquery'), true);
       ```
   
 * Now if you had other code that needs to list ‘my_script’ as a dependency, or 
   you need to localize some values in relation to ‘my_script’, then your script
   would need to be registered and then enqueued like you have done. Registering
   is essentially establishing an alias. If the alias will only be used once, there
   is no need to to create an alias, just enqueue your script with the actual path.
 * It’s confusing what to do when, I know. If you have trouble getting this straight,
   you are not alone. It’s always OK to do both like you had done, even if not always
   necessary. It’s even better to understand the situation and code accordingly.
 * Despite the messed up quotes in your posted snippet, you apparently have them
   correct on your site since the first jQuery loaded and executed. In the snippet,
   all the single quotes are ‘curly’ or ‘angled’ as they are ‘here’. In PHP code,
   quotes must be the `'straight'` style. They get messed up when copy/pasting code
   in the forums here when someone fails to use backticks or the code button 😛
 *  Thread Starter [monaabdelkader](https://wordpress.org/support/users/monaabdelkader/)
 * (@monaabdelkader)
 * [8 years, 11 months ago](https://wordpress.org/support/topic/jquery-codes-stop-working/#post-9247893)
 * Thanks a lot for explaining everything in details, everything is working now 
   perfectly, and next time I’ll take care of my quotes =D

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

The topic ‘Jquery codes stop working’ is closed to new replies.

## Tags

 * [enqueue](https://wordpress.org/support/topic-tag/enqueue/)
 * [jquery](https://wordpress.org/support/topic-tag/jquery/)

 * In: [Developing with WordPress](https://wordpress.org/support/forum/wp-advanced/)
 * 9 replies
 * 3 participants
 * Last reply from: [monaabdelkader](https://wordpress.org/support/users/monaabdelkader/)
 * Last activity: [8 years, 11 months ago](https://wordpress.org/support/topic/jquery-codes-stop-working/#post-9247893)
 * Status: not resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics