CODEWITHSUNDEEP
javascriptjquerycsswordpresstwitter-bootstrap
Coltvant
Coltvant

Reputation: 314

Can't get jQuery CDN to work for WordPress plugin

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.

Upvotes: 0

Views: 1499

Answers (2)

Alireza
Alireza

Reputation: 2449

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

Upvotes: 1

Dalin Huang
Dalin Huang

Reputation: 11342

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>

Upvotes: 0

Related Questions