WordPress.org

1. astima
   Member
   Posted 6 months ago #

   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?

2. keesiemeijer
   moderator
   Posted 6 months ago #

   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.

3. astima
   Member
   Posted 6 months ago #

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

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

4. keesiemeijer
   moderator
   Posted 6 months ago #

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

5. astima
   Member
   Posted 6 months ago #

   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.

6. keesiemeijer
   moderator
   Posted 6 months ago #

   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?

7. astima
   Member
   Posted 6 months ago #

   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 .

8. keesiemeijer
   moderator
   Posted 6 months ago #

   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

9. astima
   Member
   Posted 6 months ago #

   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.

10. keesiemeijer
    moderator
    Posted 6 months ago #

    (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.

11. astima
    Member
    Posted 6 months ago #

    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.

12. keesiemeijer
    moderator
    Posted 6 months ago #

    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 ?

13. astima
    Member
    Posted 6 months ago #

    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.

14. keesiemeijer
    moderator
    Posted 6 months ago #

    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

15. astima
    Member
    Posted 6 months ago #

    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.

16. astima
    Member
    Posted 6 months ago #

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

17. astima
    Member
    Posted 6 months ago #

    Would you be able to recommend anywhere else I could post this question. I know Jquery has a fourm.

18. keesiemeijer
    moderator
    Posted 6 months ago #

    I'm 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

    jquery-ui.min.js doesn't ship with wordpress that's why we try to load it from google (in functions.php).
    

    wp_enqueue_script('jquery-ui', 'https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js', array('jquery'), '1.8.16');

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

    No, your theme must load jquery from another template file.

    Since this is a commercial theme with its own functionality and support system, I recommend you contact the theme developer for assistance.

Reply

You must log in to post.