Jquery UI and WordPress

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?

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: https://www.stimadesigns.com/hunterdonbrew/our-portfolio/beer/

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

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="https://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 .

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.

(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 (https://pastebin.com/6W54xBCa)

I know there is a typo in the get_template_directory_url

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

In case you need it here is the code for the Jquery flip (https://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.

Try it with this header.php: https://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.

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