Enqueue admin scripts in head
Question
I'm using this code to include my scripts in the administration page of my plugin:
add_action('admin_enqueue_scripts', 'enqueue_my_scripts');
function enqueue_my_scripts() {
wp_enqueue_script('jquery');
wp_enqueue_script('jquery-ui');
wp_enqueue_script('jquery-ui-tabs');
wp_enqueue_script('jquery-ui-sortable');
}
It works, but jquery is being added to the <head> tag, while all other scripts are being added at the bottom of the <body> tag.
I would like to include all the scripts in the head of the plugin administration page.
Is there a way to tell wordpress to include them in the head instead of the body ?
3 answers
solution1
2 ACCPTED 2015-03-04 09:23:42
Any particular reason you want it to load in the header? The footer is just as good of a place as any and ensures they're loaded in the correct order.
But as there are always special cases- here's the solution. You'll need to deregister each script as they were originally registered to be placed in the body. So for each script:
wp_deregister_script('jquery-ui-sortable');
wp_enqueue_script('jquery-ui-sortable', site_url('/wp-includes/js/jquery/ui/jquery.ui.sortable.min.js'), array('jquery', 'jquery-ui'), '1.11.2', false);
(Of course, you may need to tweak these variables, such as the version number or file location depending on your install)
What makes this work is the last variable, "false": http://codex.wordpress.org/Function_Reference/wp_enqueue_script
$in_footer (boolean) (optional) Normally, scripts are placed in of the HTML document. If this parameter is true, the script is placed before the end tag. This requires the theme to have the wp_footer() template tag in the appropriate place. Default: false
Edit: As per requested, here's how you would do this with a script without using any paths or versions.
Basically, we're registering the script with wordpress, copying the source and version of the script from wordpress' scripts global, and then we're deregistering the script and then registering it again without placing it in the footer.
Here's an updated version that handles all of the scripts you need:
// Add your script names to this array.
$scripts = array('jquery-ui-sortable', 'jquery-ui-tabs', 'jquery-ui-sortable');
// Register the original scripts.
foreach($scripts as $script) {
wp_enqueue_script($script);
}
// This global contains all of wordpress' registered scripts.
global $wp_scripts;
$sources = array();
// Loop through the registered scripts, copy the data we need.
foreach($wp_scripts->registered as $name => $data) {
if(in_array($name, $scripts)) {
$sources[$name]['src'] = $data->src;
$sources[$name]['ver'] = $data->ver;
$sources[$name]['deps'] = $data->deps;
}
}
// Loop through our selected scripts, deregister them, then register
// them again, only this time using 'false' to put them in the head.
foreach($scripts as $script) {
wp_deregister_script($script);
wp_enqueue_script(
$script,
site_url($sources[$script]['src']),
$sources[$script]['deps'],
$sources[$script]['ver'],
false
);
}
solution2
0 2015-03-04 11:15:26
You should enqueue your scripts like so:
add_action('admin_enqueue_scripts', 'enqueue_my_scripts');
function enqueue_my_scripts() {
$dependencies = array('jquery-ui','jquery-ui-tabs','jquery-ui-sortable');
$in_footer = false;
wp_enqueue_script(
$your_script_handle,
$source_of_your_script,
$dependencies, $version, $in_footer
);
}
$in_footer is the parameter that tells wordpress whether or not to enqueue the script in the footer or the head of the page. If set to true the script is rendered in the footer and if set to false it is rendered in the head.
If you want 'jquery-ui','jquery-ui-tabs','jquery-ui-sortable' to be rendered for use along with your plugin then this means your plugin has got some dependencies .
The $dependencies variable refers to an array containing the dependencies your script requires. Add more if your script needs more dependencies.
$version can be left blank like so $version = '' if your script doesn't have a specific version.
The dependencies your script require, specially for your case, ship with WordPress by default. You just need to enqueue them.
solution3
0 2015-03-04 11:29:44
Here is the code from wordpress Codex.
<?php wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer ); ?>
So in your case it becomes,
<?php wp_enqueue_script('jquery', NULL , array(),NULL , FALSE );?>
And if you have other js files, just add FALSE as the last parameter and it should load it in header. If they are dependant then use dependency like this.
EDIT:
<?php wp_enqueue_script('somejs', 'http://example.com/wp-content/plugins/test/js/some.js', array( 'jquery' ),'1.0.0', FALSE );?>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.