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

jQuery file not recognized!

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. Im sure I included it the right way as it shows up in my pages source code.

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? Here's whats in my theme.js file as of now:

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

( jQuery );

Thanks!

2 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!

Ron McCranie
Ron McCranie
7,837 Points
Ron McCranie
Ron McCranie
7,837 Points

This is very difficult to troubleshoot based on just your description of the problem. The best way to figure out a solution is to install wordpress and the theme in a development environment and then try what you're describing.

This is a shot in the dark but maybe try wrapping the jQuery you want in a document ready. Even though you're telling the theme.js to load in the footer, there is a chance it's trying to run the code before the document is ready.

$(document).ready(function()  {  
    //add dropdown icon to the dropdown sidebar widgets
    $(".panel-title").append("<p>Test</p>");
});