WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] Where do I put this little js snippet? (7 posts)

  1. PODxt
    Member
    Posted 7 months ago #

    Hi, I would like to manually insert a js slideshow into my wordpress site. I'm using this one: http://unslider.com/

    - I downloaded the script as is,
    - created a custom css file for the slider,
    - triggered them with the functions.php file using

    <?php
    function theme_name_scripts() {
    	wp_enqueue_style( 'unslider', get_stylesheet_directory_uri() . '/js/unslider.css' );
    	wp_enqueue_script( 'unslider', get_stylesheet_directory_uri() . '/js/unslider.js', array( 'jquery' ), '',  true );
    }
    
    add_action( 'wp_enqueue_scripts', 'theme_name_scripts' );
    ?>

    And for the final step on their website (4. Plug it all together), there's the following code I don't even know what to do with it

    $(function() {
        $('.banner').unslider();
    });

    So my question is, where do I put this code?
    Thanks

  2. C W
    Member
    Posted 7 months ago #

    Encase it in <script></script tags like so:

    <script>
    $(function() {
        $('.banner').unslider();
    });
    </script>

    And add it to the footer, just before the closing </body> tag. I don't know what your setup is like, but you may need to change it to this in order to make it work:

    <script>
    jQuery(function() {
        jQuery('.banner').unslider();
    });
    </script>

    (The reason for this is explained here.)

  3. Jose Castaneda
    Member
    Posted 7 months ago #

    Two ways I can think of.

    1. Create a new JS file and enqueue it in the footer.

    2. Create a PHP function to hook to wp_footer. It would look a little like:

    add_action( 'wp_footer', 'my_js' );
    function my_js(){ ?>
    <script>
    jQuery( function() {
      jQuery( '.banner' ) .unslider();
    });
    </script>
    <?php } // end my_js
  4. PODxt
    Member
    Posted 7 months ago #

    Thanks for looking into it, I tried what you suggested with no luck. Here's my testing page: http://mywptestsite.is-great.org/blabla/

    When I look at the source code, everything seems to be loaded (the custom css, and the js at the footer), no clue what's going wrong here.

  5. Andrew
    Forum Moderator
    Posted 7 months ago #

    This is your banner element:

    <div id="banner">
  6. C W
    Member
    Posted 7 months ago #

    You need to change

    jQuery( '.banner' ).unslider();

    to

    jQuery( '#banner' ).unslider();
  7. PODxt
    Member
    Posted 7 months ago #

    Thanks guys

Reply

You must log in to post.

About this Topic