I can't get any enqueue_script to work, here is my code (which is in my plugin file)
function load_custom_wp_admin_style() {
wp_enqueue_script( 'jquery-ui-datepicker', '', array('jquery'));
}
add_action( 'admin_enqueue_scripts', 'load_custom_wp_admin_style' );
Where am i going wrong? I can't seem to load my own scripts either
wp_enqueue_script('jquery');
wp_enqueue_script('jquery-ui-core');
wp_enqueue_script('jquery-ui-datepicker');
I am now getting jquery-ui script loaded, but the datepicker script is not being loaded
jquery-ui-datepicker is bundled with WordPress (recent versions) so you don't need to tell it anything more than the script handle.
wp_enqueue_script('jquery-ui-datepicker');
But: "can't get it to work" means what exactly? Have you looked in the page source and not found the script being loaded? Or it loads, but has no CSS styling it? I suspect your problem is the latter, because you aren't enqueuing any CSS for the datepicker (above, at least).
Now, the problem is that WordPress doesn't actually bundle in any supporting CSS for the datepicker, since WordPress itself doesn't use it. So, you need to either:
add some supporting CSS to your admin stylesheets
enqueue a compatible standard jquery-ui theme, e.g. from a CDN
For the latter, I blogged about that a while ago; here's some code that should handle that for you; add it to your function, above.
global $wp_scripts;
// get registered script object for jquery-ui
$ui = $wp_scripts->query('jquery-ui-core');
// tell WordPress to load the Smoothness theme from Google CDN
$url = "https://ajax.googleapis.com/ajax/libs/jqueryui/{$ui>ver}/themes/smoothness/jquery.ui.all.css";
wp_enqueue_style('jquery-ui-smoothness', $url, false, null);
That loads the whole enchilada, but you might want to pare it back to just the CSS that the datepicker needs.
Edit: to get the datepicker script on an older version of WordPress which doesn't bundle the datepicker script with the other jquery-ui scripts, the easiest solution is to install Use Google Libraries. This plugin will replace the local jquery scripts with Google's CDN hosted versions, and all jquery-ui scripts will be downloaded as a single (well-cached!) script.
Related
I'm trying add CSS to testimonial slider (3rd Party plugin) on my wordpress theme. But my custom CSS file loads before the plugin CSS file.
Is there a way I can make the my custom CSS load after the plugin CSS?
I don't want to make any changes to the Plugin code.
Edit:
I noticed that the plugin is using "wp_print_styles" to load it's css file.
You'll need to update your plugin code to do this the "proper way" I believe.
Since you need it to load last I would take the common path of utilizing the wp_enqueue_scripts hook/function to set a low priority for it being processed. This way you can guarantee that the HTML remains valid and that you are loading your styles and scripts after all the default ones within WordPress plugin's code:
function my_plugin_unique_style() {
$base = get_stylesheet_directory_uri();
wp_enqueue_style( 'style-my-plugin-style', $base.'/styles.css' );
}
add_action('wp_enqueue_scripts', 'my_plugin_unique_style', 11 );
Of course you will have to modify this to use your plugin's css file name but this is the basic way to do this and have valid markup. It's worth mentioning that if this still loads before another CSS file in the HEAD of the page you should bump up the number from 11 to some other higher number.
You can read more about wp_enqueue_scritps here.
In Wordpres, I have created a plugin. I'm trying to use Bootstrap/bootstrap-select in order to create a multi-select (with checkboxes) on a custom page template, but I'm having problems. I'm not creating a new theme, but I am using a child theme. Here is what I've done:
Copied page.php from the parent theme to the child and renamed it to manage-matches.php
Edited the template and added
Template Name: manage matches
Created a new page and selected this new template
In the template loop content div, I call another PHP file using:
This function is in managematches.php and I've
I copied my header.php to the child and added the references to the bootstrap.css and the bootstrap-select.css
I've done
include_once 'includes/managematches.php';
in my plugin.
This function managematches() generates the html for my page and it works fine. In fact, I can create bootstrap elements so I know the bootstrap/bootstrap-select.css files are working. I've also created a .js file (managematches.js) and enqueued it and that is working. By working, I mean that standard jQuery functions and selectors work fine.
The problem is that I can't get any of the functions in bootstrap-select.js to work. I've tried putting the reference to it in a whole bunch of places, to no avail. I keep getting:
TypeError: $(...).selectpicker is not a function
The problem is described here: Bootstrap-select not working
and I know my issue is that I need to make sure bootstrap-select.js is included before loading my code.
What I'm not clear on is how to do this in the wordpress enviornment. I'm close, but not where I want to be. If anyone has a suggestion on how to resolve this, I would appreciate the help.
ANSWER
I enqueued the css and js in my plugin, but the functions.php would work too.
wp_enqueue_style( 'bootstrap', 'http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css');
wp_enqueue_style( 'bootstrap-select', 'http://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.7.3/css/bootstrap-select.min.css');
wp_enqueue_script( 'bootstrapjs', 'http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js', array('jquery'), '', true );
wp_enqueue_script( 'bootstrap-selectjs', 'http://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.7.3/js/bootstrap-select.min.js', array('jquery'), '', true );
The problem is described here: Bootstrap-select not working and I know my issue is that I need to make sure bootstrap-select.js is included before loading my code.
What I'm not clear on is how to do this in the wordpress enviornment. I'm close, but not where I want to be. If anyone has a suggestion on how to resolve this, I would appreciate the help.
I guess your javascript files are loaded either in the header.php or the footer.php on the main theme. Of course they can also be included in functions.php. You can inspect the source code of the generated page and check in which point is your bootstrap-select included and then search the name of the file on your theme's source code.
How did you enqueue your managematches.js?
By using wp_enqueue_script you can also declare dependecies of the enqueued script.
I am writing a custom widget for my own WordPress theme.
From WordPress 3.5 there is a new Media Uploader instead of the old ThickBox.
My widget used to work fine on WordPress versions older than 3.5, but now the new media uploader prevent the old working behavior.
I added a check in the costructor for the presence of wp_enqueue_media function:
if( function_exists( 'wp_enqueue_media' ) ) {
wp_enqueue_media();
}
but when this part of cose is executed javascript throw an error in the console stopping Js engine:
Uncaught TypeError: Cannot read property 'id' of undefined load-scripts.php:69
I removed all the widget code and reduced it to bare bones... the error is caused by wp_enqueue_media() calls, but I cannot get my head around why and how to fix it.
I also read Wordpress 3.5 custom media upload for your theme options, but there is no mention to this issue
Can anyone point me in the right direction? Is there any documentation available for the the WordPress 3.5 Media Uploader?
It's too late for you now, but might be helpful for other people. I managed to make it work using
add_action( 'admin_enqueue_scripts', 'wp_enqueue_media' );
Hope it helps!
The problem you are experiencing is because you probably put your custom jquery in the header and you didn't registered wordpress jquery. If multiple jquery are defined you will get that error.
My sugestion is you should either remove your jquery script or remove the one from wordpress
function remove_jquery() {
wp_deregister_script('jquery');
//wp_register_script('jquery', ("//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"), false);
}
if(!is_admin()){add_action('init', 'remove_jquery');}
I suggest you use the jquery wordpress provides you, if not, the proper way to enqueue it is to deregister the default one an register your jquery. Just remove the comments from the remove_jquery function.
Also, the above code should go in functions.php
Cheers.
From codex [1], the function wp_enqueue_media( $args ) should be called from 'admin_equeue_scripts' action hook. or later.
Example:
function enqueue_media() {
if( function_exists( 'wp_enqueue_media' ) ) {
wp_enqueue_media();
}
}
add_action('admin_enqueue_scripts', 'enqueue_media');
Hope it helped.
[1]. https://codex.wordpress.org/Function_Reference/wp_enqueue_media
To debug, you need to get the non-minified versions of the js sent to the browser. See the docs:
SCRIPT_DEBUG
SCRIPT_DEBUG is a related constant that will force WordPress to use the "dev" versions of core CSS and Javascript files rather than the minified versions that are normally loaded. This is useful when you are testing modifications to any built-in .js or .css files. Default is false.
define('SCRIPT_DEBUG', true);
I have been developing wordpress plugins for a while now and i always seem to get the following issues with all my plugins Jquery conflicts issues.
I have tried so many different ways to avoid these but i always get users contacting me saying when they have installed one off my plugins it has stopped another plugin from working aahhhhh.
I really want to get this sorted because i understand how frustrating this can be for people.
I always set and option or include wordpresses jquery, below is just an example not working code.
add_action( 'init', array( $this, 'include_jquery' ) );
function include_jquery(){
wp_deregister_script('jquery');
wp_register_script('jquery', ("http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"), false, '1.7.1');
wp_enqueue_script('jquery');
}
Ok so after issues with this i now have a select option in the plugin admin to toggle yes or no to include jquery or not i know it is automatically installed but some users remove this, this works for some people but not all.
if you include the wordpress jquery i know you have to run your jquery with the following.
jQuery(document).ready(function ($) {
jQuery instead of the dollar sign $
i understand and have used jquery no conflict and tried and tested some if not all off these
http://api.jquery.com/jQuery.noConflict/
$.noConflict();
jQuery(document).ready(function($) {
// Code that uses jQuery's $ can follow here.
});
This as with the others works for some but not all users with conflicts arising still with certain users.
I am hoping that from this post some of us wordpress plugin developers could help out and post a bullet proof way to use wordpress and jquery within our plugins without getting conflict issues.
Thanks
Doesn't it work with a closure?
(function($){
// your plugin code
})(jQuery);
Read these parts of the codex :
Load a default WordPress script from a non-default location
jQuery noConflict wrappers
You should use wp_enqueue_scripts hook instead of init.
And you should use jQuery.noConflict(); instead of $.noConflict();.
I'm using wordpress 3.3.1 and it seems that jquery is there by default, all i need to do is to enqueue the file through wp_enqueue_script function. What if i want to put this function inside another plugin that is already installed. For example, i'm using jwplayer plugin for wordpress now if i want the jwplayer plugin to enqueue the jquery file for me where do i tell it to do this, the main plugin file for jwplayer is named as jwplayermodule.php and it's at the root of the jwplayer plugin directory.
Regards
You enqueue jquery like so:
// Function to perform any things that need to be done BEFORE the header is called
function my_wp_init() {
wp_enqueue_script('jquery');
}
// Enable the widgets, prepare the function for the head call, etc.
add_action('init', 'my_wp_init');
The best place to do this would be in your theme's functions.php file. This way, jQuery is always loaded in your theme.
ALTERNATIVELY, you can drop the same code into the plugin php file you mentioned - jwplayermodule.php