Hey everyone! I’m working on a WordPress plugin and I want to use jQuery UI Tabs on one of my settings pages. I’ve got the scripting part sorted out, but I’m stuck on the styling.
I’ve added these lines to my code:
wp_enqueue_script('jquery');
wp_enqueue_script('jquery-ui-core');
wp_enqueue_script('jquery-ui-tabs');
The tabs work, but they look plain and boring. I know WordPress has some built-in scripts, but what about the jQuery UI Theme? Is it already there? If so, how can I use it in my plugin?
I’ve looked around but can’t find a clear answer. Any help would be awesome! I really want my tabs to look nice and match the WordPress style. Thanks in advance!
In my experience, WordPress doesn’t package jQuery UI themes by default, so you need to include your own styling. One viable solution is to take advantage of the built-in ‘wp-jquery-ui-dialog’ stylesheet by adding wp_enqueue_style(‘wp-jquery-ui-dialog’);. This can give your tabs a basic WordPress look, although it might require further CSS adjustments to fit perfectly with your tab layout.
Alternatively, you can opt for the default jQuery UI theme by linking to a CDN, for example using wp_enqueue_style(‘jquery-ui-css’, ‘https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css’);. This provides more control over the final appearance but might involve additional customization to seamlessly integrate with the WordPress admin interface.
hey mate, another option is to use wp_enqueue_style(‘wp-jquery-ui-dialog’) for a wp-friendly look. but if u want more control, grab a jquery ui theme from their site n host it locally. then use wp_enqueue_style() to add it. might need sum tweaking, but itll give ya the style ur after without relying on external cdns.
I’ve been down this road before, and it can be a bit tricky. WordPress doesn’t include jQuery UI themes by default, so you’ll need to add them yourself. Here’s what worked for me:
First, you’ll want to enqueue the jQuery UI CSS. You can either download it and include it in your plugin, or link to a CDN. I prefer using a CDN for simplicity:
wp_enqueue_style(‘jquery-ui-css’, ‘//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css’);
Add this line along with your other enqueue statements. This will give you the basic jQuery UI styling.
If you want to match the WordPress admin style more closely, you might want to look into the ‘wp-jquery-ui-dialog’ CSS that WordPress uses for its dialogs. It’s not perfect for tabs, but it’s a good starting point:
wp_enqueue_style(‘wp-jquery-ui-dialog’);
From there, you can add your own custom CSS to fine-tune the appearance. It takes some tweaking, but you can get it looking pretty slick with a bit of effort.