Can't get to work on Wordpress 'Underscores Framework'

[JohnyOhio]

Hi Adam

Thanks for the awesome work, however I'm a relative noob to implementing jQuery into Wordpress using the Underscores framework.

I'm currently having trouble implementing the bigSlide.js jQeury menu slider into a Wordpress site

I've followed your guide but can't seem to get it to work. Here's the steps I've taken:

Uploaded bigslide.js file into js.folder/directory (I changed the file name to all small caps....as didn't think jQuery commands would recognise bigSlide.js ??)

This contains all code from following: https://raw.githubusercontent.com/ascott1/bigSlide.js/master/dist/bigSlide.min.js

* Inserted following code into functions.php file:*

function atlanticwebsites_init_js_scripts() {
wp_enqueue_script( 'bigslide', get_template_directory_uri() .
'/js/bigslide.js', array('jquery'), '1.0', true);
}

add_action('wp_enqueue_scripts', 'atlanticwebsites_init_js_scripts' );

Inserted following code into header.php file:

☰

<nav id="menu" class="panel" role="navigation">
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Our Work</a></li>
        <li><a href="#">Contact</a></li>
    </ul>
</nav>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"> </script> <script src="/js.big-slide.js"></script> <script> $(document).ready(function() { $('.menu-link').bigslide(); }); </script>

I've inserted following code into style.css

.panel {
position: fixed;
left: -15.625em; /left or right and the width of your navigation panel/
width: 15.625em; /should match the above value/
}

.wrap {
position: relative;
}
The menu tab shows, but doesn't work. Questions could someone check what's missing? I suspect I've incorrectly placed code in either

function.php or header.php or omitted code?

Also, should I strip out the existing code relating to 'navigation' which was pre-populated with Underscores Framework basic install?

Many thanks for any help

[ascott1]

@JohnyOhio thanks for the kind words!

Are you instantiating the plugin like so:

$(document).ready(function() {
    $('.menu-link').bigSlide();
});

I didn't see that referenced anywhere in the steps you've taken. That can be done in it's own <script> tag after jQuery and bigSlide are referenced or in an individual JavaScript file that is loaded after those two are referenced.

Take a look at: https://github.com/ascott1/bigSlide.js/blob/master/demo/simple.html#L38-L44

I hope that helps!

[JohnyOhio]

@ascott1 Thanks Adam for the fast response.

You're right I didn't instantiate it…. do I insert

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script src="../dist/bigSlide.js"></script>
    <script>
        $(document).ready(function() {
            $('.menu-link').bigSlide();
        });
    </script>

into….index.php or functions.php in theme?
Thanks again

[ascott1]

It's been a while since I worked on a WordPress theme, so I can't answer that last question accurately/with WordPress best practices. If you try both, please report back with results!