I tried to enqueue a module script in WordPress. But not enquiring the script on wordpress.
I have tried: wp_enqueue_script( 'handle', 'https://unpkg.com/#google/model-viewer/dist/model-viewer.min.js', [], 1.0.0 );
you can use it
wp_register_script('handle', 'https://unpkg.com/#google/model-viewer/dist/model-viewer.min.js', ['jquery'], '1.0.0', true);
wp_enqueue_script('handle');
wp_scripts()->add_data('handle', 'type', 'module');
you must register script first, then enqueuing.
function register_and_enqueue_script() {
//register script
wp_register_script( 'handle', 'https://unpkg.com/#google/model-viewer/dist/model-viewer.min.js', [], 1.0.0 );
// enqueuing script
wp_enqueue_script( 'handle' );
}
add_action( 'wp_enqueue_scripts', 'register_and_enqueue_script' );
function my_enqueue_scripts() {
wp_register_script('my-module-script',
get_template_directory_uri() .'/myscript.js', //
array ('jquery', 'jquery-ui'), //depends on these, however, they are registered by core already, so no need to enqueue them.
'1.0.0',
false
);
wp_enqueue_script( 'my-module-script');
}
add_action( 'wp_enqueue_scripts', 'my_enqueue_scripts' );
For Details: https://developer.wordpress.org/reference/functions/wp_enqueue_script/
Related
I have added this to my functions.php and need to use ajaxURL in all of enqueued scripts in the template (instead of enqueuing only one script here
add_action( 'wp_enqueue_scripts', 'ajaxify_enqueue_scripts' );
function ajaxify_enqueue_scripts() {
wp_localize_script( 'ajaxify', 'ajaxURL', array('ajax_url' => get_template_directory_uri() . '/app/login.php' ));
}
add_action( 'wp_ajax_nopriv_set_ajaxify', 'set_ajaxify' );
add_action( 'wp_ajax_set_ajaxify', 'set_ajaxify' );
but when I try to call an ajax method I am getting this error
Uncaught ReferenceError: ajaxURL is not defined
Is there any way to add the ajaxURL to all scripts?
Try this code
add_action( 'wp_enqueue_scripts', 'ajaxify_enqueue_scripts' );
function ajaxify_enqueue_scripts() {
wp_enqueue_script('ajaxify', get_template_directory_uri() . '/test.js');
wp_localize_script( 'ajaxify', 'ajaxURL', array('ajax_url' => admin_url('admin-ajax.php')));
}
Put This Code :
function your_function_name() {
wp_register_script('ajaxify', get_template_directory_uri() . '/your-jsname.js', array('jquery'), '', true);
wp_enqueue_script('ajaxify');
wp_localize_script('ajaxify', 'ajaxURL', array( 'ajaxurl' => admin_url( 'admin-ajax.php' ),'siteurl' => site_url() ) );
}
add_action( 'wp_enqueue_scripts', 'your_function_name' );
This is function which i am adding in functions.php but it is not working. Is there anything wrong in this code?
function custom_scripts_css_with_jquery()
{
//wp_register_script( 'Bootstrap_min_js','//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js' );
wp_register_script( 'jquery', '//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js');
wp_register_script( 'select2jquery', '//cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js');
wp_register_style( 'select2mincss', '//cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css');
// For either a plugin or a theme, you can then enqueue the style:
wp_enqueue_script( 'select2jquery' );
wp_enqueue_script( 'jquery' );
wp_enqueue_style( 'select2mincss' );
//wp_enqueue_script( 'Bootstrap_min_js');
}
add_action( 'wp_enqueue_scripts', 'custom_scripts_css_with_jquery' );
use beloe function
function custom_scripts_css_with_jquery()
{
// Deregister the included library
//wp_deregister_script( 'jquery' );
// Register the library again from Google's CDN
wp_register_script( 'jquery', 'https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js', array(), null, false );
wp_register_script( 'select2jquery', 'https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js', array(), null, false );
// Register the style like this for a theme:
wp_register_style( 'select2mincss', 'https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css', array(), '4.0.3', 'all' );
// For either a plugin or a theme, you can then enqueue the style:
wp_enqueue_style( 'select2mincss' );
}
add_action( 'wp_enqueue_scripts', 'custom_scripts_css_with_jquery' );
I'm writing a plugin that uses 'admin_enqueue_scripts' to load css and js files.
I use the exact same method to load css and js.. But only the css is loaded in the head section, js files are loaded in the footer?
Can't figure out why?
The wp codex (https://codex.wordpress.org/Plugin_API/Action_Reference/admin_enqueue_scripts) at the example clearly states:
"In this example we are loading a javascript file in the head section of edit.php."
Here's my code:
// add scripts and styles only available in admin
add_action( 'admin_enqueue_scripts', array( $this, 'eman_add_admin_JS' ) );
add_action( 'admin_enqueue_scripts', array( $this, 'eman_add_admin_CSS' ) );
public function eman_add_admin_CSS() {
if(is_admin() && $_GET['page'] == 'enjoyit-management' || $_GET['page'] == 'management-settings'){
wp_register_style( 'eman-style-admin', plugins_url( '/css/eman-style-admin.css', __FILE__ ), array(), '1.0', 'all' );
wp_enqueue_style( 'eman-style-admin' );
}
}
public function eman_add_admin_JS() {
if(is_admin() && $_GET['page'] == 'enjoyit-management' || $_GET['page'] == 'management-settings'){
// Load jQuery, just to be sure.
wp_enqueue_script( 'jquery' );
wp_register_script( 'eman-script-admin', plugins_url( '/js/eman-script-admin.js' , __FILE__ ), array('jquery'), '1.0', true );
wp_enqueue_script( 'eman-script-admin' );
}
}
Only if you put true in the enqeue or register_script it will load in the header.
The 'best' place for jquery and javascript is to be loaded in the footer. Because it won't cause lag on your website.
But if you want it in the header you should use
wp_register_script( 'my-script', plugins_url( 'my-script.js' , __FILE__ ), array('jquery'), '1.0', false );
wp_enqueue_script( 'my-script' );
OMG, sorry, after posting I read the codex about 'wp_register_script', and there it was. The last parameter is a '$in_footer' boolean, which is set to true... aargh..
I am working on my first plugin and it is coming along alright. However, I am not able to load my scripts (CSS and JS) from my plugin. This is my code:
function my_scripts() {
wp_enqueue_style('my-style', plugins_url( 'my-plugin/my-style.css') );
wp_enqueue_script( 'my-js', plugins_url( 'my-plugin/my-js.js' ), array('jquery'), '', true );
} add_action( 'wp_enqueue_scripts', 'my_scripts' );
I must be missing something... such a simple code to not be working :(
Your code looks pretty much correct, but check out Plugins URL Page and see this particular part:
If you are using the plugins_url() function in a file that is nested inside a subdirectory of your plugin directory, you should use PHP's dirname() function
Basically, you need to load like this:
plugins_url( 'my-plugin/my-js.js' , __FILE__ ),
Well, I got it. My mistake was that I was using the wrong hook! Duh! In the admin side, you use the hook admin_enqueue_scripts and in the front side you use wp_enqueue_scripts to hook your function to enqueue your scripts to WordPress.
Here is a simple example to import from your plugin. If you want to enqueue scripts from your theme, you should use get_template_directory_uri() function to get the proper path.
From your custom plugin to the admin side:
function load_my_scripts() {
wp_enqueue_style('my-style', plugins_url( 'my-style.css', __FILE__ ));
wp_enqueue_script( 'my-js', plugins_url( 'my-js.js', __FILE__ ), array('jquery'), '', true );
} add_action( 'admin_enqueue_scripts', 'guide_express_scripts' );
From your custom plugin to the front side:
function load_my_scripts() {
wp_enqueue_style('my-style', plugins_url( 'my-style.css', __FILE__ ));
wp_enqueue_script( 'my-js', plugins_url( 'my-js.js', __FILE__ ), array('jquery'), '', true );
} add_action( 'wp_enqueue_scripts', 'guide_express_scripts' );
I am trying to load two scripts through the wp_enqueue_script(). I made to functions but only the first loads not the second one. Here is the code:
//Load my own jQuery
function fix_noconflict() {
wp_deregister_script( 'jquery' );
wp_register_script( 'jquery' , 'http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js' );}
add_action( 'wp_enqueue_scripts' , 'fix_noconflict' );
//This two functions follow the same
function mauricio_bootstrap_script_jquery() {
//Includes bootstrap jQuery
wp_register_script( 'custom-script', get_template_directory_uri().'/mauricio_bootstrap/js/bootstrap.js', array( 'jquery' ) );
//This enqueus the script
wp_enqueue_script( 'custom-script' );
}
// Adds the new bootstrap function to the wp_enqueue_scripts
add_action( 'wp_enqueue_scripts', 'mauricio_bootstrap_script_jquery' );
function mauricio_bootstrap_script_carousel() {
wp_register_script( 'myscript', get_template_directory_uri().'/mauricio_bootstrap/js/bootstrap-carousel.js', array( 'jquery' ) );
wp_enqueue_script( 'myscript' );
}
add_action( 'wp_enqueue_script', 'mauricio_bootstrap_script_carousel' );
Just for the record I have wp_head() in my header. And as I said it loads the first function that includes bootstrap.js.
Thanks,
M
Why don´t you try to put all your functions inside a main function, like this?
function wpEnqueueScripts(){
// Adds the new bootstrap function to the wp_enqueue_scripts
wp_register_script('custom-script', get_template_directory_uri() . '/mauricio_bootstrap/js/bootstrap.js', array('jquery'));
wp_enqueue_script('custom-script');
// Adds the new bootstrap function to the wp_enqueue_scripts
wp_register_script('myscript', get_template_directory_uri() . '/mauricio_bootstrap/js/bootstrap-carousel.js', array('jquery'));
wp_enqueue_script('myscript');
}
add_action('wp_enqueue_scripts', 'wpEnqueueScripts');
Someone at the wordpress forum provided this. The two functions were combined and when adding the action the use of the 'template_redirect' $tag is used instead of the 'wp_enqueue_script'
function mauricio_bootstrap_scripts() {
wp_register_script( 'custom-script', get_template_directory_uri().'/mauricio_bootstrap/js/bootstrap.js', array( 'jquery' ) );
wp_enqueue_script( 'custom-script' );
wp_register_script( 'myscript', get_template_directory_uri().'/mauricio_bootstrap/js/bootstrap-carousel.js', array( 'jquery' ) );
wp_enqueue_script( 'myscript' );
}
add_action( 'template_redirect', 'mauricio_bootstrap_scriptsl' );