Add script jquery in footer.php Wordpress

Question

I made this script in jquery

I want to implement it in this site

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!

Community · Accepted Answer · 2017-05-23 11:56:59Z

2

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.

edited May 23, 2017 at 11:56

CommunityBot

11 silver badge

answered Feb 14, 2015 at 21:37

VRPF

3,1281 gold badge16 silver badges16 bronze badges

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

8 Comments

VRPF Over a year ago

As it says in the wordpress documentation: Name used as a handle for the script. codex.wordpress.org/Function_Reference/wp_enqueue_script. For example, if you had main2.js which depend on the main.js, you would do wp_enqueue_script( 'main2', get_template_directory_uri() . '/js/main2.js', array('jquery', 'themeMain'), null, true );

Ovidiu Andrei Over a year ago

I added foloder /js/script.js...i added this code in functions.php wp_enqueue_script( 'script', get_template_directory_uri() . '/js/script.js', array('jquery'), null, true )......and do not work...what is wrong?

VRPF Over a year ago

Make sure that your script is actually being loaded by inspection get the page source I your browser. Close to the bottom you should see a script tag that includes your script.js. Make sure that all directories are correct. Read the WordPress documentation to make sure you understand well all the parameters.

Kaloyan Over a year ago

@VRPF you should probably update your answer with the the wp_enqueue_scripts hook and the fact custom jQuery scripts should be wrapped in jQuery(function($) {}); or similar in order to work with WordPress' noconflict. Other than that, you have my upvote.

VRPF Over a year ago

That is a good point. The WP documentation is clear in this regard, but it will make the answer clearer. I will add it.

|

sirgijan · Accepted Answer · 2015-02-14 21:25:07Z

0

Just add this before end of body

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

});
</script>

answered Feb 14, 2015 at 21:25

sirgijan

92 bronze badges

1 Comment

Ovidiu Andrei Over a year ago

I did as you said but does not work ... nothing happens

Cedric Ipkiss · Accepted Answer · 2015-02-14 21:27:02Z

0

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

answered Feb 14, 2015 at 21:27

Cedric Ipkiss

6,5457 gold badges52 silver badges79 bronze badges

1 Comment

Ovidiu Andrei Over a year ago

I did as you said but does not work ... nothing happens

Collectives™ on Stack Overflow

Add script jquery in footer.php Wordpress

3 Answers 3

8 Comments

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

8 Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related