WordPress wp_enque_style different behaviour than <link href=...>

Question

I am having a trouble trying to use a JavaScript code for upload files (http://tutorialzine.com/2013/05/mini-ajax-file-upload-form/) in WordPress.

Following the recommendations of WordPress, I have created a plugin that enqueues the scripts and the styles required by the JavaScript code. The appearance of the script is:

function add_mini_ajax_file_upload_scrips() {
wp_enqueue_style('uploadBoxStyleFont', "http://fonts.googleapis.com/css?family=PT+Sans+Narrow:400,700" );
wp_enqueue_style('uploadBoxStyle', "http://localhost/wordpress/assets/MiniAJAX_FileUploader/css/style.css" );
wp_enqueue_script('uploadBoxJquerymin', "https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js");
wp_enqueue_script('uploadBoxJqueryknob', "http://localhost/wordpress/assets/MiniAJAX_FileUploader/js/jquery.knob.js");
wp_enqueue_script('uploadBoxJquerywidget', "http://localhost/wordpress/assets/MiniAJAX_FileUploader/js/jquery.ui.widget.js");
wp_enqueue_script('uploadBoxJqueryiframe', "http://localhost/wordpress/assets/MiniAJAX_FileUploader/js/jquery.iframe-transport.js");
wp_enqueue_script('uploadBoxJqueryupload', "http://localhost/wordpress/assets/MiniAJAX_FileUploader/js/jquery.fileupload.js");
wp_enqueue_script('uploadBoxScript', "http://localhost/wordpress/assets/MiniAJAX_FileUploader/js/script.js");
}
add_action( 'wp_enqueue_scripts', 'add_mini_ajax_file_upload_scrips' );

In this manner, the WordPress page looks as:

As yo can see, a button with the text "Examinar ..." appears very uggly below the "Browse" button.

However, if I paste the following code directly on the WordPress Page:

<link href="http://fonts.googleapis.com/css?family=PT+Sans+Narrow:400,700" rel='stylesheet' />
<link href="http://localhost/wordpress/assets/MiniAJAX_FileUploader/css/style.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://localhost/wordpress/assets/MiniAJAX_FileUploader/js/jquery.knob.js"></script>
<script src="http://localhost/wordpress/assets/MiniAJAX_FileUploader/js/jquery.ui.widget.js"></script>
<script src="http://localhost/wordpress/assets/MiniAJAX_FileUploader/js/jquery.iframe-transport.js"></script>
<script src="http://localhost/wordpress/assets/MiniAJAX_FileUploader/js/jquery.fileupload.js"></script>
<script src="http://localhost/wordpress/assets/MiniAJAX_FileUploader/js/script.js"></script>

Then the page looks:

Obviously, I want the appearance of the second way but WordPress recommends the first way to add JavaScript and styles.

Someone can tell me what is happening and how can I get the correct appearance (removing the uggly "Examinar" button)?

Thank you very much.

Answer 1

Examine the order in which scripts/styles are loaded. Most likely, they are loaded in different order.

WordPress assigns a unique id to each enqueued style-sheet or script as either unique-id-css or unique-id-js. You can see it in the generated <link> or <script> tag if you look in page source.

You can use those ids (without the -css or -js part) to modify the order in which styles or scripts are loaded by passing the id in the array of dependencies ($deps) of wp_enqueue_script or wp_enqueue_style.

You should stick to the WP way as it will avoid loading a resource multiple times which could cause hard to trace errors, especially for js scripts.

For example, If you load them directly and another plugin/widget/theme script loads jquery, it will be loaded twice in your page, causing conflicts.

Also please note jquery is already provided by WP, you don't need to load it from external source. Just specify it as dependence for any jquery dependant script.