This is my first plugin, and I'm having a real hard time figuring out enqueuing styles/scripts. All the code I wrote for the plugin works great, but I'm having issues with stylesheets and Bootstrap. I have a custom stylesheet I wrote specifically for the plugin, and I enqueued it. I also use Bootstrap CSS and JS, so I enqueued that as well. Here's how I did it:

function add_external_scripts_styles () {
 wp_enqueue_style('bootstrap-min-css', plugin_dir_url( __FILE__ ) . 'bootstrap.css');
 wp_enqueue_style ('style', plugin_dir_url(__FILE__) . 'style.css');

 wp_enqueue_script( 'jquery', plugin_dir_url( __FILE__ ) . 'jquery-3.2.1.js', array( 'jquery' ), '3.2.1', true );
 wp_enqueue_script( 'my_jquery', plugin_dir_url( __FILE__ ) . 'my_jquery.js', array( 'jquery' ), '1.0', true );
 wp_enqueue_script('bootstrap-min-js', plugin_dir_url( __FILE__ ) . 'bootstrap.min.js');
add_action( 'wp_enqueue_scripts', 'add_external_scripts_styles');

I noticed with the twenty seventeen theme, Bootstrap is working, but my CSS is being overwritten by the theme's stylesheet. I have to use !important for my CSS to work, and I'd rather avoid that.

With Divi, the theme I really need this plugin to work for, my Bootstrap JS won't work. When I inspect it, it's not loading at all for some reason. It does load with twenty seventeen, however. CSS is the same issue as with Twenty Seventeen.

Is there a way I can make sure that the custom CSS I wrote for the plugin gets used, and that Bootstrap will always load regardless of the theme? The plugin is basically a bunch of HTML with some JavaScript , and then I load the plugin on a page by using a shortcode. Not sure if that will change anything.

I know there are several posts about enqueuing, but I haven't found anything that works for me. I'm fairly confident I enqueued the styles/scripts correctly, they're just being overwritten. I am building this on a local host, but I can install the plugin on a live site if you want to see it that way. Please let me know in the comments. Thanks for any help!

  • If they are being overwritten because of their order, you can increase the priority of your action. Otherwise, you need to dig into the CSS files. – Jack Johansson Jun 27 '17 at 16:51
  • So I tried changing the priority, but that didn't seem to work. What do you mean by digging into the CSS files? – Coltvant Jun 27 '17 at 18:42
  • CSS files have priority too. for example, header h1 overrides h1, no matter the order of the files, because it has a higher priority. You should find and correct these manually. – Jack Johansson Jun 27 '17 at 19:45
  • Ah, gotcha. That makes sense. It looks like you're very active the WP Stak Exchange site...any idea about the Boostrap JS issue? – Coltvant Jun 27 '17 at 19:57
  • 1
    Divi is pretty awesome as a stand alone theme, I will say that. All the other scripts are loading fine, so I'll try enqueuing Bootstrap in the footer. Thanks for your help. – Coltvant Jun 27 '17 at 20:10

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.