Unable to add JQuery to wordpress without getting Syntax or Call to undefined function error

.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty{ height:90px;width:728px;box-sizing:border-box;
}

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?

edited Jan 3 at 6:49

marc_s

584k13011241270

asked Jan 2 at 23:35

bldingbloks

Are you 100% positive that you've got the jQuery library enqueued?

– Ryan
Jan 2 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 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?

– bldingbloks
Jan 3 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?

– bldingbloks
Jan 3 at 2:53

add a comment |

 jQuery( document ).ready(function() {

    console.log( "ready!" );

    });

edited Jan 3 at 6:49

marc_s

584k13011241270

asked Jan 2 at 23:35

bldingbloks

Are you 100% positive that you've got the jQuery library enqueued?

– Ryan
Jan 2 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 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?

– bldingbloks
Jan 3 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?

– bldingbloks
Jan 3 at 2:53

add a comment |

 jQuery( document ).ready(function() {

    console.log( "ready!" );

    });

edited Jan 3 at 6:49

marc_s

584k13011241270

asked Jan 2 at 23:35

bldingbloks

 jQuery( document ).ready(function() {

    console.log( "ready!" );

    });

javascript jquery wordpress

edited Jan 3 at 6:49

marc_s

584k13011241270

asked Jan 2 at 23:35

bldingbloks

edited Jan 3 at 6:49

marc_s

584k13011241270

asked Jan 2 at 23:35

bldingbloks

edited Jan 3 at 6:49

marc_s

584k13011241270

edited Jan 3 at 6:49

marc_s

584k13011241270

edited Jan 3 at 6:49

marc_s

584k13011241270

asked Jan 2 at 23:35

bldingbloks

asked Jan 2 at 23:35

bldingbloks

asked Jan 2 at 23:35

bldingbloks

Are you 100% positive that you've got the jQuery library enqueued?

– Ryan
Jan 2 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 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?

– bldingbloks
Jan 3 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?

– bldingbloks
Jan 3 at 2:53

add a comment |

Are you 100% positive that you've got the jQuery library enqueued?

– Ryan
Jan 2 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 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?

– bldingbloks
Jan 3 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?

– bldingbloks
Jan 3 at 2:53

Are you 100% positive that you've got the jQuery library enqueued?

– Ryan
Jan 2 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 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?

– bldingbloks
Jan 3 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?

– bldingbloks
Jan 3 at 2:53

add a comment |

2 Answers
2

active

oldest

votes

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

answered Jan 3 at 0:12

Chris G

6,42121023

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.

– bldingbloks
Jan 3 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?

– bldingbloks
Jan 3 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).

– Chris G
Jan 3 at 8:21

add a comment |

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.

answered Jan 3 at 7:14

bldingbloks

add a comment |

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54014576%2funable-to-add-jquery-to-wordpress-without-getting-syntax-or-call-to-undefined-fu%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

2 Answers
2

active

oldest

votes

2 Answers
2

active

oldest

votes

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

answered Jan 3 at 0:12

Chris G

6,42121023

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.

– bldingbloks
Jan 3 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?

– bldingbloks
Jan 3 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).

– Chris G
Jan 3 at 8:21

add a comment |

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

answered Jan 3 at 0:12

Chris G

6,42121023

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.

– bldingbloks
Jan 3 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?

– bldingbloks
Jan 3 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).

– Chris G
Jan 3 at 8:21

add a comment |

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

answered Jan 3 at 0:12

Chris G

6,42121023

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

answered Jan 3 at 0:12

Chris G

6,42121023

answered Jan 3 at 0:12

Chris G

6,42121023

answered Jan 3 at 0:12

Chris G

6,42121023

answered Jan 3 at 0:12

Chris G

6,42121023

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.

– bldingbloks
Jan 3 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?

– bldingbloks
Jan 3 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).

– Chris G
Jan 3 at 8:21

add a comment |

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.

– bldingbloks
Jan 3 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?

– bldingbloks
Jan 3 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).

– Chris G
Jan 3 at 8:21

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.

– bldingbloks
Jan 3 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?

– bldingbloks
Jan 3 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).

– Chris G
Jan 3 at 8:21

add a comment |

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.

answered Jan 3 at 7:14

bldingbloks

add a comment |

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.

answered Jan 3 at 7:14

bldingbloks

add a comment |

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.

answered Jan 3 at 7:14

bldingbloks

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.

answered Jan 3 at 7:14

bldingbloks

answered Jan 3 at 7:14

bldingbloks

answered Jan 3 at 7:14

bldingbloks

answered Jan 3 at 7:14

bldingbloks

add a comment |

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

Search This Blog

Ufyukyu