wp_enqueue_script() not loading multiple scripts - wordpress

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' );

Related

How to enqueue module script?

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/

How to Globally Use wp_localize_script() Ajax URL

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' );

Can't enqueue new scripts into parents theme

I'm trying to add new scripts and a css file to my child's theme on wordpress but i'm getting the following errors.
GET https://linton59.co.uk/wp-content/themes/simpleshift/css/lightbox.css?ver=4.3.0 net::ERR_ABORTED
(index):280 GET https://linton59.co.uk/wp-content/themes/simpleshift/js/lightbox-plus-jquery.js?ver=3.3.0 net::ERR_ABORTED
(index):279 GET https://linton59.co.uk/wp-content/themes/simpleshift/js/lightbox.js?ver=3.3.0 net::ERR_ABORTED
(index):68 GET https://linton59.co.uk/wp-content/themes/simpleshift/css/lightbox.css?ver=4.3.0 net::ERR_ABORTED
The following is the functions.php i'm using.
<?php
// Exit if accessed directly
if ( !defined( 'ABSPATH' ) ) exit;
// BEGIN ENQUEUE PARENT ACTION
// AUTO GENERATED - Do not modify or remove comment markers above or below:
if ( !function_exists( 'chld_thm_cfg_parent_css' ) ):
function chld_thm_cfg_parent_css() {
wp_enqueue_style( 'chld_thm_cfg_parent', trailingslashit( get_template_directory_uri() ) . 'style.css', array( 'bootstrap','font-awesome' ) );
}
endif;
add_action( 'wp_enqueue_scripts', 'chld_thm_cfg_parent_css', 10 );
// END ENQUEUE PARENT ACTION
add_action( 'wp_enqueue_scripts', 'theme_name_scripts', 20 );
function theme_name_scripts() {
wp_dequeue_script( 'simpleshift_public' );
wp_enqueue_script( 'myscript', get_stylesheet_directory_uri() .'/js/public.js', array( 'jquery' ), '1.0', true);
}
add_action( 'wp_enqueue_scripts', 'theme_light', 30 );
function theme_light() {
wp_dequeue_script( 'simpleshift_public' );
wp_enqueue_style( 'lightbox', get_template_directory_uri() . '/css/lightbox.css', array(), '4.3.0' );
wp_enqueue_script( 'lightbox2', get_template_directory_uri() . '/js/lightbox.js', array( 'jquery' ), '3.3.0', true );
wp_enqueue_script( 'lightbox3', get_template_directory_uri() . '/js/lightbox-plus-jquery.js', array( 'jquery' ), '3.3.0', true );
}
My child's theme has a css folder and js folder with the relevant files in it.
The last action is the only part not working.
get_template_directory_uri() will always return the URI of the current parent theme.
To get the child theme URI instead, you need to use get_stylesheet_directory_uri().

Is there anything wrong in this function of WordPress to apply custom scrips and style to the theme?

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' );

Wordpress, admin_enqueue_scripts not loading all files in head

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..

Resources