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

Pedro Lucas Da Silva Cunha
Pedro Lucas Da Silva Cunha
5,276 Points
Posted by Pedro Lucas Da Silva Cunha
Pedro Lucas Da Silva Cunha
5,276 Points

Not able to link JS to wordpress

Before I started watching the treehouse videos on wordpress I decided to mess around with it by myself. The way I integrated JS to wordpress was by plugging ithe js code into the footer and then linking the js relevant files in the header. This worked well (with more JS in my page I'm not sure if it would of been reliable). Following the wordpress tutorials I learned that it was better to use a safer and reliable method of linking JS to wordpress. The following is the code I used: 

//Load The Theme JS
function theme_js() {
    wp_enqueue_script(
        'theme_js',
        get_stylesheet_directory_uri() . '/js/flexslider.js',
        array( 'jquery' )
    );

    wp_enqueue_script( 'togglenav' , get_template_directory_uri() . '/js/togglenav.js'. array('jquery'), '', true ); 
}


add_action ( 'wp_enqueue_scripts', 'theme_js' );

add_action( 'wp_enqueue_scripts', 'theme_styles');

**Note that the togglenav is just for my navigation menu when it goes mobile(it becomes a drop down with a toggle button to make a drop down. I also did not use register_script because it wasn't even showing up in the header.

Now my problem was that it didn't show at all on the page. I changed it from register_script to enqueue_script and it finally showed up on the header. The only issue is that it still hasn't shown in the footer of the website. Either I missed something or my code is wrong.

8 Answers

Colin Marshall
Colin Marshall
32,861 Points
Colin Marshall
Colin Marshall
32,861 Points

This has gotta be the main problem: after '/js/togglenav.js' you have a period instead of a comma.

Colin Marshall
Colin Marshall
32,861 Points
Colin Marshall
Colin Marshall
32,861 Points

You're missing the last 2 parameters of the wp_enqueue_script for the flexslider. The very last parameter decides if the script goes in the footer. It defaults to false.

wp_enqueue_script( 'theme_js', get_stylesheet_directory_uri() . '/js/flexslider.js', array( 'jquery' ), '', true );
Colin Marshall
Colin Marshall
32,861 Points
Colin Marshall
Colin Marshall
32,861 Points

Are you sure that get_stylesheet_directory_uri() is what you want for the path to flexslider.js? If it's in the same folder as the togglenav.js then you want to instead use get_template_directory_uri().

You also haven't made it clear if only one of the JS files isn't working properly or if both aren't working properly.

Colin Marshall
Colin Marshall
32,861 Points
Colin Marshall
Colin Marshall
32,861 Points

When you are enqueueing the flexslider script, change 'theme_js' to 'flexslider'

Pedro Lucas Da Silva Cunha
Pedro Lucas Da Silva Cunha
5,276 Points
Pedro Lucas Da Silva Cunha
Pedro Lucas Da Silva Cunha
5,276 Points

Ok, looks like we figured that part out. I did forget to put that portion of the code, silly me. But now I get this in the footer:

jfunction() {
            var request, b = document.body, c = 'className', cs = 'customize-support', rcs = new RegExp('(^|\\s+)(no-)?'+cs+'(\\s+|$)');

            request = true;

            b[c] = b[c].replace( rcs, ' ' );
            b[c] += ( window.postMessage && request ? ' ' : ' no-' ) + cs;
        }());

I know someone on this forum was posting about it, I'll see if they made any headway. If you know something I don't, let me know. Thanks again Colin.

Pedro Lucas Da Silva Cunha
Pedro Lucas Da Silva Cunha
5,276 Points
Pedro Lucas Da Silva Cunha
Pedro Lucas Da Silva Cunha
5,276 Points

Sorry about that, both of them aren't working properly. At first I tried to load the slider and then after it didn't worked I decided to try and have my own navigation bar toggle button loaded, which also failed. After trying your suggestions they continued to fail but at least I now see the js links in the header and some form of js at the footer, even though it may be an error. And I agree with you on the get_template_directory_uri, it's a better choice. I think this may be a problem with the plugins I have on wordpress so I'm going to try deleting them one by one to see if that is the error.

Pedro Lucas Da Silva Cunha
Pedro Lucas Da Silva Cunha
5,276 Points
Pedro Lucas Da Silva Cunha
Pedro Lucas Da Silva Cunha
5,276 Points

Ah, you found the needle in the haystack. Thanks. That fixed the toggle button for the mobile/ipad version of the website. And now the flexslider code is showing in the source as well. Thanks. Now I can keep going on this badge. I appreciate it. Can't believe that's what did it.

Colin Marshall
Colin Marshall
32,861 Points
Colin Marshall
Colin Marshall
32,861 Points

Awesome! Glad we figured that out.

Zac Gordon
STAFF
Zac Gordon
Treehouse Guest Teacher
Zac Gordon
Zac Gordon
Treehouse Guest Teacher

Glad you got it worked out now! Great help Colin Marshall :)