Solved

How to include jquery and jquery ui (slider) properly in wordpress

Posted on 2014-04-20

1 solution

840 Views

Last Modified: 2014-05-07

Hi

I have a page in wordpress which i can get to work by doing the following and adding this directly to the page

  <!-- Load jQuery and jQuery UI -->
  <script src="//code.jquery.com/jquery-1.9.1.js"></script>
  <script src="//code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
        
  <!-- Load the jQuery UI CSS -->
  <link rel="stylesheet" href="//code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />

<script>
  <!-- jQuery UI Slider code -->
  $(function() { etc

Open in new window

Ive tried adding the jquery properly in the functions file but it doesnt work

function my_scripts_method() {	
   		wp_deregister_script('jquery');
   		wp_register_script('jquery', "//code.jquery.com/jquery-1.9.1.js", false, null);
   		wp_enqueue_script('jquery');

		wp_deregister_script('jquery-ui');
		wp_register_script('jquery-ui', '//code.jquery.com/ui/1.10.3/jquery-ui.js', false, null);
		wp_enqueue_script('jquery-ui');
	}

Open in new window

add_action( 'wp_enqueue_scripts', 'my_scripts_method' );

But this doesnt work and I cant get a slider to dispay on my page as I can when include the files directly

thanks

Comment

Question by:andieje

[X]

Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

Help others & share knowledge
Earn cash & points
Learn & ask questions

Join The Community

4 Comments

LVL 70

Expert Comment

by:Jason C. Levine

ID: 400115612014-04-20

WordPress includes JQuery and JQueryUI by default...it's part of the core load-in.

I'm thinking that by attempting to do the above you are a) breaking something and/or b) your slider is bombing out for a different reason.

Accepted Solution

by:andieje

andieje earned 0 total points

ID: 400157882014-04-22

Hi Jason

For one :) I couldnt get any jquery or jquery ui to work in wordpress even though it is supposed to be loaded by default. I could get it to work by adding jquery and jqueryui scripts directly to the page code from googls cdn and it was fine.

I also managed to load jquery and jqueryui through the enqueue_scripts function so i could remove the includes from the page and that all works fine now. I believe you are supposed to do it like this in the functions file so that plugins dont cause conflicts.

However even though i have a working solution i am now most curious why jquery didnt work for me 'by default' in wordpress. Is there a setting in the admin panel or something i dont know about?

thanks

LVL 70

Expert Comment

by:Jason C. Levine

ID: 400158182014-04-22

Nope, it should have just worked. I wonder if the theme you are using unenqueued JQuery or some other weird thing?

Anyway, using enqueue is the correct way to go, so you figured it out.

Author Closing Comment

by:andieje

ID: 400466302014-05-07

I figured out the solution myself and posted the approach used

Featured Post

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Update and Secure Legacy PHP Scripts wih filter_input_array and PDO Prepared Statements

Article by: John

Many old projects have bad code, but the budget doesn't exist to rewrite the codebase. You can update this code to be safer by introducing contemporary input validation, sanitation, and safer database queries.

VBA How To Decompress a Gzip Response From a HTTP Request

Article by: Shai

There are times when I have encountered the need to decompress a response from a PHP request. This is how it's done, but you must have control of the request and you can set the Accept-Encoding header.

How to Update Your WordPress Site Version

Video by: Alex

The purpose of this video is to demonstrate how to update a WordPress Site’s version. WordPress releases new versions of its software frequently and it is important to update frequently in order to keep your site secure, and to get new WordPress…