Title: Basic Instructions
Last modified: August 20, 2016

---

# Basic Instructions

 *  [EarlSnappy](https://wordpress.org/support/users/earlsnappy/)
 * (@earlsnappy)
 * [13 years, 3 months ago](https://wordpress.org/support/topic/basic-instructions/)
 * Hi I’m using the code below on my page, and it works fine, but I don’t want the
   code on the actual WordPress page, I want it in headers or elsewhere because 
   if input I on the page itself it creates space. I didn’t understand the instructions
   for adding to the text field on the options page, and although I’m no dummy I’m
   no coder – newbies like me need examples, otherwise we wouldn’t need plugins 
   in the first place. If anyone can help with this I’ll provide a step by step 
   instruction manual with screen shots (idiot’s guide) to make it easier for everyone
   to use what is a potentially great plugin. Earl…
 * <script src=”[http://code.jquery.com/jquery-1.9.0.js”></script&gt](http://code.jquery.com/jquery-1.9.0.js”></script&gt);
   
   <script src=”[http://code.jquery.com/ui/1.10.0/jquery-ui.js”></script&gt](http://code.jquery.com/ui/1.10.0/jquery-ui.js”></script&gt);
   <button id=”opener”>open the dialog</button> <div id=”dialog” title=”Dialog Title”
   >I’m a dialog</div> <script> $( “#dialog” ).dialog({ autoOpen: false }); $( “#
   opener” ).click(function() { $( “#dialog” ).dialog( “open” ); }); </script>
 * All I want on the actual wordpress page is :
 * <button id=”opener”>open the dialog</button>
    <div id=”dialog” title=”Dialog 
   Title”>I’m a dialog</div>
 * [http://wordpress.org/extend/plugins/jquery-ui-widgets/](http://wordpress.org/extend/plugins/jquery-ui-widgets/)

Viewing 5 replies - 1 through 5 (of 5 total)

 *  Plugin Author [David Gwyer](https://wordpress.org/support/users/dgwyer/)
 * (@dgwyer)
 * [13 years, 3 months ago](https://wordpress.org/support/topic/basic-instructions/#post-3439400)
 * Hi Earl,
 * Thanks for using the Plugin. 🙂
 * It is designed to add all scripts in the header so you can just add clean HTML
   markup in your posts/pages.
 * Here are the steps:
 * 1. Add your jQuery code to the Plugin options page, and Save. In your case it
   will be something like:
 *     ```
       jQuery(document).ready(function($) {
           $( "#dialog" ).dialog({ autoOpen: false });
           $( "#opener" ).click(function() { $( "#dialog" ).dialog( "open" ); });
       });
       ```
   
 * 2. Then on a post/page in Text mode add:
 *     ```
       <div id="dialog" title="Basic dialog">
         <p>This is an animated dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
       </div>
       <button id="opener">Open Dialog</button>
       ```
   
 * 3. That’s it. Save and view your page.
 * Following the above steps you can easily add any jQuery UI widgets to your site
   as described on the official site: [http://jqueryui.com/](http://jqueryui.com/).
 *  Thread Starter [EarlSnappy](https://wordpress.org/support/users/earlsnappy/)
 * (@earlsnappy)
 * [13 years, 3 months ago](https://wordpress.org/support/topic/basic-instructions/#post-3439404)
 * Hi David, thanks very much, I’m not sure why I couldn’t get it working before,
   but is now working…I’ve uploaded the custom stylesheet (and no warning message),
   but am not sure how to get it working on the page – do I have to declare the 
   style/class on the page? e.g.
    <div id=”dialog” title=”Basic dialog” **style=””
   custom/whatever”**> – the filename is jquery-ui-1.10.0.custom.css – a custom 
   option does not appear on the available themes droplist on the settings page
 * I also tried changing the theme from the standard ‘UI light’ in the setting to
   Eggplant, just to see what happens, but no change on the page
 * [http://surfacedeals.co.uk/jquery-ui-widgets-add-shortcode-via-davids-method/](http://surfacedeals.co.uk/jquery-ui-widgets-add-shortcode-via-davids-method/)
 * Also, does the plugin put the script into a header? (e.g. Mythme/header.php) 
   the reason I’m asking is because of concerns of overwrites of the script when
   my theme is updated (twenty eleven)
 * Many thanks Earl
 *  Plugin Author [David Gwyer](https://wordpress.org/support/users/dgwyer/)
 * (@dgwyer)
 * [13 years, 3 months ago](https://wordpress.org/support/topic/basic-instructions/#post-3439407)
 * Hi Earl,
 * The Plugin add the scripts to the header yes.
 * You can add some custom CSS directly to the Plugin options too if you need to,
   but if you want to add a CSS file then you can enqueue it in the normal way. 
   You could write a simple Plugin to do this if necessary.
 * [http://codex.wordpress.org/Function_Reference/wp_enqueue_style](http://codex.wordpress.org/Function_Reference/wp_enqueue_style)
 *  Thread Starter [EarlSnappy](https://wordpress.org/support/users/earlsnappy/)
 * (@earlsnappy)
 * [13 years, 3 months ago](https://wordpress.org/support/topic/basic-instructions/#post-3439408)
 * Hi David, thanks for that, but, I’m a bit confused. In the options I can upload
   my custom css file, but I need to write a plugin to use the css file? (Themeroller).
   Or do I just paste the css from the themeroller file into the text area, and 
   update? I’m sure I’ve done that before, and it didn’t work, regards, Earl
 *  Plugin Author [David Gwyer](https://wordpress.org/support/users/dgwyer/)
 * (@dgwyer)
 * [13 years, 3 months ago](https://wordpress.org/support/topic/basic-instructions/#post-3439409)
 * No, I meant if you don’t add you custom CSS to the Plugin options page direct
   you can enqueue any custom CSS file via a Plugin if you need to. The choice is
   up to you.

Viewing 5 replies - 1 through 5 (of 5 total)

The topic ‘Basic Instructions’ is closed to new replies.

 * ![](https://ps.w.org/jquery-ui-widgets/assets/icon.svg?rev=1430096)
 * [jQuery UI Widgets](https://wordpress.org/plugins/jquery-ui-widgets/)
 * [Frequently Asked Questions](https://wordpress.org/plugins/jquery-ui-widgets/#faq)
 * [Support Threads](https://wordpress.org/support/plugin/jquery-ui-widgets/)
 * [Active Topics](https://wordpress.org/support/plugin/jquery-ui-widgets/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/jquery-ui-widgets/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/jquery-ui-widgets/reviews/)

## Tags

 * [Instructions](https://wordpress.org/support/topic-tag/instructions/)

 * 5 replies
 * 2 participants
 * Last reply from: [David Gwyer](https://wordpress.org/support/users/dgwyer/)
 * Last activity: [13 years, 3 months ago](https://wordpress.org/support/topic/basic-instructions/#post-3439409)
 * Status: not resolved