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

JavaScript

Posted by Boris Kamp
Boris Kamp
16,660 Points

specific jQuery file is not working for me

Hi people!

Im working on a bootstrap based wp theme and want to include my own jQuery code aside from the bootstrap one. Im working in a file called 'theme.js' and it is included in the functions.php with 

wp_enqueue_script( 'theme_js', get_template_directory_uri() . '/js/theme.js', array('jquery', 'bootstrap_js'), '', true );

Im using the bootstrap theme from the course here as a base so I expect everything to work fine.

but when I add this code to my theme.js file:

$(".panel-title").append("<p>Test</p>");

It does not work! no changes seen in the browser. I did empty my cache and all that stuff.

Am I missing something?

Thanks!

3 Answers

Boris Kamp
Boris Kamp
16,660 Points

I found out wordpress is running jQuery in noconflict mode, this caused the '$' to not be recognized and caused the undefined is not an option error. So I entered this on top of my theme.js file:

var $ =jQuery.noConflict();

and now it finally works!

Nicholas Read
Nicholas Read
2,958 Points

Ah the no conflict issue! Glad you got it sorted Boris!

Nicholas Read
Nicholas Read
2,958 Points
Nicholas Read
Nicholas Read
2,958 Points

I'm not familiar with how wordpress loads JS files but a good place to start is checking that your JS is being loaded on your site. Open your site in google Chrome. Open up the Developer tools (option + command + i on mac) Click the 'sources' tab at the top of the Developer tools window and browse the list of sources. If you can't find your theme.js file then it's not being loaded.

If it is there but not working then test your jquery code in the console tab of the developer tools and you can run it directly on your page - literally just copy and paste $(".panel-title").append("<p>Test</p>"); into the console window. If that works then at least you know it's an issue with the loading of the JS file and not your code.

Hope that helps with tracking down your issue!

Boris Kamp
Boris Kamp
16,660 Points

Thank you for your reply Nicholas! I was sure it was included the right way, it did show up in sources and in my page source code as well.

When I try the command in the console, as you mentioned, I get this error: 

Uncaught TypeError: undefined is not a function
on line 2 of theme.js

and that line contains the .append jquery code mentioned in my first post.

Anyone any idea how to get javascript working here?

This is in my theme.js right now:

//add dropdown favicon to the dropdown sidebar widgets
$(".panel-title").append("<p>TestTestTest</p>");

( jQuery );

Thanks!

Boris Kamp
Boris Kamp
16,660 Points
Boris Kamp
Boris Kamp
16,660 Points

Please, is there anybody who can help me out with this? It is really important for my project!

Thanks!