Can't get jQuery CDN to work for WordPress plugin

Question

I'm building my first WordPress plugin and I've run into some trouble. I first created a custom page template with a contact form I created. It used Bootstrap JS, Bootstrap CSS, jQuery, and then jQuery UI for a datepicker. It also used an external stylesheet. Everything worked really well. I'm now turning this page template into a plugin so that I can use it across several websites easily, and to easier pull the theme's default design. I originally added Bootstrap JS, Bootstrap CSS, jQuery, and jQuery UI in the head of the .php file like this:

<head>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <link rel="stylesheet" type="text/css" href="/chem-dry-contact/style.css" media="screen">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
    <link rel="stylesheet" type="text/css" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
</head>

I now understand this isn't the best way to link to external stylesheets and scripts for WordPress, and especially not for a plugin. But it did work before.

I was able to get all my html to show up as a plugin with a shortcode and everything, but it doesn't look like all of the external files are working. Here's how I set it up with WordPress's enqueue function:

function add_plugin_scripts() {
  wp_enqueue_script( 'jquery-3.2.1', '/wp-content/plugins/ChemDry-PriceQuote/jquery-3.2.1.js', array(), null, true);
  wp_enqueue_script('bootstrap-js', 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js', array(), null, true);
}
add_action( 'wp_enqueue_scripts', 'add_plugin_scripts' );

function add_plugin_styles () {
    wp_enqueue_style('style', '/wp-content/plugins/ChemDry-PriceQuote/style.css');
    wp_enqueue_style('bootstrap', 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css');
}
add_action( 'wp_enqueue_scripts', 'add_plugin_styles' );

My external CSS is working, and I think my Bootstrap CSS is working, but I don't think jquery and Bootstrap JS are working. The functionality it provided when I had it set up as a page template is no longer working, and when I tested it out by commenting out the jQuery line in my page template version, I got the exact same result as I'm getting now. I did already try to deregister jquery first and then try to reregister it...but that didn't work either.

Now I've read that WordPress comes with jQuery...but if I don't add it, I don't get the functionality I need. I've looked all over Stack Overflow for an answer but I can't quite seem to get this to work.

Again, this is my first plugin I've developed so I'd appreciate any help. Thank you.

Alireza · Answer 1 · 2017-06-06T16:20:21.427

1

Wordpress come with jquery and you should use JQuery keyword instead of $ at beginning of your statements.

You can check Following links aswell :

jquery is not defined in wordpress

not defined using JQuery

also You can Take look at following link for make $ work again:

Using ‘$’ instead of ‘jQuery’ in WordPress

edited Jun 06 '17 at 16:20

answered Jun 06 '17 at 16:12

Alireza

2,319
2
23
35

That's very helpful, thank you. So what about Bootstrap JS? Will that have an issue running jQuery? – Coltvant Jun 06 '17 at 16:43
@Coltvant bootstrap should work fine. if it inserted after jquery since JQuery is required by BootstarpJS. please check following link. it makes sure that jquery loaded before Bootstrap https://stackoverflow.com/questions/26583978/how-to-load-bootstrap-script-and-style-in-functions-php-wordpress I checked BootstrapJS code and since it uses self-invoking functions like the one mentiones in https://wordpress.stackexchange.com/questions/2895/not-defined-using-jquery-in-wordpress i don't think there will be any problem. – Alireza Jun 06 '17 at 16:54

Dalin Huang · Answer 2 · 2017-06-06T15:51:48.293

0

Try this, order matters, usually you want to load style first. Then you need jQuery loaded, then load bootstrap since bootstrap require jQuery.

// A $( document ).ready() block.
$(document).ready(function() {
  console.log("jQuery ready!");
});

<head>
  <link rel="stylesheet" type="text/css" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <link rel="stylesheet" type="text/css" href="/chem-dry-contact/style.css" media="screen">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>

edited Jun 06 '17 at 15:51

answered Jun 06 '17 at 15:49

Dalin Huang

11,212
5
32
49

Ok, I will try that. However, it was working when I had everything in the `` section. I was under the impression that I should be including external stylesheets and scripts using WP's enqueue function? Especially for a plugin. Is that not the case? – Coltvant Jun 06 '17 at 15:51
@Coltvant put js before the closing `
` tag so all your html are loaded
– Dalin Huang Jun 06 '17 at 15:54
@Coltvant style should go to `` so the HTML are styled as soon as possible. – Dalin Huang Jun 06 '17 at 15:54

Can't get jQuery CDN to work for WordPress plugin

2 Answers2