Struggling to insert js in functions.php in the right way to get it working properly on my site

Hello Andy,

Basic problem here is, that you're missing attached owl carousel dependencies. In other words you have to use wp_enqueue_script on 'owl.animate.js','owl.autoheight.js' to use them in dependencies parameter, also i haven't seen your app.js file linked through wp_enqueue_script.

<?php
function poog_theme_scripts(){
    wp_enqueue_script('font_awesome_js',get_template_directory_uri() . '/js/fontawesome-all.min.js',array('jquery'),'',false);
    wp_enqueue_script('foundation_js',get_template_directory_uri() . '/js/foundation.min.js', array('jquery'),'',true);
    wp_enqueue_script('owl.autoheight.js',get_template_directory_uri() . '/js/owl.autoheight.js', array('jquery'),'',true);
    wp_enqueue_script('owl.animate.js',get_template_directory_uri() . '/js/owl.carousel.js', array('jquery'),'',true)
    wp_enqueue_script('owl_carousel_js',get_template_directory_uri() . '/js/owl.animate.js', array('jquery','owl.animate.js','owl.autoheight.js'),'',true);
    wp_enqueue_script('main_js',get_template_directory_uri() . '/js/scripts.js', array('jquery', 'owl_carousel_js'),'',true);
}
add_action('wp_enqueue_scripts','poog_theme_scripts');

You're saying that that you have some js linked by script tag in your static template, which is bad way to do this, you should've use wordpress conditional functions to link additional script/style files. Checkout how im linking google maps script on my project which is used it only on contact page.

<?php
function wpdocs_theme_name_scripts() {
    wp_deregister_script('wp-embed');

    if(is_page('contact')){
        wp_enqueue_script('maps', 'http://maps.googleapis.com/maps/api/js?key=my_key', array(), '1.0.0', true);
    }

    wp_enqueue_style('style-name', get_stylesheet_uri());
    wp_enqueue_style('font-awesome', "https://use.fontawesome.com/releases/v5.0.10/css/all.css");
    wp_enqueue_script('script-name', get_template_directory_uri() . '/js/scripts.min.js', array('jquery'), '1.0.0', true);
}
add_action('wp_enqueue_scripts', 'wpdocs_theme_name_scripts');

I've combined all js/css files by grunt for every project that's why i have only few files here.

I prefer slick slider over owl carousel, so i won't check your js to be correct.

Hopes it helps,

Konrad

Thank you Konrad for your support. I have tried merging the js code into my main.js but as I mentioned, it just breaks things and I'm not clued up on js to be able to problem solve it. So for the moment it has to stay on the page.

That however, would not fix the fact that I still can't seem to enqueue the files properly. I have followed the tutorial as correctly as I can. I suspect with my limited knowledge that it is due to either Wordpress delivering a jQuery version that is different to my template; and/or it could be that I'm not sure how to set Owl Carousel js files up properly; and/or I am coding the onpage/inline js incorrectly.

I am a student and novice in Wordpress and JS and so I suspect I need more direct support as "i don't know what I don't know". Thanks again for your advice. I have message TeamTreeHouse directly and asked for support. Two weeks and a "promise of support" later and I'm still waiting for a response!

Let's start with one issue at a time, so first let's address the navigation.

The scripts.js file from your original site seems to include your navigation jquery.

1. You have included scripts.js as dependent on jquery and loading in the footer. Do you see that file attached when you view the site?
2. You cannot use jquery directly, you need a wrapper, have you changed your function calls to be wrapped as follows

jQuery( document ).ready( function( $ ) {
    // $() will work as an alias for jQuery() inside of this function
    [ your code goes here ]
} );

Example would be

jQuery( document ).ready( function( $ ) {
    //Navigation menu
   $(document).ready(function() {
      $("#navToggle a").click(function(e){
            e.preventDefault();

        $("header > nav").slideToggle();
        $("#logo").toggleClass("menuUp menuDown");
       });

        $(window).resize(function() {
            if($( window ).width() >= "900") {
                $("header > nav").css("display", "block");

                if($("#logo").attr('class') == "menuDown") {
                    $("#logo").toggleClass("menuUp menuDown");
                }
            }
            else {
                $("header > nav").css("display", "none");
            }
        }); 

        $("header > nav > ul > li > a").click(function(e) {
            if($( window ).width() <= "900") { 
                if($(this).siblings().size() > 0 ) {
                e.preventDefault();
                $(this).siblings().slideToggle("fast")
                }
            }
        }); 

} );

Hello Alina,

I do see the scripts.js file listed at the footer and if I open it up in the sources panel all the code shows up fine. I had also used the wrapper you mentioned previously, but it made no difference so I took it out. I've just added it back in but it still makes no difference.

I get that it makes it harder to support me because i'm developing it offline, but I like to think I'm not an idiot and can follow the videos quite well. My problem I think is that I'm starting with a more complex template than the one in the video and it uses OWL Carousel and I'm struggling to understand what files need to be included and what ones are dependencies etc.

At the moment, I can't even get the mobile nav menu to work. If you look at www.pageoneofgoogle.co.uk on a mobile device, you'll see what it should look like. On the wordpress version it's just a list of links.

Ok, in order to try and make things a bit easier to work out (probably not by much :P), I have installed wordpress and my theme so far on a test server. It's located at www.websitetestserver.co.uk.

Ah right, didn't think about that. I've set up a user account for you. How can I get the details to you as I don't want to post them in here. Thanks.