WordPress.org

Support

Support » How-To and Troubleshooting » Jquery UI and WordPress

Jquery UI and WordPress

  • I know it’s possible to use Jquery UI with WordPress, but it is involved. I want to use Jcoverflip and I started using there installation instructions, but it they are not for WordPress so I did my best to adapt. I loaded three Java scripts and included <?php wp_enqueue_script('jquery');?> in my header. I also included this in my header:

    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript" src="jquery.ui.js"></script>
    <script type="text/javascript" src="jquery.jcoverflip.js"></script>

    I am stuck on this step: http://www.jcoverflip.com/documentation/getting-started

    I am not even sure what I’ve already done is correct. Also I have read about jQuery.noConflict(); but I am not sure how to or where to insert it. Also, when I get this up and running can I use a different Jquery UI on a different page?

Viewing 15 replies - 1 through 15 (of 17 total)
  • Moderator keesiemeijer

    @keesiemeijer

    Try enqueuing your scripts with this in your theme’s functions.php:

    function my_scripts_method() {
       // Change the uri to where jquery.jcoverflip.js is at.
       wp_register_script('jcoverflip',
           get_template_directory_uri() . '/js/jquery.jcoverflip.js',
           array('jquery'), null);
    
       wp_enqueue_script('jquery-ui', 'https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js', array('jquery'), '1.8.16');
       wp_enqueue_script('jcoverflip');
     }
      add_action('wp_enqueue_scripts', 'my_scripts_method');

    I usually replace all “$” with jQuery to resolve the noConflict mode.

    <script>
     jQuery(function(){
        jQuery('#flip').jcoverflip();
    
      });
    </script>

    Maybe you have to do a search for “$” and replace it with”jQuery” on the jquery.jcoverflip.js file as well.

    I am going to try this right now. Does`<script>
    jQuery(function(){
    jQuery(‘#flip’).jcoverflip();

    });
    </script>`go in the header?

    Moderator keesiemeijer

    @keesiemeijer

    Yes, it goes in the header just before the closing </head> tag.

    I don’t know what I’m doing wrong. Here’s the page I am trying to put the code into: http://www.stimadesigns.com/hunterdonbrew/our-portfolio/beer/

    I know I am missing something I just can’t see what it is.

    Moderator keesiemeijer

    @keesiemeijer

    Try getting these links out of the header:

    <script type="text/javascript" src="jquery-1.7.js"></script>
    <script type="text/javascript" src="jquery-ui-1.8.16.custom.js"></script>
    <script type="text/javascript" src="http://www.stimadesigns.com/hunterdonbrew/wp-content/themes/LondonLive/js/jquery.jcoverflip.js"></script>

    Did you put the enqueue code in your functions.php?

    I did put the enqueue code in my functions.php. But maybe I did not have the proper location for the file. I am going to try that next. It doesn’t matter where in the functions.PHP the code appears does it? I don’t think it does but maybe I’m wrong. I put the code at the end of the function.php .

    Moderator keesiemeijer

    @keesiemeijer

    It doesn’t matter where in the functions.PHP the code appears does it?

    No it doesn’t, but try putting it just after the opening php tag <?php

    I had a typo (I had .uri instead of .url) but now my page will not load. While this is a setback, I feel as though I am getting closer.

    Moderator keesiemeijer

    @keesiemeijer

    (I had .uri instead of .url)

    Don’t know what you mean by that?

    Please revert your changes and paste and submit the full code of header.php and functions.php of your theme into a pastebin.com and post the link to it here? see the Forum Rules for posting code and using the pastebin.

    Here is my functions.php (http://pastebin.com/6W54xBCa)

    I know there is a typo in the get_template_directory_url

    Here is my header.php (http://pastebin.com/6tA4J4TW

    In case you need it here is the code for the Jquery flip (http://pastebin.com/t3SPsZfV

    I put everything back to the way it was.

    I greatly appreciate your help. Once we get this working I have a question about the function that we added. I want to fully understand exactly what it’s doing so I know how to do it myself next time.

    Moderator keesiemeijer

    @keesiemeijer

    Try it with this header.php: http://pastebin.com/g7LfJn0n

    I think what’s in your functions.php is alright.
    the file jquery.jcoverflip.js is in your theme folder: wp-content/themes/yourtheme/scripts/js/jquery.jcoverflip.js ?

    I tried it with the header you gave me and still no success. That is where I have the jquery.jcoverflip.js. If there is anything else you can think of I would appreciate it otherwise I’ve taken up enough of your time. Thank you for your patience.

    Moderator keesiemeijer

    @keesiemeijer

    I see that jquery.jcoverflip.js is loaded. So that is a good thing.

    The strange thing is that jquery and jquery-ui.min.js are loaded from your theme and not, as is usual, wp-includes.

    I will take a better look at the two files you put in the pastebin

    Im not sure if I am looking in the right spot, but when I look in the folder wp-includes/js/jquery the file jquery-ui.min.js is not in there, but jquery.js is. I’m not sure if that is where they are supposed to be located. jquery-ui.min.js is located in my theme/scripts/js. I don’t know if this helps but I thought I would pass it along.

    keesiemeijer did you have any luck finding anything in the two files that I put in pastebin. Thanks

Viewing 15 replies - 1 through 15 (of 17 total)
  • The topic ‘Jquery UI and WordPress’ is closed to new replies.