Loading jQuery UI in head

  • Resolved Swellfire

    (@swellfire)


    11 years, 4 months ago

    I am trying to load jquery-ui-core and jquery-ui-tabs in the head of my theme. Here is my code: 

    add_action( 'wp_enqueue_scripts', 'load_jquery_ui' );
function load_jquery_ui() {
	wp_enqueue_script( 'jquery-ui-core' );
	wp_enqueue_script( 'jquery-ui-tabs' );

}

    Default for wp_enqueue_script is to load the script in the head. I have tried adding it to the jquery array to no avail.

Viewing 2 replies - 1 through 2 (of 2 total)
  • Thread Starter Swellfire

    (@swellfire)

    I found a solution here

    Evidently you have to deregister the script and then enqueue it again like so:

    add_action('wp_enqueue_scripts', 'swellfire_load_scripts');
function swellfire_load_scripts(){
    if( is_admin() ) return;
    wp_deregister_script( 'jquery-ui-core' );
    wp_enqueue_script( 'jquery-ui-core', site_url(  '/wp-includes/js/jquery/ui/jquery.ui.core.min.js' ), array('jquery') );
    wp_deregister_script( 'jquery-ui-tabs' );
    wp_enqueue_script( 'jquery-ui-tabs', site_url(  '/wp-includes/js/jquery/ui/jquery.ui.tabs.min.js' ), array('jquery') );
}

    If anyone knows a more elegant way to solve this I would love to see it.

    Thread Starter Swellfire

    (@swellfire)

    Correction, you need to load widget as well.

    add_action('wp_enqueue_scripts', 'swellfire_load_scripts');
function swellfire_load_scripts(){
    if( is_admin() ) return;
    wp_deregister_script( 'jquery-ui-core' );
    wp_enqueue_script( 'jquery-ui-core', site_url(  '/wp-includes/js/jquery/ui/jquery.ui.core.min.js' ), array('jquery') );
    wp_deregister_script( 'jquery-ui-widget' );
    wp_enqueue_script( 'jquery-ui-widget', site_url(  '/wp-includes/js/jquery/ui/jquery.ui.widget.min.js' ), array('jquery') );
    wp_deregister_script( 'jquery-ui-tabs' );
    wp_enqueue_script( 'jquery-ui-tabs', site_url(  '/wp-includes/js/jquery/ui/jquery.ui.tabs.min.js' ), array('jquery') );
}
Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Loading jQuery UI in head’ is closed to new replies.