0

My WordPress plugin uses Chosen Select and is supposed to use the css file at my-plugin/assets/resources/chosen.min.css.

Unfortunately, when another plugin also uses Chosen Select, my plugin has a tendency to grab styles from the other css file instead.

For example, it's currently getting styles from yith-woocommerce-ajax-search/plugin-fw/assets/css/chosen/chosen.css which messes up all my custom styling.

What's the best way to make sure an installation of Chosen Select (or other common things that have their own syling) doesn't get styles from other css files?

Here's how I register the stylesheet.

function lsmi_load_admin_script() {
    wp_register_style( 'chosencss', plugins_url( 'assets/resources/chosen.min.css', __FILE__ ), true, '', 'all' );
    wp_enqueue_style( 'chosencss' );

}
  • 1
    you could increase the specificity of your own rules so they override others in the case of your markup. – Milo Mar 6 '16 at 17:42
2

There really is no foolproof method to detect a style sheet from other plugins or from a theme and then "switching them off". You can only guess that other plugins and themes will be using the same handle as you to register the style sheet with. It is however much easier if your plugin is for personal use only, then you can manually go through a plugin, get the handle of the conflicting style sheet and deregister it yourself

You can also give your wp_enqueue_scripts action a very low priority (very high number) in order to load your style sheet as late as possible

add_action( 'wp_enqueue_scripts', 'lsmi_load_admin_script', PHP_INT_MAX );
function lsmi_load_admin_script() 
{
    // Deregister and dequeue other conflicting stylesheets
    wp_dequeue_style( 'chosencss' );
    wp_deregister_style( 'chosencss' );

    // Add your own stylesheet
    wp_register_style( 'chosencss', plugins_url( 'assets/resources/chosen.min.css', __FILE__ ), true, '', 'all' );
    wp_enqueue_style( 'chosencss' );
}
  • Will this potentially cause problems for other plugins using the chosencss handle? – j8d Mar 7 '16 at 2:48
  • My code will, as it stands, dequeue and deregister any style sheet which uses the chosencss handle (because you cannot enqueue two stylesheets with the same handle), and rather use your copy, so it can cause that those styles of those plugins do not display as intended because it will use your stylesheet. – Pieter Goosen Mar 7 '16 at 4:19
1

The best way to avoid CSS/JS conflict between plugins is to enqueue in the right place.

I mean, enqueue the style/script right when the script is needed and not in the registration of the styles/scripts.

function lsmi_load_admin_script() {
    wp_register_style( 'chosencss', plugins_url( 'assets/resources/chosen.min.css', __FILE__ ), true, '', 'all' );
}

add_action( 'wp_enqueue_scripts' , 'lsmi_load_admin_script' );

/* When you really need the style/script - use it */
function use_my_style () {
    wp_enqueue_style('chosencss');
}

This way, if you don't need a style in a certain page, you can do an if/else, according to the page/post that is going to display the style/script

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.