Title: How to make jQuery function work?
Last modified: August 21, 2016

---

# How to make jQuery function work?

 *  Resolved [bxwebber](https://wordpress.org/support/users/bxwebber/)
 * (@bxwebber)
 * [12 years, 6 months ago](https://wordpress.org/support/topic/how-to-make-jquery-function-work/)
 * I desperately need help with making a small piece of jQuery code work.
    This 
   is the original script code:
 *     ```
       $(document).scroll(function () {
           var x = $(this).scrollLeft();
           if (x > 100) {
               $('.topMenu').fadeIn(300);
           } else {
               $('.topMenu').fadeOut(300);
           }
   
       });
       ```
   
 * I allready have a child theme in place. I’ve tried by creating a .js file (in
   a child theme js folder) plus a child theme functions.php, after reading several
   sources on this forum, but without succes. It’s difficult for me to ‘translate’
   given examples to my specific code. What should go where?
 * Thanks!!

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

 *  [Andrew Nevins](https://wordpress.org/support/users/anevins/)
 * (@anevins)
 * WCLDN 2018 Contributor | Volunteer support
 * [12 years, 6 months ago](https://wordpress.org/support/topic/how-to-make-jquery-function-work/#post-4375191)
 * Look at using a noconflict wrapper [http://codex.wordpress.org/Function_Reference/wp_enqueue_script#jQuery_noConflict_Wrappers](http://codex.wordpress.org/Function_Reference/wp_enqueue_script#jQuery_noConflict_Wrappers)
 * whats the issue specifically; you can’t get your file to load? Get access to 
   your browser’s console log (e.g through Firebug) and find out these specifics.
 *  Thread Starter [bxwebber](https://wordpress.org/support/users/bxwebber/)
 * (@bxwebber)
 * [12 years, 6 months ago](https://wordpress.org/support/topic/how-to-make-jquery-function-work/#post-4375243)
 * Thanks for your response!
    I’ve tried the method you’re referring to, following
   the examples given [here](http://wordpress.org/support/topic/how-to-integrate-jquery-code-into-my-blog)
   and [here](http://stackoverflow.com/questions/11159860/how-do-i-add-a-simple-jquery-script-to-wordpress)
 * In some cases it worked untill I logged in into WordPress: the site went white
   en WordPress put a copy of the original theme’s functions into the child theme’s
   functions.php…
 * I also tried what’s described [here](http://codex.wordpress.org/Using_Javascript),
   putting a reference to the js script in the child theme’s header and the page
   template. Also unsuccesfull, the script didn’t load at all.
 * My problem is that I don’t know how to rewrite the piece of code I have (from
   which I know that it works in an ordinary non-Wordpress html page) and add the
   necessary new references. Most resources tell only part of the story.
 * Hopefully someone can tell me exactly what to do with this piece of code to make
   it work.
 *  [Andrew Nevins](https://wordpress.org/support/users/anevins/)
 * (@anevins)
 * WCLDN 2018 Contributor | Volunteer support
 * [12 years, 6 months ago](https://wordpress.org/support/topic/how-to-make-jquery-function-work/#post-4375252)
 * I still recommend getting access to your browser’s console log (e.g through Firebug)
   to see error messages
 * _and_
 * Looking at using a noconflict wrapper [http://codex.wordpress.org/Function_Reference/wp_enqueue_script#jQuery_noConflict_Wrappers](http://codex.wordpress.org/Function_Reference/wp_enqueue_script#jQuery_noConflict_Wrappers)
 *  Thread Starter [bxwebber](https://wordpress.org/support/users/bxwebber/)
 * (@bxwebber)
 * [12 years, 6 months ago](https://wordpress.org/support/topic/how-to-make-jquery-function-work/#post-4375327)
 * One of the (many) combinations I tried was this:
 * 1. In the child theme header.php goes a div that should appear if the script 
   would work:
    `<div class="topMenu">SOME TEXT</div>`
 * 2. This div is styled in the child theme style.css:
 *     ```
       .topMenu {
           display: none;
           position: fixed;
           top: 0;
           right: 0;
           width: 400px;
           height: 60px;
           background-color: red;
           z-index: 1;
       }
       ```
   
 * 3. I’ve put this script in a file called backbutts.js in the child theme’s js
   folder:
 *     ```
       (function($){
       $(document).scroll(function () {
           var x = $(this).scrollLeft();
           if (x > 100) {
               $('.topMenu').fadeIn(300);
           } else {
               $('.topMenu').fadeOut(300);
           }
       });
       })(jQuery);
       ```
   
 * 4. and this in the child theme’s functions.php:
 *     ```
       <?php
       $path = get_stylesheet_directory_uri() .'/js/';
       wp_enqueue_script('backbutts', $path.'backbutts.js', array('jquery'));
       ```
   
 * At first site this works without errors – until I log in to WordPress: then the
   cms and site go completely blank, so there are no error messages to check either,
   except for ‘Failed to load resource: the server responded with a status of 500(
   Internal Server Error)’ in Safari.
    Also WordPress automatically puts a copy 
   of the parent theme’s functions.php in the child theme’s functions.php.
 * I suspect there’s something with wrong with the syntax (like the $ in functions.
   php?), bits missing or maybe registering the script the wrong way. I don’t have
   a clue, being a newbie in jQuery…
 *  [Andrew Nevins](https://wordpress.org/support/users/anevins/)
 * (@anevins)
 * WCLDN 2018 Contributor | Volunteer support
 * [12 years, 6 months ago](https://wordpress.org/support/topic/how-to-make-jquery-function-work/#post-4375332)
 * Could you link to your site? We can then explore why you’re having such issues.
 *  Thread Starter [bxwebber](https://wordpress.org/support/users/bxwebber/)
 * (@bxwebber)
 * [12 years, 6 months ago](https://wordpress.org/support/topic/how-to-make-jquery-function-work/#post-4375336)
 * Thanks, nice that you’re willing to dive into it!
    But I think I’ve found a solution!
   The site is still local on my Mac, by the way. But this is what I did, basically
   putting the scripts in the parent theme instead of the child theme:
 * 1. I left the div in the child theme’s header.php and css styling alone, but 
   deleted the child theme’s functions.php and js file I made earlier.
 * 2. Made a js folder in the PARENT theme and put the js file (called backbutts.
   js) in there with this script:
 *     ```
       (function($){
       $(document).scroll(function () {
           var x = $(this).scrollLeft();
           if (x > 100) {
               $('.topMenu').fadeIn(300);
           } else {
               $('.topMenu').fadeOut(300);
           }
       });
       })(jQuery);
       ```
   
 * 3. in the PARENT theme’s functions.php I added just before the closing php tag
   this function (based on suggestions I found [here](http://www.ericmmartin.com/5-tips-for-using-jquery-with-wordpress/)):
 *     ```
       function my_init() {
       	if (!is_admin()) {
       		wp_enqueue_script('jquery');
   
       		// load a JS file from my theme: js/theme.js
       		wp_enqueue_script('my_script', get_bloginfo('template_url') . '/js/backbutts.js', array('jquery'), '1.0', true);
       	}
       }
       add_action('init', 'my_init');
       ```
   
 * And this works like magic! Even when logged in.
 * Now I suspect that it could be something in the parent theme I’m using: [BlankSlate](http://wordpress.org/themes/blankslate),
   which is a stripped down ‘boiler plate theme’, ment to build things from scratch.
   Uptill now I did everything in a child theme set up, which usually works. Somewhere
   I read suggestions by the theme’s developers that eventually it’s best to create
   a new theme with it rather then sticking to a child theme. I’m beginning to see
   why 😉
 * Maybe I’ll post a question about this on the theme’s support forum. For the moment,
   however, I’m happy.
 * Thanks anyway, for your follow up! Really nice.

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

The topic ‘How to make jQuery function work?’ is closed to new replies.

## Tags

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

 * In: [Fixing WordPress](https://wordpress.org/support/forum/how-to-and-troubleshooting/)
 * 6 replies
 * 2 participants
 * Last reply from: [bxwebber](https://wordpress.org/support/users/bxwebber/)
 * Last activity: [12 years, 6 months ago](https://wordpress.org/support/topic/how-to-make-jquery-function-work/#post-4375336)
 * Status: resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics