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.

  • add this code in the JavaScript file and look in the console console.log($('.tile'));
    – mmm
    Commented May 9, 2018 at 13:37
  • @mmm This returns: Uncaught ReferenceError: $ is not defined at script.js?ver=4.9.5:12 (anonymous) @ script.js?ver=4.9.5:12
    – Stef
    Commented May 9, 2018 at 13:44
  • jQuery is missing, you have to load it with the 3rd argument like that : (.., .., ["jquery"])
    – mmm
    Commented May 9, 2018 at 15:56
  • By default WP loads jQuery in no conflict mode. You may need to wrap your $ function to make it work. wordpress.stackexchange.com/questions/21000/…
    – WebElaine
    Commented May 9, 2018 at 16:09

2 Answers 2


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.

    "use strict";

   //Your Js Code Here 


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 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
                // 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 );


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!

  • It's good practice to always use document ready, like this: jQuery(document).ready(function($) { // $ Works! You can test it with next line if you like // console.log($); }); Commented Oct 24, 2018 at 17:35

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.