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

WordPress

Philip Collins
Philip Collins
13,249 Points

I'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
MOD
Rich Donnellan
Treehouse Moderator 27,696 Points

Any 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
MOD
Rich Donnellan
Treehouse Moderator 27,696 Points

Hmmm ... 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
Philip Collins
13,249 Points

Changed 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
Rich Donnellan
Treehouse Moderator 27,696 Points

Can you confirm the script is loading? Either add a console.log("I'm loaded! ?"); or check the DOM in your dev tools.

Rich Donnellan
MOD
Rich Donnellan
Treehouse Moderator 27,696 Points

Are 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
Philip Collins
13,249 Points

I 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
Rich Donnellan
Treehouse Moderator 27,696 Points

No 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
Philip Collins
13,249 Points

I 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
Philip Collins
13,249 Points

Yep.... the script isn't loading correctly.. Don't seem to understand why though..

Philip Collins
Philip Collins
13,249 Points

yeah, definitely in functions.php. Might try using the meteor slides plugin in instead.

Rich Donnellan
MOD
Rich Donnellan
Treehouse Moderator 27,696 Points

I'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.php file. ¯_(ツ)_/¯

  • If it's a child theme, use get_stylesheet_directory_uri() in the function

Philip Collins
Philip Collins
13,249 Points

No, I ended up making a child of another theme which had this functionality instead. Thank you very much for your help man!

Rich Donnellan
Rich Donnellan
Treehouse Moderator 27,696 Points

So 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
Philip Collins
13,249 Points

no, i was making a theme from scratch, and switched to a child theme..

Thank you for helping!