Okay, I am trying to add the following jquery in my header.php file for my wordpress website:
<script type="text/javascript">
$(function() {
$( '#co-slider' ).circleslider()
});
</script>
This is copied directly from the html source file I downloaded, ive spent the past 3 hours trying to come to a conclusion for the problem, however I am a nebie when it comes to wordpress. So far all I have been able to gather is that it is possibly because of no conflict mode. I tried reading up on no conflict here http://api.jquery.com/jQuery.noConflict/ along with following instructions I thought were relevant from another question and here is the link for that jquery not working in wordpress . Also I dont think this is the issue but this is how I referenced my javascript.
<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/staff_new/js/jquery.circleslider.js"></script><script type="text/javascript" src="<?php bloginfo('template_url'); ?>/staff_new/js/jquery.circleslider.js"></script>
I say i dont think its the issue because this is how I have it for other things as well and they work just fine, but it is also possible im clueless as to what im talking about. I also read here http://codex.wordpress.org/Function_Reference/wp_enqueue_script for referencing I should be using wp enqueue. But I also read that the way I currently have it works just fine. Any help would be greatly appreciated, as i would really love to get this working for the site.
Cheers
-
possible duplicate of TypeError: $ is not a function when calling jQuery functionExplosion Pills– Explosion Pills2013年02月27日 04:35:21 +00:00Commented Feb 27, 2013 at 4:35
-
I copied and pasted it directly from the files i downloaded, if thats the issue why would it work when i run the files locally before trying to implement to the header.phpsean– sean2013年02月27日 04:45:41 +00:00Commented Feb 27, 2013 at 4:45
2 Answers 2
it's because by default, wordpress loads jQuery to the jQuery namespace, not $. so you can change the $ to jQuery instead, or, do what I usually do which is to make a reference to jQuery before your jQuery code:
var $ = jQuery;
3 Comments
jQuery is not defined which means that when you're executing the code, jQuery is not defined yet; in other words, you're trying to load the code before jquery is loaded. put your code in the footer and it should work.You can make everything working as
jQuery(function($) {
$( '#co-slider' ).circleslider()
});
In WordPress, the$() syntax is always used by other scripting library, and causing the conflict issue and fail to call the jQuery function. You should use jQuery() instead...
Alternatively, you can use noConflict() ...
4 Comments
window.onload = function() { //your code };