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
Philip Collins
13,249 PointsI'm struggling to get the heading functionality i had on my html page.
I've got a heading that includes a "slideshow" type image and text infront with a button, and arrows either side to allow the user to skip through to the next slide, but when i convert this to wordpress it no longer works...
I've added it in the function.php file
function add_theme_scripts() {
wp_enqueue_script( 'script', get_template_directory_uri() . '/js/index.js', array (), 1.1, true);
}
add_action( 'wp_enqueue_scripts', 'add_theme_scripts' );
It all works fine in my html page before the conversion..
I've also tried registering it first with
wp_register_script( 'custom-script', get_template_directory_uri() . '/js/index.js' );
9 Answers
Rich Donnellan
Treehouse Moderator 27,671 PointsAny errors in the console? Does it require any dependencies (like jQuery)? Also, array () should be array(), or even [] if you're on PHP 5.4 or above.
Keep us updated.
Rich Donnellan
Treehouse Moderator 27,671 PointsHmmm ... you need to load the script in the <head> since you're using an inline onclick handler. Changing to false (default) will do just that.
Setting to true loads it in the footer, which by that point, the call is already made and no reference to the function has been loaded yet.
wp_enqueue_script( 'script', get_template_directory_uri() . '/js/index.js', array(), '1.1', false);
P.S. – per the docs, version number ('1.1') needs to be a string.
Philip Collins
13,249 PointsChanged to false and still showing each of the "slides" in a list instead of hidden behind each other, the same error shows up whenever I click the > /< symbols
I have this script linked to the bottom of the html file and it still works.. very odd.... :/
Rich Donnellan
Treehouse Moderator 27,671 PointsCan you confirm the script is loading? Either add a console.log("I'm loaded! ?"); or check the DOM in your dev tools.
Rich Donnellan
Treehouse Moderator 27,671 PointsAre you certain the "production ready" JavaScript file resides at 'get_template_directory_uri() . /js/index.js'? Is this a child theme by any chance?
Did you update the version number to be a string?
You made reference to function.php. Make sure it is functions.php (super important).
Philip Collins
13,249 PointsI thought i had hit send on my comment earlier sorry..
Not sure what you mean by production ready?? This is probably where I've gone wrong, i guess..... First real project.. :
This is a custom built theme, did change the version number to a string but won't work.
Thank you so much for helping me!!
Rich Donnellan
Treehouse Moderator 27,671 PointsNo problem! I'm pretty invested now in helping you to get this working.
Ignore "production ready" and just make sure the file exists where you think it does. Did you make sure it's functions.php (plural)?
Philip Collins
13,249 PointsI made the 'array()' change, still no luck :/
I get this error
'Uncaught ReferenceError: plusIndex is not defined at HTMLElement.onclick ((index):142)'
The plusIndex is a call to the Javascript function
var index = 1;
function plusIndex(n){
index = index + 1;
showImage(index);
}
showImage(1);
function showImage(n) {
var i;
var x = document.getElementsByClassName("slides");
if(n > x.length) {index = 1;}
if(n < 1) {index = x.length;}
for(i=0; i< x.length; i++) {
x[i].style.display ="none";
}
x[index-1].style.display ="block"
}
This is everything inside my JavaScript file..
<div class="slides">
<img src="img/headerPromo/header3.jpg" alt="header promo">
<div class="promo-text">
<h1>Discover</h1>
<button class="head-shop-btn" onClick="window.location.href='shop.html'">Shop Now</button>
</div>
</div>
<i onclick="plusIndex(-1)" id="head-btn1" class="fa fa-chevron-left head-btn"></i>
<i onclick="plusIndex(1)" id="head-btn2" class="head-btn fa fa-chevron-right"></i>
This is part of the HTML where the issue is.
Philip Collins
13,249 PointsYep.... the script isn't loading correctly.. Don't seem to understand why though..
Philip Collins
13,249 Pointsyeah, definitely in functions.php. Might try using the meteor slides plugin in instead.
Rich Donnellan
Treehouse Moderator 27,671 PointsI'm not really sure what else could be the problem. If the script isn't being enqueued, then it's something with your function, but it looked OK to me. Maybe try:
Check to make sure there aren't any syntax errors in the rest of your
functions.phpfile. ¯_(ツ)_/¯If it's a child theme, use
get_stylesheet_directory_uri()in the function
Rich Donnellan
Treehouse Moderator 27,671 PointsHey, Philip Collins!
Checking in to see if you solved your problem?
Philip Collins
13,249 PointsNo, I ended up making a child of another theme which had this functionality instead. Thank you very much for your help man!
Rich Donnellan
Treehouse Moderator 27,671 PointsSo it was a child theme!
Could have been where it was looking for the assets:
If it's a child theme, use get_stylesheet_directory_uri() in the function
Glad you were able to get something working!
Philip Collins
13,249 Pointsno, i was making a theme from scratch, and switched to a child theme..
Thank you for helping!