Hot answers tagged wp-enqueue-script
41
Why registering and queuing properly matters
it should be in time - earlier than script/style is up for being output to page, otherwise it is too late;
it should be conditional - otherwise you are loading stuff where you don't need it and cause performance and functionality issues, for this you need WP environment loaded to late stage.
The three stages ...
25
There is a function called wp_script_is( $handle, $list ). $list can be one of:
'registered' -- was registered through wp_register_script()
'queue' -- was enqueued through wp_enqueue_script()
'done' -- has been printed
'to_do' -- will be printed
Ditto all that for wp_style_is().
20
While WordPress does include the jQuery UI libraries, it does not include the UI/Effects library. That library is separate and standalone. You'll need to include a copy of the effects.core.js file and enqueue it separately.
Note that you should name it jquery-effects-core when en-queuing it, for naming consistency.
You can include it like this:
...
12
Try this code for adding scripts to the edit pages of your portfolio custom post type.
add_action( 'admin_print_scripts-post-new.php', 'portfolio_admin_script', 11 );
add_action( 'admin_print_scripts-post.php', 'portfolio_admin_script', 11 );
function portfolio_admin_script() {
global $post_type;
if( 'portfolio' == $post_type )
...
11
There is a dequeue method available ... I'm just not sure why it isn't wrapped in a wp_dequeue_script() method. (I might create a ticket for this issue, actually)
But yes, using wp_deregister_script will accomplish what you're trying to do. Just remember, if you ever do want to use WP's built-in jQuery later you'll need to re-queue it first.
11
You can do it like this (put in your functions.php) :
function add_admin_scripts( $hook ) {
global $post;
if ( $hook == 'post-new.php' || $hook == 'post.php' ) {
if ( 'recipes' === $post->post_type ) {
wp_enqueue_script( 'myscript', get_stylesheet_directory_uri().'/js/myscript.js' );
}
}
}
add_action( ...
11
First rule of thumb: do not deregister core-bundled scripts and replace with other versions, unless you are absolutely certain that no Theme, Plugins, or core itself will break due to the version change. Really, unless you absolutely need an alternate version of a core-bundled script, just use what is bundled with core.
Second, I strongly recommend hooking ...
11
Wordpress as a nice function is_active_widget that you can use in your __construct and test if the widget is present in the current page and add your scripts/styles based on that ex:
function __construct() {
parent::__construct(__CLASS__, 'BasicWidget', array(
'classname' => __CLASS__,
'description' => "This is a basic widget ...
10
I hope you know what you are doing. You can wp_print_styles and wp_print_scripts action hooks and then get the global $wp_styles and $wp_scripts object variables in their respective hooks.
The "registered" attribute lists registered scripts and the "queue" attribute lists queue scripts on both of the above objects.
An example code to empty the scripts and ...
10
There is no dedicated filter available … at least I cannot see one. But …
wp_print_scripts() calls WP_Scripts->do_items()
which calls WP_Scripts->do_item()
which uses esc_url()
which does offer a filter: 'clean_url'.
And here we go:
function add_defer_to_cf7( $url )
{
if ( FALSE === strpos( $url, 'contact-form-7' )
or FALSE === ...
10
add_menu_page and add_submenu_page both return the page's "hook suffix", which can be used to identify the page with certain hooks. As such, you can use that suffix in combination with the variable hooks admin_print_styles-{$hook_suffix} and admin_print_scripts-{$hook_suffix} to specifically target these pages.
function my_menu() {
$menu = add_menu_page( ...
8
You should be forewarned that not all plugins/themes use enqueue. When I first started dealing with all the JavaScripts and CSS files outputed I just hooked into the enqueued files. This resulted in me only getting 2 out of 10 JavaScript files and 1 out of 3 CSS files.
Here is some quick PoCs. Neither tested but meant to put you in the right direction, if ...
8
Use the admin_enqueue_scripts hook instead of admin_init
Note: you should use hooks that target admin pages as specifically as possible. e.g.:
Plugins: Use the admin_print_scripts-{plugin-page} hook
Themes: Use the admin_print_scripts-{theme-page} hook (where {theme-page} is whatever string you use in the add_theme_page() call)
Custom Post-Type Edit Page: ...
8
Based on my own experience, I've used a combination of method 1 & 2 - the architecture and footer scripts of 1, and the 'look-ahead' technique of 2.
For the look-ahead though, I use regex in place of stripos; personal preference, faster, and can check for 'malformed' shortcode;
preg_match( '#\[ *shortcode([^\]])*\]#i', $content );
If you're concerned ...
8
Well, you have wp_localize_script(), but that's only for passing data.
Otherwise, you can do this:
function print_my_inline_script() {
if ( wp_script_is( 'some-script-handle', 'done' ) ) {
?>
<script type="text/javascript">
// js code goes here
</script>
<?php
}
}
add_action( 'wp_footer', 'print_my_inline_script' );
The idea is that ...
8
All you need to do is a simple call in your functions.php:
add_action( 'wp_enqueue_scripts', 'add_thickbox' );
That’s it. WordPress will now enqueue jQuery and the thickbox script. By default, linked images aren’t thickboxy yet. You need to:
Add a class thickbox to the links manually/per PHP, or
Use a second script to add these classes automagically.
...
8
WP_Scripts and WP_Styles classes are behind wp_enqueue_script and wp_enqueue_style functions. If you take a look at classes implementation (scripts and styles) then you will see that WP_Scripts class doesn't support any kind of conditional scripts, but! you can see that WP_Styles does! The problem is that wp_enqueue_style doesn't allow you to setup ...
7
If you look at the wp_enqueue_script Codex Documentation, you'll see one of the options is $deps, this would mean that your script is dependent upon another script, simply add jquery as a dependancy and your scripts will load in the correct place.
If you set a handle for the other scripts you can use them as a dependent as well.
Example:
...
7
If you use get_current_screen(), you can detect what the page you're on is. There is an example in the codex article that I linked which shows how to use get_current_screen() with add_options_page(), this method will work for any admin page.
7
Try changing the first line of your custom JS file.
jQuery(document).ready(function($) {
jQuery operated within WordPress should be run in compatibility mode. That line allows this to happen, as per point #5 here.
7
Are you using a Theme that you control?
If not, then every time the Theme updates, you'll lose your modifications to the header. Or else, you'll have to fork the Theme, or maintain/backport your changes every time the Theme updates.
Do you only use Plugins under your control?
If not, then you'll have to check for script conflicts every time you activate ...
7
I am not sure about the extra quotes. The best way to include a java script file is with wp_enqueue_script() as indicated here in the codex.
The safe and recommended method of adding JavaScript to a WordPress
generated page and WordPress Theme or Plugin is by using
wp_enqueue_script(). This function includes the script if it hasn't
already been ...
6
I remove version like this, can be easily written out to match multiple domains:
add_filter( 'script_loader_src', 'jquery_unversion' );
function jquery_unversion( $src ) {
if( strpos( $src, 'ajax.googleapis.com' ) )
$src = remove_query_arg( 'ver', $src );
return $src;
}
6
You can also enqueue the whole jQuery UI directly from Google. This is how I do it:
wp_enqueue_script('jquery-ui', 'http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/jquery-ui.min.js', array('jquery'), '1.8.6');
And since jQuery is listed as a dependency for jQuery UI, you don't need to manually enqueue it. WordPress will do it automatically for you.
6
init is much earlier than page template loading and not appropriate place for enqueues (despite many tutorials and docs using it for that).
Hook your function to wp_enqueue_scripts and make sure you are doing that hooking before wp_head() call in template.
6
The problem with @tollmanz answer is that since you're hooking off of the -print-styles and -print-scripts hooks, you must generate the HTML to load your scripts manually. This is not optimal, since you don't get the nice dependency and versioning that comes with wp_enqueue_script() and wp_enqueue_style(). It also doesn't let you put things in the footer if ...
6
First, check for syntax errors. The syntax highlighting seems to indicate that you have syntax errors.
Second, don't wrap your add_action() calls inside conditionals; rather, wrap your callback function content inside the conditionals, e.g.:
<?php
function theme_upgrade_alernt() {
if ( is_admin() && $pagenow == 'theme-install.php' && ...
6
First, if your Theme is intended to be publicly distributed, do not deregister core-bundled scripts and replace them with your own. This includes jQuery, jQuery UI, and several other scripts.
Second, yes: WordPress runs with jQuery no-conflict, which means that you must account for no-conflict in your scripts. The Codex-recommended method is here:
...
6
You should be able to call wp_enqueue_script() as part of your Widget output.
Edit
Quick-and-dirty, using the bare-bones Widgets API class example:
<?php
class wpse48337_Widget extends WP_Widget {
public function __construct() {
// widget actual processes
}
public function form( $instance ) {
// outputs the options form on ...
6
The problem is that the wp_enqueue_style() call is inside of the category_collapse() member function of the CategoryCollapse() class, and the CategoryCollapse() class is being instantiated by a callback hooked into the plugins_loaded action hook.
That means that the wp_enqueue_style() function is attempting to execute at the plugins_loaded hook, which fires ...
Only top voted, non community-wiki answers of a minimum length are eligible
