CSS not pulling in for jQuery UI dialog

I want to add a jQuery dialog modal to a form page. When the dialog box is triggered I see the the text content but with no CSS. I'm pulling in the jquery in the functions.php for the page:

wp_enqueue_script('jquery-ui-dialog');

The jquery css (jquery-ui-dialog.css) is under my wp-includes/css directory. I tried adding

wp_enqueue_style('jquery-ui-dialog');

but it not work. Does anybody know the proper way to enable jQuery Dialog.

I want to add a jQuery dialog modal to a form page. When the dialog box is triggered I see the the text content but with no CSS. I'm pulling in the jquery in the functions.php for the page:

wp_enqueue_script('jquery-ui-dialog');

The jquery css (jquery-ui-dialog.css) is under my wp-includes/css directory. I tried adding

wp_enqueue_style('jquery-ui-dialog');

but it not work. Does anybody know the proper way to enable jQuery Dialog.

• jquery

Share Improve this question asked Jul 13, 2011 at 17:44 ClutchClutch 19711 silver badge55 bronze badges 2

• 6 wp_enqueue_style( 'wp-jquery-ui-dialog' ); – Tom Auger Commented Oct 31, 2011 at 17:13
• 3 Also make sure that you add the 'wp-dialog' class to the dialog itself, so it can take advantage of those styles. They're pretty ugly though. Might be better off using the jQuery UI themed styles anyway. – Tom Auger Commented Oct 31, 2011 at 17:18

Add a comment  | 

2 Answers 2

Sorted by: Reset to default 8

There is no jquery-ui-dialog style defined in WordPress Out of the box, you need to ue the stylesheets manually, when i needed to enqueue the jQuery-UI style i pulled it from google api CDN

wp_enqueue_style('jquery-style', 'http://ajax.googleapis/ajax/libs/jqueryui/1.8.2/themes/smoothness/jquery-ui.css'); 

but you can enqueue a local copy if you want like this:

wp_enqueue_style( 'myStylesheet', WP_PLUGIN_URL . '/path/stylesheet.css' );

You can include the jquery-ui-dialog style in frontend using:

wp_enqueue_style( 'wp-jquery-ui-dialog' );