0

I'm developing on Wordpress and no matter what or where I add the most basic of jQuery of javascript code snippets I only get an error about an unexpected ( or { or `unexpected end of document or something like that, though some of the classes being called for in the jQuery or javascript haven't been present in the document as the code snippet was referencing something else. What am I doing wrong and how can I get it to run when I add a snippet? I'm using the underscores _s bare bones theme. I have added the jQuery cdn in the head section and added the following code:

 jQuery( document ).ready(function() {
    console.log( "ready!" );
    });

I still get an error about Call to undefined function jQuery, I am not a coder and am using the underscores _s theme but would appreciate any help, from what I understand getting jQuery up and running for simple code snippets like the above should be straight forward and easy yet I'm stuck on step one.

edit - all the code I'm adding is going into functions.php, I recognized that previously I added other functions fine to this file, so I tried to add a function that did nothing to it and was fine, so now I'm wondering am I only allowed to add scripts contained within functions placeholder(){}; in the functions.php file? If so, am I supposed to inject javascript/jQuery in other parts of the Wordpress template directly? I was trying to create a menu toggle so should the code be going into the header.php where the menu is directly?

4
  • Are you 100% positive that you've got the jQuery library enqueued?
    – Ryan
    Jan 2, 2019 at 23:50
  • Hi, Welcome, You should post exact error instead of "something like that" :) It will help us help you if your question is clear and errors are properly defined with details.
    – Ali
    Jan 3, 2019 at 0:19
  • I have <script src="ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> before the head and before wp_head, other then that I'm not sure what you mean @Ryan? Jan 3, 2019 at 2:19
  • @aliusman I get so many different errors depending on what I try but generally it has been unexpected { or ( for the vast majority of the time, always pointing at the line my new jQuery code begins in the functions.php. I've noticed I don't have a local version of jqeury in my js folder - just now I managed to add some code correctly, I just followed the format of previous snippets I've added to functions.php and began with function - function mainmenu_toggle( $html ) { }; am I not meant to enter script without beginnig with function in functions.php or something? Jan 3, 2019 at 2:53

2 Answers 2

0

Wordpress comes with jQuery; there's no need to add it. What's important though is that you only call jQuery() after the script was loaded. I guess that's the issue. First, reverse your changes to header.php.

Then put your script as a new *.js file in the js folder in the theme folder. Now open functions.php and find the [themename]_scripts() function.

In there, at the bottom, add

wp_enqueue_script( 'myscript', get_template_directory_uri() . '/js/myscript.js', array(), '20190103', true );

(replacing myscript.js with the actual name of your file).

I suggest this as a test for your JS script for now:

alert(jQuery);

When you refresh the website, you should see an alert with a short function. That means you can now use jQuery, best like this:

(function ($) {
    // jQuery code here
    $("body").css("opacity", "0.5"); // test
})(jQuery);
3
  • I only see customizer.js, navigation,js and skip-link-focus-fix.js in my js folder, I'm using underscores _s bare bones theme, downloaded in the last month or two @Chris-G, I added it to the enqueue section as you suggested, I added it after other enqueque scripts but now I get an error message reading syntax error, unexpected 'if' (T_IF) pointing at the line that comes right after the enqueue that I put in, which wasn't occuring prior. Jan 3, 2019 at 2:43
  • i was trying to insert js into functions.php, it seems that this may have been the issue, from what i understand now functions.php is not for js or jquery - is this correct? Jan 3, 2019 at 5:06
  • @bldingbloks You seem to have figured it out, but I did say Then put your script as a new *.js file in the js folder in the theme folder. (I did download the _s theme so was working off the same theme files as you).
    – user5734311
    Jan 3, 2019 at 8:21
0

Ok folks, I think I figured it out, as I mentioned I'm not a coder and it turns out that I had been mistaking php syntax for javascript and jquery due to many similar terms and syntax format used. Since realizing this I have removed the javascript from the functions.php file and will be using seperate .js files to use as part of my template in order to hold my javascript and jQuery functions.

I now understand the error of my ways and have enabled the jQuery I was originally hoping to run and have put an end to all the syntax errors, today I learned.

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.