WordPress.org

Forums

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

  1. PODxt
    Member
    Posted 2 years 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 (VYSO)
    Member
    Posted 2 years 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
    THEME COFFEE MONKEY
    Posted 2 years 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 2 years 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 Nevins
    Forum moderator
    Posted 2 years ago #

    This is your banner element:

    <div id="banner">
  6. C W (VYSO)
    Member
    Posted 2 years ago #

    You need to change

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

    to

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

    Thanks guys

Topic Closed

This topic has been closed to new replies.

About this Topic