CODEWITHSUNDEEP
javascriptjquerycsswordpressbutton
Mark
Mark

Reputation: 704

Add this little jquery action in wordpress using button

I have this really little piece of code which I want to implement inside word press:

<div id='cont' style="border: 1px solid #000; height: 150px; overflow:hidden;">
    <a href="#" id="button">Mostrar Todo</a>
    <ul>
        <li>an item</li>
        <li>an item</li>
        <li>an item</li>
        <li>an item</li>
        <li>an item</li>
        <li>an item</li> 
        <li>an item</li>
        <li>an item</li>
        <li>an item</li>
        <li>an item</li>
        <li>an item</li>
         <li>an item</li>
        <li>an item</li>
        <li>an item</li>
        <li>an item</li>
        <li>an item</li>

    </ul>
</div>`

jquery function I want to do

$('#button').click(function(){
    $('#cont').animate({height:'500px'}, 500);

});

demo:

http://jsfiddle.net/YPAy6/9/

I simply need how or where to put the "function" and how to call it from a post in wordpress.

Any idea? really thanks!

PD: I'm loading all scripts from google's cdn and as far as I know its not necessary to load any other jquery cos wordpress its loading also its own version, anyway I'm not 110% sure about this.

Upvotes: 2

Views: 3906

Answers (2)

Terry
Terry

Reputation: 66133

In order to execute the said jQuery function on your WP site, you will have to load it through a .js file first. Copy and save it as, say, functions.js and place it in a folder called /js/ your theme directory (/wp-content/themes/[theme-name]).

In order to load scripts on your site, you can use the good old way of <script src="..." /> in the <head> element, but I strongly recommend using wp_enqueue_script instead. (see WP codex for more information).

Add the wp_enqueue_scripts() function to your theme's functions.php:

<?php
function site_functions_js() {
    wp_enqueue_script(
        'site_functions',
        get_template_directory_uri() . '/js/functions.js',
        array('jquery')
    );
}
add_action('wp_enqueue_scripts', 'site_functions_js');
?>

Upvotes: 1

Harshit Tailor
Harshit Tailor

Reputation: 3281

Make a new javascript file and put this function in that file, and put this Javascript file AFTER the wp_head function. Like this :- 

<script type="text/javascript" src="<?php bloginfo("template_url"); ?>/js/yourScript.js">   </script>

For more Details use this link :-

http://digwp.com/2009/06/including-jquery-in-wordpress-the-right-way/

Upvotes: 0

Related Questions