jQuery CSS conflicts in WordPress

1 Views

I’ve created this WP plugin that uses a jQuery UI Datepicker. Works great, does exactly what I want it to do…. except any WP install already running a jQuery UI CSS will be overriden by mine. Obviously this is an issue.

Here’s my code, pretty standard.

Read More
function javascript_datepicker_booking() {
   wp_enqueue_script('jquery-ui-datepicker');
   wp_enqueue_style('jquery-ui-datepicker_style_redmond', 'http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/redmond/jquery-ui.min.css' );
}

I’ve been looking at two ways of solving this :

Option 1: Is there a way I could load the CSS ONLY IF there is no jquery CSS loaded already ?

Option 2: Is there a way to apply my stylesheet to the datepicker ONLY (i.e. not tabs etc) ?

Thanks for your suggestions !

Greg

Post Views: 1

Related posts

Leave a Reply

1 comment

  1. You could change priorty like this the cascading nature should resolve it:

     add_action( $hook, $function_to_add, $priority, $accepted_args );

    As for a css solution it’s hard to say without our html but try being more specific to only affect you own markup.

    this like section#your_wrapper > ul.your_classes.another_class increase specificity.

    Notice > selecting direct children and element names to only select elements with these classes

    Stringing classes can also increase specifity incase you want to add a special class to all of your elements

    However Since jquery ui already ships with wordpress by default you can use the dependency paremeter of wp_enqueue_script

     function javascript_datepicker_booking() {
   wp_enqueue_script('jquery-ui-datepicker');
   wp_enqueue_style('jquery-ui-datepicker_style_redmond', 'http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/redmond/jquery-ui.min.css', 'jquery-ui` );

    }