Title: How to add javascript codes?
Last modified: August 21, 2016

---

# How to add javascript codes?

 *  [PODxt](https://wordpress.org/support/users/podxt/)
 * (@podxt)
 * [12 years, 5 months ago](https://wordpress.org/support/topic/how-to-add-javascript-codes/)
 * Hi, I spent 8 hours now reading everything I could find on javascript and wordpress,
   but everything I read was either incomplete or paradoxal with other tutorials.
 * I’m trying to add a scroll to top arrow link and image on all my pages. I’m using
   the 2013 theme with a child theme for testing purpose located here: \wp-content\
   themes\twentythirteen-child
 * In this folder I have a folder called js which contains 3 files:
    scrollup.js
   scrollup.css arrow.png
 * Here is scrollup.js content:
 *     ```
       $(document).ready(function(){ 
   
               $(window).scroll(function(){
                   if ($(this).scrollTop() > 100) {
                       $('.scrollup').fadeIn();
                   } else {
                       $('.scrollup').fadeOut();
                   }
               }); 
   
               $('.scrollup').click(function(){
                   $("html, body").animate({ scrollTop: 0 }, 600);
                   return false;
               });
   
        });
       ```
   
 * scrollup.css content:
 *     ```
       .scrollup {
       	width: 40px;
           height: 40px;
           opacity: 0.3;
           position: fixed;
           bottom: 50px;
           right: 100px;
           display: none;
           text-indent: -9999px;
           background: url('arrow.png') no-repeat;
       }
   
       .scrollup:hover {
       	opacity: 1;
       }
       ```
   
 * I added to my functions.php file, which is located in my twentythirteen-child
   folder:
 *     ```
       <?php
   
       function my_scripts_method() {
       wp_register_script('scrollup', get_stylesheet_directory_uri() . '/js/scrollup.js', array('jquery'),'', true);
       wp_enqueue_script('scrollup');
       }
   
       add_action('wp_enqueue_scripts', 'my_scripts_method');
       ?>
   
       <?php
       function wpb_adding_styles() {
       wp_register_style('scrollup', get_stylesheet_directory_uri() . '/js/scrollup.css');
       wp_enqueue_style('scrollup');
       }
   
       add_action( 'wp_enqueue_styles', 'wpb_adding_styles' );
       ?>
       ```
   
 * And last but not least, I added this html code in one of my pages to create the
   scroll to top link:
 * `<a href="#" class="scrollup">Scroll</a>`
 * I’ll find a way to implement this link in every page of the site later, right
   now I’m just focusing on one page. And I can’t get it to work at all. Nothing
   happens.
 * What am I doing wrong here?? I’m going crazy here.
    Thanks in advance

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

 *  [Endlyss](https://wordpress.org/support/users/akel-res/)
 * (@akel-res)
 * [12 years, 5 months ago](https://wordpress.org/support/topic/how-to-add-javascript-codes/#post-4365846)
 * I was in the same position as you once.
    My solution came with how I had my javascript.
 * instead of
    `$(document).ready(function(){`
 * use
    `jQuery( document ).ready(function( $ ) {`
 * Hope that helps. if not, lemme know.
 *  [Andrew Nevins](https://wordpress.org/support/users/anevins/)
 * (@anevins)
 * WCLDN 2018 Contributor | Volunteer support
 * [12 years, 5 months ago](https://wordpress.org/support/topic/how-to-add-javascript-codes/#post-4365870)
 * > Hi, I spent 8 hours now reading everything I could find on javascript and wordpress,
   > but everything I read was either incomplete or paradoxal with other tutorials.
 * Did you see this codex page [http://codex.wordpress.org/Function_Reference/wp_enqueue_script](http://codex.wordpress.org/Function_Reference/wp_enqueue_script)?
 * Specifically this part:
 * > The jQuery library included with WordPress is set to the noConflict() mode (
   > see wp-includes/js/jquery/jquery.js). This is to prevent compatibility problems
   > with other JavaScript libraries that WordPress can link.
 * _[http://codex.wordpress.org/Function\_Reference/wp\_enqueue\_script#jQuery\_noConflict\_Wrappers](http://codex.wordpress.org/Function_Reference/wp_enqueue_script#jQuery_noConflict_Wrappers)_
 * > Nothing happens.
 * You _really_ ought to be using a browser developer tool like [Firebug](http://getfirebug.com/)
   to see what’s going on with your JavaScript (check the “console” tab). Or you
   could just view your page’s source code to see if your JS or CSS files are being
   loaded at all.
    If you are doing all of that then you need to convey to us what
   exactly doesn’t work, rather than, “Nothing happens”.
 *  Thread Starter [PODxt](https://wordpress.org/support/users/podxt/)
 * (@podxt)
 * [12 years, 5 months ago](https://wordpress.org/support/topic/how-to-add-javascript-codes/#post-4365871)
 * [@endlyss](https://wordpress.org/support/users/endlyss/)
    Thanks for the suggestion,
   I just tried that but the script is still not triggered. I really don’t get it.
 *  Thread Starter [PODxt](https://wordpress.org/support/users/podxt/)
 * (@podxt)
 * [12 years, 5 months ago](https://wordpress.org/support/topic/how-to-add-javascript-codes/#post-4365872)
 * [@andrew](https://wordpress.org/support/users/andrew/) Nevins
    I’m no expert,
   and I gave as much informations as I could.
 * I tried to decipher the source page, and it doesn’t seem to trigger my css or
   js.
 * The console tab? I don’t even know what this is. I cheched that and it mentionned:
   Event.returnValue is deprecated. Please use the standard event.preventDefault()
   instead.
 * I can’t even tell if this is related to my problem here.
 *  [Andrew Nevins](https://wordpress.org/support/users/anevins/)
 * (@anevins)
 * WCLDN 2018 Contributor | Volunteer support
 * [12 years, 5 months ago](https://wordpress.org/support/topic/how-to-add-javascript-codes/#post-4365873)
 * Can you link your page?
 *  [Endlyss](https://wordpress.org/support/users/akel-res/)
 * (@akel-res)
 * [12 years, 5 months ago](https://wordpress.org/support/topic/how-to-add-javascript-codes/#post-4365885)
 * [@podxt](https://wordpress.org/support/users/podxt/)
    Sorry that my solution 
   did not help.
 * I could provide an alternative to what you are trying to do?
    I take it you are
   making a back-to-top button with an animated scroll.
 * The HTML
 * `<a href="javascript:void(0);" class="scrollup">Scroll</a>`
 * The Javascript (put this just before the end body tag in the footer.php)
 *     ```
       jQuery(document).ready(function ($) {
       	$(".scrollup").click(function () {
       		$("body").animate({ scrollTop: "0px" });
       	});
       });
       ```
   
 * And then of course whatever CSS you wanna add to it.
    If you place all of the
   above code (excluding CSS) in the footer.php just before the end body tag, then
   you should be able to see it on all pages as well.
 *  Thread Starter [PODxt](https://wordpress.org/support/users/podxt/)
 * (@podxt)
 * [12 years, 5 months ago](https://wordpress.org/support/topic/how-to-add-javascript-codes/#post-4365904)
 * [@andrew](https://wordpress.org/support/users/andrew/) Nevins
    I’m working offline
   so I don’t have anything online for now. I’m trying to set up a dummy website
   for testing purpose but it will take some days (weeks?) for my internet provider
   to activate my ftp and SQL accounts as these is a free service so there’s no 
   real customer support. Once everything is up and running, I’ll put the link here.
 * I noticed that the js was actually loaded into the source page, right before 
   another js also triggering JQuery. The 2nd js comes from the WP 2013 theme. But
   I can’t find any trace of my css file (scrollup.css).
 * I also noticed that the warning I got in the console tab “Event.returnValue is
   deprecated. Please use the standard event.preventDefault() instead.” disappeared
   when I removed my code from the footer (so the js is not triggered).
 * [@endlyss](https://wordpress.org/support/users/endlyss/)
    Thanks for the help,
   I just did what you suggested, the script is loading in the source page, there’s
   no warning from Chrome in the Console tab but, still no sign from my CSS! I used
   the exact same css as in my first post. I only removed “.scrollup:hover {” as
   it doesn’t seem to work (I think I read you needed to use js to use the hover
   option).
 *  Thread Starter [PODxt](https://wordpress.org/support/users/podxt/)
 * (@podxt)
 * [12 years, 5 months ago](https://wordpress.org/support/topic/how-to-add-javascript-codes/#post-4365928)
 * I ran some more tests and I got the script to work by:
    – changing class to id
   for the css and putting the css code in my main css – and just adding the following
   code to the footer
 *     ```
       <?php
       wp_enqueue_script( 'scrollup', get_stylesheet_directory_uri() . '/js/scrollup.js', array( 'jquery' ), '',  true );
       ?>
       ```
   
 * **Is there a reason why it doesn’t work with “class”?** Using class instead of
   id wouldn’t let the custom css to load.
 * And more importantly, **why is it useless to use wp_register_script() and add_action()??**
   I thought these were required when adding js scripts to wordpress!

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

The topic ‘How to add javascript codes?’ is closed to new replies.

## Tags

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

 * In: [Fixing WordPress](https://wordpress.org/support/forum/how-to-and-troubleshooting/)
 * 8 replies
 * 3 participants
 * Last reply from: [PODxt](https://wordpress.org/support/users/podxt/)
 * Last activity: [12 years, 5 months ago](https://wordpress.org/support/topic/how-to-add-javascript-codes/#post-4365928)
 * Status: not resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics