How to implement javascript into WordPress

1 Views

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

  1. I know I have to save this javascript:

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

Read More

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?

  1. 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)

Post Views: 1

Related posts

Leave a Reply

3 comments

  1. 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.

  2. 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.

  3. 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>