Why does my jQuery plugin show up as text in WordPress?

Question

I am attempting to install unslider jquery plugin for my WordPress website. I enter the below code inside my WordPress text editor and I don't get the expected result. I changed $ to jQuery and that didn't fix it either.

<!-- The barebones HTML required for Unslider -->
<div class="banner">
    <ul><li>This is my slider.</li><li>Pretty cool, huh?</li></ul>
</div>

<!-- And the relevant JavaScript -->
<script src="//code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="/path/to/unslider.js"></script> <!-- but with the right path! -
->
<script>$(function() { $('.banner').unslider() })</script>

Output:

This is my slider. Pretty cool, huh?

$(function() { $(‘.banner’).unslider() })

Answer 1

You can use this PHP code to output your slider's initiator in your themes footer:

add_action('wp_footer','initiate_unslider');
function initiate_unslider () {
    ?>
    <script src="//code.jquery.com/jquery-2.1.4.min.js"></script>
    <script src="/path/to/unslider.js"></script>
    <script>
        $(document).ready(function() { 
            $('.banner').unslider();
        });
    </script>
    <?php
}

Also it's safer to add a $(document).ready before initiating your slider, in case some necessary components of your page has not been loaded yet.