Enqueued JavaScript is not working

Question

I've ecountered many problems while creating my own WordPress Theme and this is not different. Except that I can't find a solution. I'm good with HTML and CSS, but I know little to nothing from JavaScript and JQuery.

I'm trying to apply the effect from here on my website. I'll find out whether this code works for me or not.

The problem is this. I've copied the HTML in the right place, I've copied the CSS in the right place. I've also copied the JavaScript to /assets/js/script.js

Using the proper function this script is enqueued in the functions.php file.

function mytheme_scripts() {
    wp_enqueue_script( 'script', get_template_directory_uri() . '/assets/js/script.js', true );
}
add_action ( 'wp_enqueue_scripts', 'mytheme_scripts');

I can see the file apearing in the head of my page but it doesnt seem to work. Now, it can be me adjusting things or editing the code, but according to the JavaScript there should be added a div with the class .code and that doesn't happen. That's how I can see that my file is correctly added but is not executing properly or at all.

And for the life of me and my little-known knowledge of JavaScript I can't figure out why.

Answer 1

Your Js code should be inside document.ready function if jQuery is properly called by WordPress but $ sign not defined error occur you need to wrap your code with this.

jQuery(document).ready(function($){
    "use strict";

   //Your Js Code Here 

});

Answer 2

There are a couple things to consider with your script and how you enqueue within your theme.

Script names must be unique when enqueued

Consider that if you have a script named "script" and another script named "script" that wordpress will only choose one. It could be that "script" is taken and you may need to rename it.

function mytheme_scripts() {
    wp_enqueue_script( 'my_theme_script', get_template_directory_uri() . '/assets/js/script.js', true );
}
add_action ( 'wp_enqueue_scripts', 'mytheme_scripts');

jQuery runs in no-conflict mode with wordpress

This means that $ has not been defined as jQuery. Either replace all $ with jQuery or define jQuery inside of a function. For example with the codepen snippet you linked I would do the following:

      (function( $ ) {
    'use strict';

    $(function() {

        $('.tile')
        // tile mouse actions
            .on('mouseover', function(){
                $(this).children('.photo').css({'transform': 'scale('+ $(this).attr('data-scale') +')'});
            })
            .on('mouseout', function(){
                $(this).children('.photo').css({'transform': 'scale(1)'});
            })
            .on('mousemove', function(e){
                $(this).children('.photo').css({'transform-origin': ((e.pageX - $(this).offset().left) / $(this).width()) * 100 + '% ' + ((e.pageY - $(this).offset().top) / $(this).height()) * 100 +'%'});
            })
            // tiles set up
            .each(function(){
                $(this)
                // add a photo container
                    .append('<div class="photo"></div>')
                    // some text just to show zoom level on current item in this example
                    .append('<div class="txt"><div class="x">'+ $(this).attr('data-scale') +'x</div>ZOOM ON<br>HOVER</div>')
                    // set up a background image for each tile based on data-image attribute
                    .children('.photo').css({'background-image': 'url('+ $(this).attr('data-image') +')'});
            })

    }); //End Function



  })( jQuery );

Troubleshooting

Use your browsers inspector window to see if there are console errors. You can also use this window to see what the sources are. So you can look within the sources to see if your JS file has correctly qued or not. Note that with JS and CSS files they're commonly cached by the browser and you will need to hard refresh to see changes sometimes!

Hope this helps you solve it!