Question

I am in a situation where I have two WordPress plugins that include the jquery-ui.css and the last plugin that gets loaded overwrites the first plugin’s css. I would like both themes to load. I know the jQuery theme builder supports CSS scoping, but neither of these plugins take advantage of this feature, and editing the plugin isn’t a reasonable option (since changes will be overwritten next time I update the plugin). Is there any way I can programmatically implement the scoping, by adding some JavaScript to my theme?

Answer 1

First, you have to be able to scope at least one of the plugins’ output by marking its container (or use additional wrapping ) by some class. For that class to take effect you need to download a new package build filling CSS Scope with your class selector that would be .class. Theme Folder Name is where your new scoped css will be into. Check this page for details.

.

WordPress

To keep things nice and clear under WordPress, register new CSS. Inside your theme’s functions.php:

wp_register_style( 'myScopedjQueryUICss', get_stylesheet_directory_uri() . '/scopedjQueryUICssDirectory/ui.all.css' );

Last, enqueue this styles where you need them. Common way to do that is to hook following line to wp_print_styles action.

function hookScopedCss() { 
   if ( wp_style_is( 'myScopedjQueryUICss' ) || 
        wp_style_is( 'myScopedjQueryUICss', 'done' ) )
   { return; }
   wp_enqueue_style( 'myScopedjQueryUICss' );
}
add_action('wp_print_styles', 'hookScopedCss' );