Add script jquery in footer.php Wordpress

Question

I made this script in jquery

http://jsfiddle.net/eo3s9f7u/

I want to implement it in this site

http://avocat.dac-proiect.ro/wp/

I use Wordpress and my div is in footer.php

This is footer.php

    <?php

     ?>


                </div><!-- #main -->


        <footer id="colophon" class="site-footer" role="contentinfo">

                             <div id="top"></div>
                             <div id="mid"></div>
            <?php get_sidebar( 'footer' ); ?>

            <div class="site-info">
                <?php do_action( 'twentyfourteen_credits' ); ?>
                Codoban.com.All rights reserved
            </div><!-- .site-info -->
        </footer><!-- #colophon -->
    </div><!-- #page -->

    <?php wp_footer(); ?>
</body>
</html>

How can I implement it in this file so that it is functional?

Thanks in advance!

Answer 1

Others have suggested to include the JS code directly in the footer.php. I believe this is not the best approach.

Create, for example, a file js/main.js in the theme folder and use the wp_enqueue_script function with the wp_enqueue_scripts hook to enqueue your js file.

You can add the following (adjusted to your case) in the functions.php file in the theme folder:

function my_scripts_method() { wp_enqueue_script( 'themeMain', get_template_directory_uri() . '/js/main.js', array('jquery'), null, true ); }

add_action( 'wp_enqueue_scripts', 'my_scripts_method' );

Notice that the last parameter is set to true. This way your script will be loaded in the footer .

Also, jQuery scripts should be wrapped in jQuery(function($) {}); or similar in order to work with WordPress' noconflict. http://codex.wordpress.org/Function_Reference/wp_enqueue_script#jQuery_noConflict_Wrappers

edit: Added the wp_enqueue_scripts hook and js wrapper by suggestion of Kaloyan Ivanov.

Answer 2

Just add this before end of body

<script>
( "#top" ).click(function() {
  $( "#mid" ).slideDown( "slow", function() {
    // Animation complete.
  });

});
</script>

Answer 3

Simply add the script anywhere in your footer.php file. Remember that your browser will read the script before reading any code which comes after it. For example, you can add it at the beginning:

    $( "#top" ).click(function() {
  $( "#mid" ).slideDown( "slow", function() {
    // Animation complete.
  });

});

</div><!--main -->