0

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 May 9 '18 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 May 9 '18 at 13:44
  • jQuery is missing, you have to load it with the 3rd argument like that : (.., .., ["jquery"]) – mmm May 9 '18 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 May 9 '18 at 16:09
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 

});
0

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!

  • 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($); }); – Remzi Cavdar Oct 24 '18 at 17:35

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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