0

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!

Ovidiu Andrei
  • 11
  • 1
  • 4

3 Answers3

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.

Community
  • 1
  • 1
VRPF
  • 3,118
  • 1
  • 14
  • 15
  • As it says in the wordpress documentation: Name used as a handle for the script. http://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 ); – VRPF Feb 14 '15 at 21:55
  • 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? – Ovidiu Andrei Feb 14 '15 at 22:05
  • 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. – VRPF Feb 14 '15 at 22:42
  • @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. – Kaloyan Feb 14 '15 at 22:46
  • That is a good point. The WP documentation is clear in this regard, but it will make the answer clearer. I will add it. – VRPF Feb 14 '15 at 22:51
  • function my_scripts_method() { wp_enqueue_script( 'script', get_template_directory_uri() . '/js/script.js', array('jquery'), null, true ); } add_action( 'wp_enqueue_scripts', 'my_scripts_method' ); – Ovidiu Andrei Feb 14 '15 at 23:10
  • I added this cod..in functions.php and still does not work ... incredible – Ovidiu Andrei Feb 14 '15 at 23:11
  • One step at a time. Is the script being loaded by the browser ? – VRPF Feb 14 '15 at 23:15
0

Just add this before end of body

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

});
</script>
sirgijan
  • 9
  • 2
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 -->
Cedric Ipkiss
  • 5,662
  • 2
  • 43
  • 72