Grow your CSS skills. Land your dream job.

Using JQuery in Word Press

  • # July 28, 2009 at 4:37 pm

    I am using Word Presss 2.8.1 and a child theme based in Fusion 3.0.4.

    I want to use this jquery accordeon effect on my sidebar. (http://jqueryfordesigners.com/jquery-lo … van-damme/)
    But I can’t make it work on Word Press.

    I pasted the html code on sidebar.php and the corresponding css in style.css

    The header.php already includes those lines of code:

    Code:
    < ?php if ( is_singular() ) wp_enqueue_script( 'comment-reply' ); ?>
    < ?php if(get_option('fusion_jquery')<>‘no’) { ?>
    < ?php wp_enqueue_script('jquery'); ?>
    < ?php wp_enqueue_script('fusion',get_bloginfo('template_url').'/js/fusion.js'); ?>
    < ?php } ?>

    < ?php wp_head(); ?>

    So, I guess I don’t need to call the jquery script

    I tried pasting the following code in different places: inside the <head></head> in the footer.php, I tried pasting it in the functions.php, and to include it in fusion.js, but nothing seem to work

    Code:

    I tried to make an external link to google in header.php

    Code:

    but nothing worked.

    I have so many things to put in the sidebar. It would be wonderful if I could make it work. :-(

    Rob
    # July 29, 2009 at 4:45 am

    yea well there could be many issues here – but some of the common ones are:

    2 types of library – you might have called in the library you are using and another that a widget or plugin is using… 2 different versions of jQuery loading can cause it to break. You could also be loading 2 different types of lib, like mootools and jQuery.

    Is there anyway we could get a live link – it would probably help more. :)

    # July 29, 2009 at 9:21 am

    Hi Robskiwarrior,

    As I am using a theme that uses its own jquery + the wp included jquery, I think you are right.
    I will upload the files to a server and post a link, so you can check it out.

    Thanks, so much!

    Rob
    # July 29, 2009 at 7:25 pm

    no probs – you can just pretty much take one out – if there is already a lib working, then you don’t have to worry about calling in jQuery for your functions :)

    # July 30, 2009 at 1:33 pm

    Hi, Robskiwarrior,

    I had a hard time yesterday migrating the site from my localhost to a server.

    OK let’s see:
    the html and css parts on the sidebar are ok

    the accordeon effect code is also ok.
    (I pasted it on a file.htm and it worked fine – it’s linked to jquery-1.3.1.min.js )

    So, I think the problem really is on the link to that file.

    On the header.php (on my child theme for the Fusion theme)
    the template code calls

    Code:
    < ?php if(get_option('fusion_jquery')<>‘no’) { ?>
    < ?php wp_enqueue_script('jquery'); ?>
    < ?php wp_enqueue_script('fusion',get_bloginfo('template_url').'/js/fusion.js'); ?>
    < ?php } ?>

    I’ve tried:

    1- include a call to the file I need, on header.php:

    Code:
    < ?php wp_enqueue_script('fusion',get_bloginfo('template_url').'/js/jquery-1.3.1.min.js'); ?>

    2 – pasted after wp_head() — still in header.php

    Code:

    I also paste the same code in functions.php on the Fusion theme (to kind of register the new function

    But it still doesn’t work.

    The URL is:
    http://www.idigitais.com.br/wp

    Please, don’t give up on me. What am I doing wrong?

    Thanks, for your kind attention.

    # July 30, 2009 at 2:12 pm

    What exactly is the problem, everything seems to be working fine.

    The only problem I see is on the #datacontent navigation, it looks like you need to use some html entities.

    # July 30, 2009 at 3:09 pm

    Hi, apostrophe

    The problem is that I want the first segmente of the sidebar to work like an accordeon. Right now, all the tabs are showing all the content. I want only on tab content to be viewable. All the code, I used is working well in an html file, the problem seems to arise in Word Press.

    Besides, I am using Fusion theme that seems to have its own jquery customized and also calls the jquery included in WP.

    So, when I want to call the js I need to make the script run, nothing happens.

    # July 30, 2009 at 4:11 pm

    What doctype and character encoding did you use in your html test?

    It’s not even possible to validate your wordpress page due to some none utf-8 characters http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fwww.idigitais.com.br%2Fwp%2F

    I’m not 100% sure but I think this may be connected.

    # July 31, 2009 at 3:03 pm

    Thanks, apostrophe, for pointing it out. There were some many errors. I just finished validating the whole site.
    The only errors I could not get rid of are injected by wp_banerize plugin . Apparently there is not an alt tag output for the pictures and some <li> tags on the sidebar (but I think they are important for the formatting of the accordeon thing I want to implement.

    Anyway, validating and correcting the errors didn’t help the jquery animation.

    Could you please check it out again?

    # July 31, 2009 at 3:41 pm

    Ok, well at least you validated.

    I’m no javascript ninja, but firebug is showing an error, unfortunately it doesn’t say where it is. Now I have googled the error message, which was "uncaught exception: Syntax error, unrecognized expression: ,,," (in case anybody else knows better) and as far as I can tell, it is related to the jQuery version. Now I see in Tim van Damme’s demo he is using jQuery 1.3.1 and you are using 1.3.2.
    So, out of desperation, try it using the older version of jQuery.

    # August 4, 2009 at 5:20 pm

    Hi apostrophe,

    I am back after I eliminated ALL the errors. I received a beautiful green tab in validator! (So, proud of me and so grateful to you!).

    But, I still have three problems:

    1) the tab jquery thing. I tried including :

    Code:

    but it still didn’t work.

    Is that the right way to do it? How do I include a call to the right jquery version? I tried mimicking the original code… without success.

    2) In IE 7 and IE6 the site is are all messed up!
    In IE7 the footer is right bellow the header messing up all the content. It was ok without the footer.
    I tried the sticky footer trick (I followed Chris Coyler tutorial) and it did’t work.

    In IE6 the footer does not show and the sidebar looks awful. It is appearing bellow the page and is messed up.

    Hope you can help me. I updated everything. So you can check it at:
    http://www.idigitais.com.br/wp

    Thank you VERY much!

    # August 5, 2009 at 4:15 am

    I don’t know where you are doing your validating biut I’m still getting 4 errors http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fwww.idigitais.com.br%2Fwp%2F
    Looks like you have one extra div closing tag in there, which is probably what’s messing up the layout in IE.

    Quote:
    1) the tab jquery thing. I tried including :

    Code:

    That’s fine, but the idea was to replace the newer jQuery not have both on the page.

Viewing 12 posts - 1 through 12 (of 12 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".