Running JS/jQuery on WP

hi,

I hope I can get help here on this issue…

I’m very confused about running your own javascript in Wordpress:

what it says in my book (“Digging into WP” pg 61):

including JavaScript files in your theme is slightly trickier [than CSS],
especially if you want to do it the right way (you do). Let’s say you want to include
the popular JavaScript library jQuery on your page, and also a custom script of your
own that makes use of jQuery. Because jQuery is such a popular library, it is used
fairly commonly by other plugins, and in fact by the WordPress Admin area itself.
As such, WordPress literally ships with a copy of jQuery you can link to. To do so,
simply call this function in your head area or functions.php file:

<?php wp_enqueue_script('jquery'); ?>

my questions:

  1. this doesn’t work… I put it inside <head> section in header.php, and then ran a small script that prints something on console; it says jQuery is not a function…

  2. it says you can also put it in functions.php, but there are two files called functions.php: one in /wp-includes/, and another in /wp-content/themes/<theme>/ so which one?

I would appreciate some help… I have been a developer for a long time; have always been a hand-coder… this is a whole new world…

thank you…

You place the wp_enqueue_script(‘jquery’) function in the functions.php file inside your theme in the wp-content folder. I would check out the documentation at wordpress.org for more information.

There are a number of articles about using JQuery with WordPress, like this one, which you might find very useful.

thank you for your response…

https://digwp.com has never worked for me… ever since I started learning WP a few months ago this site has never worked… I get what I assume is a 404…

This site can’t be reached

thank you…

an aside…

just for the heck of it, I searched for “wordpress for handcoders”… google responded:

did you mean: “wordpress for handloaders”??

LOL…

If you want to build your own theme from scratch (hand coded), have you checked out the WordPress Codex, https://codex.wordpress.org/Theme_Development ?

https://digwp.com works fine for me - did you try Googling “Digging into WordPress” and using the link they provide you?

If you want to build your own theme from scratch (hand coded)…

nope… I never said I wanted to build my own theme… one thing at a time… I’m just getting started with WP, I prefer to use available themes for now…;~)

https://digwp.com works fine for me…

diwp.com works for you? oh man… it’s never worked for me, not once… I get the “this site cannot be found” error every single time… (there’s something wrong with the site if it doesn’t work for everyone…) I have clicked on the links in the book many times, it never works…

thank you for your response…

thank you for your response…

You place the wp_enqueue_script(‘jquery’) function in the functions.php…

so I wonder, all these things you have to code inside /wp-content/themes//…

if you change themes you have to code them again? it seems to me theme should just be for the visual aspects, no? correct if I’m wrong… am new to WP…

thank you…

Everything you need to give your website the look and feel that you want (page templates, CSS, JS, functions.php) goes in wp-content/themes/your-theme-name. The wp-content folder also holds the plugins that are used to give your site additional funcitonality, and the uploads where all the image and document uploads go.

Everything outside of the wp-content is what makes any WordPress site run. It has nothing to do with your specific website, except the wp-config.php file where you put your database credentials.

If you want change your theme and keep the same functions, you are best to put these functions into plugins and use the plugins in your site instead of putting them in the functions.php file.

I can’t get the JS to work at all…:frowning:

as instructed in the book mentioned in my OP, I put this

<?php wp_enqueue_script('jquery'); ?>

in wp-content/themes/theme-name/functions.js… I put it at the very top and at the very bottom… it doesn’t work at all… console says jQuery is not a function…

my little test console script only works if instead of doing the above I put this in <head> in header.php…
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
and then of course this, immediately after the above line…
<script type="text/javascript" src="<?php echo $path_to_root; ?>wp-includes/js/my_scripts.js"></script>

but according to the book this is not the correct way to do it… in the book it says to do it the other way… :frowning:

would appreciate some help…

thank you…

this is slowly driving me nuts…

why does this not work??

<script type="text/javascript" src="<?php echo $path_to_root; ?>wp-includes/js/jquery/jquery.js"></script>
(core jquery is there, at this location, I checked…)
(this is in lieu of the call to the jquery at the google API location I had previously… don’t see why this doesn’t work if the jquery.js is there…)

while this does?

<script type="text/javascript" src="<?php echo $path_to_root; ?>wp-includes/js/my_scripts.js"></script>

($path_to_root is a var I set up myself, namely, http://localhost/&lt;user&gt;/name_of_site/ )

I’ve spent the whole afternoon on this and have come to some bizarre/surprising conclusions; here are my notes/impressions/summary:

what it says in book: include this
<?php wp_enqueue_script('jquery'); ?>

either in <head> in header.php or in
/wp-content/themes/theme-name/functions.php…

however: neither one of these worked… only thing that worked was including jquery core thus:
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

BUT: after a lot of haggling I realized I don’t need to include jquery core, it’s already included, BUT:
in the two ways I included my own scripts:

  1. what it says in the book:
    <script type="text/javascript" src="<?php bloginfo('template_url'); ?>/assets/js/myscripts.js"></script>
    (inside theme dir)

  2. my own doing:
    <script type="text/javascript" src="<?php echo $path_to_root; ?>wp-includes/js/my_scripts.js"></script>
    (outside theme dir)

both of these work, HOWEVER:

they only work if and only if I don’t wrap the stmts in

$(document).ready(function() {
	......
});

also, I included a test console stmt at the bottom of jquery core file
(/wp-includes/js/jquery/jquery.js)

and this one also, only worked if and only if I did not wrap it in

$(document).ready(function() {
	......
});

if I do wrap them in the document.ready wrapper it says in console:
$ is not a function.....

this is so bizarre, I don’t know what to make of this…

any comments? suggestions?

thank you…

The JQuery that WordPress uses is in compatibility mode. Have you been able to access the article that I linked to earlier? It has a very good, easy to understand explanation of what this means. I’m sorry I can’t give you more information right now, because I don’t have any time right now. If you can’t read the article, try Googling for WordPress and JQuery.

hi WebMachine,

thank you for your response… strangely enough (ah yes, learning WP has been an adventure…;~) I was able to access that site on my iPhone, not my MacBook Pro, unfortunately… (why on earth would this be?) I guess I will read it there…

just a quick question, if I may: what do you mean by jquery in “compatibility mode”???

thank you very much…

Check this out: https://learn.jquery.com/using-jquery-core/avoid-conflicts-other-libraries/

WebMachine,

thank you so much for all your help… I got it now… the article in digwp.com was very useful…

I got everything to work now by wrapping my code in (function($) {...... etc…
(I had forgotten about that compatibility thing…:wink:

thanks again…

PS: I hand’t read the article before b/c I hadn’t realized I could get to it on my iPhone till this afternoon…

I’m glad it helped and that you were able to solve your issue. I’ve found that often when I’m stuck, a Google search will turn up other people with the same issue and their solutions to it. :slight_smile:

hi WebMachine,

yes, that’s true… I avail myself of google searches a lot… sometimes I find the solution w/o even clicking on a link, it’s right there in the summary beneath the link…

but this time I was so puzzled, I knew about the compatibility issue, but I just didn’t make the connection… I couldn’t understand why it said “$ is not a function” only when I wrapped the code in the doc.ready() fn… (I’m retired now, I don’t develop as much as I used to… so sometimes I forget some things, need to refresh my memory…;~)

once again, thank you very much for your help… I will probably be back soon w/another WP question…:slight_smile:

1 Like

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.