0

I have created a widget that creates forms. I am using the Twitter Bootstrap framework in order to style those forms. I have two instances of WP:

  • One is using the Alterna theme, which uses Bootstrap too. The forms look great on that theme.

  • The other one uses OptimizerPress, which does not use Bootstrap. The problem comes here. That theme doesn't use Bootstrap, and their CSS overwrites the definitions in Bootstrap.

So my question is:

  • How can I make my widget CSS to take high priority than the Theme CSS?

Here is how I am adding the CSS into my Widget:

class LeadCapture_Form_Widget extends WP_Widget {
    /**
     * Register widget with WordPress.
     */
    function __construct() {
        parent::__construct(
            'lc-form-widget', // Base ID
            'LeadCapture_Form_Widget', // Name
            array( 'description' => __( 'Widget that outputs a basic form with that will capture the user\'s information and submits it to the CRM.', 'text_domain' ), ) // Args
        );
        add_action( 'wp_enqueue_scripts', array( $this, 'register_plugin_styles' ) );
    }

    /**
     * Register and enqueue style sheet.
     */
    public function register_plugin_styles() {
        wp_register_style( 'lc-form-widget', plugins_url( 'LeadCapture_Form_Widget/css/form.css' ) );
        wp_enqueue_style( 'lc-form-widget' );
    }
  • How is your widget CSS loaded? – s_ha_dum Apr 3 '14 at 17:14
  • I have added that, and even though the CSS gets loaded. I see that the theme css and js are loaded after my css... – Hommer Smith Apr 3 '14 at 17:32
1

Is possible to make bootstrap css "contextualized" inside a selector, i.e. bootstrap styles works inside that selector, and thanks to css specificity rules, there them take precence over other rules.

How to do:

First of all download bootstrap less. Let's assume that this files are in 'bootstrap/less' folder.

Now create a new less file, let's assume my-bootstrap.less.

In this file put

#my-widget-container .my-widget {
    @import 'bootstrap/less/bootstrap.less';
}

Compiling this less file*, let's assume you obtain a file my-bootstrap.css. If you open this file, you'll see that it is the full bootstrap environment, but where every rule is prefixed by '#my-widget-container .my-widget'.

At this point you can remove completely the bootstrap less files, and also your less file and only keep this my_bootstrap.css file (better if minimized), then instead of enqueuing original bootstrap you can enqueue that file, and you'll have no issues with themes not using bootstrap.

However, if the theme is based on bootstrap your css file is redundant, so you should enqueue it only if bootstrap is not present:

function __construct() {
    // your stuff here
    add_action(
      'wp_enqueue_scripts',
      array( $this, 'register_plugin_styles' ),
      PHP_INT_MAX // highest priority
    );
}

public function register_plugin_styles() {

  global $wp_styles;

  $s = array_map( 'basename', wp_list_pluck($wp_styles->registered, 'src') );

  if ( ! in_array('bootstrap.css', $s ) && ! in_array( 'bootstrap.min.css', $s )  ) {
    // no one has registered bootstrap, let's register your 'my-bootstrap'
    wp_enqueue_style(
      'my-bootstrap', get_template_directory_uri() . '/my-bootstrap.css'
    );
  }  

}

Now what you have to do it's just wrap the output of your widget with

<div id="my-widget-container">
  <div class="my-widget">

   YOUR WIDGET CONTENT GOES HERE

  </div>
</div>

* How to compile a less file into a css one is out of the scope of this answer and of this site, a simple Google search will give you any guidance, if you need it.

| improve this answer | |
  • That's exactly what I was looking for. I am going to try to do so, and come back if any doubts. Thanks for taking the time to do such a complete answer. I am assuming that the process of compiling the less files does not have anything to do with wordpress, right? – Hommer Smith Apr 3 '14 at 18:17
  • Yep. I downloaded them. Having some problems with compiling them. Quite a lot of Undefined and Name errors – Hommer Smith Apr 3 '14 at 18:36
  • Double check paths.. I just tested my code using BS v3 and it worked like a charm. @HommerSmith – gmazzap Apr 3 '14 at 18:40
1

There's probably a few ways you could go about doing this:

Method 1) Enqueue your styles after theme styles - View Codex

Method 2) Use !important which will take 100% precedence - View Stack Overflow

Method 3) If you're creating your own widgets you can insert your own <style> tags which will take precedence over any external files - View Stack Overflow

I would try the above methods in that order and try to avoid Method 3 if possible, though it does exist.

| improve this answer | |
  • 2
    You'd want to enqueue after the theme's css yea? – Andrew Bartel Apr 3 '14 at 17:22
  • Opps yeah you're right. – Howdy_McGee Apr 3 '14 at 17:24
  • How could I enqueue my form styles after the theme? I mean, that widget is just used in some pages...I am not aware how/where my theme css are loaded. – Hommer Smith Apr 3 '14 at 17:35

Your Answer

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

Not the answer you're looking for? Browse other questions tagged or ask your own question.