CODEWITHSUNDEEP
phpjqueryhtmlcsswordpress
Ovidiu Andrei
Ovidiu Andrei

Reputation: 11

Add script jquery in footer.php Wordpress

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!

Upvotes: 0

Views: 3606

Answers (3)

VRPF
VRPF

Reputation: 3118

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.

Upvotes: 2

Cedric Ipkiss
Cedric Ipkiss

Reputation: 6337

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

Upvotes: 0

sirgijan
sirgijan

Reputation: 9

Just add this before end of body

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

});
</script>

Upvotes: 0

Related Questions