How to implement javascript into Wordpress

Question

I'm having a bit of trouble understanding how to put javascript into a wordpress theme.

I know I have to save this javascript:

http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js

and put it in a folder on the server under "js" but what do I do with the functions javascript?

 $(document).ready(function(){
                $('#contactButton').click(function(){
                    $('#contactDropDown').show("fast");
                    $('#contactDropDown').animate({height:'500px'}, 200);
                });

                $('#closeBox').click(function(){
                    $('#contactDropDown').hide("fast");
                    $('#contactDropDown').animate({height:'0px'}, 200);
                });
            });

Do I save this as a different document but save it to the same "js" folder?

What is the exact code that I need to put into the functions.php of the theme?

i also created a fiddle for a little more understanding: http://jsfiddle.net/ptemyw52/

(the javascript is for the drop down contact box)

diggy · Accepted Answer · 2015-02-09 20:40:01Z

3

You use the WordPress wp_enqueue_script function to tell WordPress what to load.

It has jQuery builtin, so you can just tell it:

wp_enqueue_script('jquery');

to get that. For your own code, put it in a file somewhere (e.g. js/scripts.js) and then tell WordPress to load it with:

wp_enqueue_script(
    'myscript',
     get_stylesheet_directory_uri() . '/js/scripts.js',
     array('jquery')
);

The final argument array('jquery') tells WP that your scripts depend on having jquery.

edited Feb 9, 2015 at 20:40

diggy

6,8482 gold badges20 silver badges24 bronze badges

answered Feb 9, 2015 at 19:33

user488187

Sign up to request clarification or add additional context in comments.

10 Comments

user488187 Over a year ago

If what you show in the question is what you need, then you can put it directly in the JS file as-is. WordPress will load in jQuery and then load in your script. You script will then run and you should be set.

sara Over a year ago

do I need to put my functions code in <script> when I save it?

user488187 Over a year ago

No, you do not need script tags. Just put your code in the file as-is.

sara Over a year ago

and I add this enqueue script into the functions.php right? because when I do and change the link to my file it comes up with an error

user488187 Over a year ago

What is the error? And make sure that the url is right. get_stylesheet_uri() returns the URL of your theme directory. The example script I gave above assumes that your script file is in: example.com/wp-content/themes/yourtheme/js/scripts.js. If your script is somewhere else, you would need to change that.

|

w3bMak3r · Accepted Answer · 2015-02-09 19:57:33Z

1

Wordpress Already has JQuery included.

http://codex.wordpress.org/Function_Reference/wp_enqueue_script

You have to make sure is it enqued somewhere. If JQuery is not running either in your functions.php or your head.php enqueue it like so:

wp_enqueue_script('jquery');

Wordpress loads JQuery in no-conflict mode so the bling ($) is not going to work you need to atually type in the jQuery. You can actually just type it out and pass it in through your document ready, like so:

<script>
jQuery(document).ready(function($){
     $('#contactButton').click(function(){
         $('#contactDropDown').show("fast");
         $('#contactDropDown').animate({height:'500px'}, 200);
     });

     $('#closeBox').click(function(){
         $('#contactDropDown').hide("fast");
         $('#contactDropDown').animate({height:'0px'}, 200);
     });
});
</script>

You can actually just add this to your footer.php if this the only code you have.. If you end up having more javascript you might want to make it's own file and enqueue as well.

edited Feb 9, 2015 at 19:57

answered Feb 9, 2015 at 19:31

w3bMak3r

8928 silver badges14 bronze badges

6 Comments

sara Over a year ago

do i have to put that code in <script> ? why would i put it in the footer?

w3bMak3r Over a year ago

yeah put in in the <script></script> tags

sara Over a year ago

okay did saved the functions with the script tags and added it into the js folder, when i enqueue it with the link @bobdye suggested, it comes up with an error so I'm having trouble eunqueueing it

w3bMak3r Over a year ago

Can you paste the exact error here so I can see it?

sara Over a year ago

i actually got rid of the error! but unfortunately the javascript isn't working on my website

|

Abdiel · Accepted Answer · 2015-02-09 19:33:14Z

-1

in: wp-content/themes/your-template/js you put your js file. Then in head of document (it could be header, index etc.)

<script src="<?php echo get_template_directory_uri(); ?>/js/your.js"></script>

answered Feb 9, 2015 at 19:33

Abdiel

416 bronze badges

3 Comments

w3bMak3r Over a year ago

Do not do this... This is really bad practice. This is not how you load scripts in wordpress

sara Over a year ago

do you have a suggestion of how to do this @w3bMak3r?

w3bMak3r Over a year ago

I posted an answer below. Wordpress uses enqueue scripts to load the scripts in the right places

Collectives™ on Stack Overflow

How to implement javascript into Wordpress

3 Answers 3

10 Comments

6 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

10 Comments

6 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related