0

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

Community
  • 1
  • 1
sean
  • 119
  • 5
  • 13
  • possible duplicate of [TypeError: $ is not a function when calling jQuery function](http://stackoverflow.com/questions/12343714/typeerror-is-not-a-function-when-calling-jquery-function) – Explosion Pills Feb 27 '13 at 04: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.php – sean Feb 27 '13 at 04:45

2 Answers2

1

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;

kennypu
  • 5,950
  • 2
  • 22
  • 28
  • kennypu, i tried that along with what Rab had said below, still no luck... He also posted a link that had some suggestions, tried those and got the same result. Would you mind taking a look at my last comment to him and taking a deeper look, I posted the link to the page im working on and to the demo. Also you can download the source files of the demo there. – sean Feb 27 '13 at 05:19
  • it tells you right in the browser: `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. – kennypu Feb 27 '13 at 05:28
  • Ok, I sorta have it working now, moved it to the footer, now i think I just have a css issue but the effect is actually moving now. Thanks for the help. – sean Feb 27 '13 at 06:11
1

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() …

Raab
  • 34,778
  • 4
  • 50
  • 65
  • Rab, first thanks for the response, I tried everything you suggested and still no luck. Alternatively I visited your the link you posted and tried the suggestions there as well. Still no luck would you mind taking a deeper look? here is the link to the page I am trying to get it working on http://rightbraingroup.com/staff-2/ and a link to the demo of what i am trying to accomplish is here http://tympanus.net/codrops/2012/08/26/happy-birthday-3-years-of-codrops/ it is down at the bottom of the page right before the comments the image has the date 2/7/12 in the background – sean Feb 27 '13 at 05:16
  • ok do it like this `window.onload = function() { //your code };` – Raab Feb 27 '13 at 05:34
  • Ok, I sorta have it working now, someone pointed out the libray wasnt defined so it wasnt loading so they suggested move it to the footer. I did, now i think I just have a css issue but the effect is actually moving now. Thanks for the help. – sean Feb 27 '13 at 06:11
  • @RabNawaz i cant check your answer as right along with kennypu, however after I put it in the footer i still had to replace $ with jQuery. So again thanks alot for the help. cheers! – sean Feb 27 '13 at 08:31