Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
Bob Sutherton
20,160 PointsAdding your own Script to a custom WordPress Theme
I am trying to create a jQuery sticky header for my WordPress site. My JS file shows up in the source code, but the effect still doesn't work.
The header includes the nav and I want it all to stick at the stop when I scroll down. So I have done this in a codepen and it works fine there.
The effect won't work on my WordPress site, although I have copy and pasted the code from codepen into my JS file. Since the JS file shows up in the source code of my WordPress site, I can't figure out why it is not executing.
Could the problem be in how my JS file falls into the DOM structure? I dunno.
Here is where I added the JS file (myScript.js) into the functions.php file:
//Load Theme_js
function theme_js() {
wp_enqueue_script('myScript', get_template_directory_uri() . '/js/myScript.js', array('jquery'), '', true);
};
add_action('wp_enqueue_scripts', 'theme_styles' );
add_action('wp_enqueue_scripts', 'theme_js');
It does show up in the page source.
5 Answers
Bob Sutherton
20,160 PointsOkay, last night, after some difficulties logging into the admin panel, I was able to get the site uploaded to a subdomain. It is here.
Any insight that can be given into why my jQuery script isn't running is greatly appreciated!
Lucas Santos
19,315 PointsWhenever Wordpress uses Jquery it uses something called "No Conflict Mode" which is why you have to load your JQuery like this
jQuery(document).ready(function($) {
// Code here will be executed on document ready. Use $ as normal.
});
Just the first line of code needs to be called like this so that you can then use JQuery normally:
jQuery(document).ready(function($) {
You can read all about this here
Bob Sutherton
20,160 PointsThanks Lucas for taking the time to respond. I have already applied this measure, but still no action! I should have added this into my original post to let responders know that I took that into account. Any other ideas?
Lucas Santos
19,315 PointsI have a feeling it's a jquery issue. You don't have to migrate your site live for us to take a look just upload the theme files as a zip in drop box, github or wherever else. That would probably be the best way to resolve the issue.
Bob Sutherton
20,160 PointsLucas, I got the site uploaded to a subdomain. I'm not greatly familiar with GITHUB, although I would like to become more so. Maybe if the bug can't be found this way I will have to upload it to GITHUB.
Zac Gordon
Treehouse Guest TeacherAre you able to write any JS that works?
Bob Sutherton
20,160 PointsNo. I tried one other effect just to see if it was working at all. I did a click event where the links in the nav were supposed to disappear when I click on the navbar. That didn't work either. My first thought is that something might be wrong with the order that the JS file falls in the DOM.
I tried it with the file in the header, and in the footer (using the "true" value as you do in the video).
I will continue to experiment with it. That click event was also a jQuery thing, so maybe I will try to do something with just plain javascript and see if anything happens. I do have a Slideshow plugin running (only on the front-page) which I am pretty sure uses jQuery. Could it be creating some kind of conflict?
Caroline Hagan
12,612 PointsJames Callahan Can you provide a link to your website so we can take a look?
Bob Sutherton
20,160 PointsHey Caroline, I am creating this one on localhost with XAMPP. I wasn't planning on uploading it to a live server until I was a little further along in the development of it.
Caroline Hagan
12,612 PointsNo worries James, perhaps you could check in Chrome browser Console to see if you have any errors; you can view this by pressing Ctrl + Shift + J. Or you can do this in Firefox by pressing Ctrl + Shift + K. Usually anything in red is something to look further into.
Caroline Hagan
12,612 PointsCaroline Hagan
12,612 PointsJames Callahan try changing this line of code:
jQuery(document).ready(function(){to this:
jQuery(document).ready(function ($) {Bob Sutherton
20,160 PointsBob Sutherton
20,160 PointsWow. Thank you so much for taking the time to find my error. I swear I copy and pasted that thing into code pen 5 times. I have no idea. But I feel like a twilight zone character.
Thanks again!
P.S. I just went back and checked in codepen. I see that the code works in codepen without that extra character. I wonder where the difference lies? Maybe codepen is just more forgiving...