I'm trying to enqueue javascript and css in WordPress. I have written the following code but it is not working and no style or css is being added to my theme.
function add_theme_scripts() {
wp_enqueue_style( 'cssdatepicker', get_template_directory_uri() . '/css/persian-datepicker.css', array(), '1.1', 'all');
wp_enqueue_script( 'jsdate', get_template_directory_uri() . '/js/persian-date.js', array ( 'jquery' ), '1.1', true);
wp_enqueue_script( 'jsdatepicker', get_template_directory_uri() . '/js/persian-datepicker.js', array ( 'jquery' ), '1.1', true);
}
add_action( 'wp_enqueue_scripts', 'add_theme_scripts' );
I think it will be added but it showing you cache version CSS and js which is blank maybe
function add_theme_scripts() {
wp_enqueue_style( 'cssdatepicker', get_template_directory_uri(). '/css/persian-datepicker.css', array(), null, 'all');
wp_enqueue_script( 'jsdate', get_template_directory_uri() . '/js/persian-date.js', array ( 'jquery' ), null, true);
wp_enqueue_script( 'jsdatepicker', get_template_directory_uri() . '/js/persian-datepicker.js', array ( 'jquery' ), null, true);
}
add_action( 'wp_enqueue_scripts', 'add_theme_scripts' );
use this code to run updated js and CSS file ( non-cache )
OR
it is already added to your site but the path is wrong so it will throw an error in console.
you can see in the console using the F12 key
please check and let me know what is your status.
OR
wp_enqueue_script( string $handle, string $src = '', array $deps = array(), string|bool|null $ver = false, bool $in_footer = false )
if your $handle has already existed with other style or script so it will not be added to your theme or plugin so be careful about this and add the unique name of $handle
Note :- Add Unique name of $handle or add your own prefix before name of
$handle like custom_jquery this is our custom jquery $handle name
Refrence site :- WP Codex wp_enqueue_script
Related
I tried everything but I could not solve this issue i do not know what is the problem
here is the code in function.php file ;
<?php
function perfection_styles() {
wp_enqueue_style('bootstrap-css', get_template_directory_uri() . '/css/bootstrap.min.css');
wp_enqueue_style('fontawesome-css', get_template_directory_uri() . '/css/all.min.css');
}
function perfection_scripts() {
wp_enqueue_script('jquery-js', get_template_directory_uri() . '/js/jquery-3.6.0.min.js', array(), false, true);
wp_enqueue_script('popper-js', get_template_directory_uri() . '/js/popper.js', array(), false, true);
wp_enqueue_script('bootstrap-js', get_template_directory_uri() . '/js/bootstrap.bundle.min.js', array(), false, true); // to know those parameters go to codex and search for this function
wp_enqueue_script('custom-js', get_template_directory_uri() . '/js/custom.js', array(), false, true);
}
add_action('wp_enqueue_scripts', 'perfection_styles');
add_action('wp_enqueue_scripts', 'perfection_scripts');
?>
it was a stupid mistake i named the file function.php instead of functions.php
I'm trying to enqueue scripts & styles from CDN in Wordpress so I can use this JSfiddle within the footer of my code:
https://jsfiddle.net/wcepbL45/
I can see the 6 scripts are loading in my Page Source, but the JSfiddle I'm trying to embed in the footer isn't working.
I am guessing some of the new scripts are clashing with the original ones, or do I need to be enqueuing these in my footer.php file?
So atm, my functions.php has this code:
<?php
function load_stylesheets()
{
wp_register_style('bootstrap', get_template_directory_uri() . '/css/bootstrap.min.css',
array(), false, 'all');
wp_enqueue_style('bootstrap');
wp_register_style('style', get_template_directory_uri() . '/style.css',
array(), false, 'all');
wp_enqueue_style('style');
}
add_action('wp_enqueue_scripts', 'load_stylesheets');
function include_jquery()
{
wp_deregister_script('jquery');
wp_enqueue_script('jquery', get_template_directory_uri() . '/js/jquery-3.1.3.min.js', '', 1, true);
add_action('wp_enqueue_scripts', 'jquery');
}
add_action('wp_enqueue_scripts', 'include_jquery');
function loadjs()
{
wp_register_script('customjs', get_template_directory_uri() . '/js/scripts.js', '', 1, true);
wp_enqueue_script('customjs');
}
add_action('wp_enqueue_scripts', 'loadjs');
// Next 6 styles are new (I can see them when i view page source, but I think they are clashing with something, as the JSfiddle I'm trying to input isnt working.
wp_register_style( 'Bootstrap', 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css' );
wp_enqueue_style('Bootstrap');
wp_register_style( 'Bootstrap_Theme', 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css' );
wp_enqueue_style('Bootstrap_Theme');
wp_register_style( 'Bootstrap_Slider', 'https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/9.8.0/css/bootstrap-slider.min.css' );
wp_enqueue_style('Bootstrap_Slider');
wp_register_script( 'jQuery', 'https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js', null, null, true );
wp_enqueue_script('jQuery');
wp_register_script( 'Bootstrap', 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js', null, null, true );
wp_enqueue_script('Bootstrap');
wp_register_script( 'Bootstrap_Slider', 'https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/9.8.0/bootstrap-slider.min.js', null, null, true );
wp_enqueue_script('Bootstrap_Slider');
//
Where am I going wrong?
Multiple mistakes here, You should restrict the use of your scripts to everything but the admin panel. You're not checking if the CDN is actually working, and you have no fallback. get_template_directory_uri() should not be used for the loading the style.css file, instead use get_stylesheet_uri(). You're using multiple functions for no reason and loading. your call for wp_register_style and wp_register_style are outside any functions.
I will just paste what i'm using to load and enqueue scripts and style, feel free to copy pasta! Hope this will help you, don't forget to thumbs up the answer if it does.
<?php add_action( 'wp_enqueue_scripts', 'theme_scripts' );
function theme_scripts() {
if ( ! is_admin() ) {
/**
* Register then enqueue bootstrap bundle js (Bootstrap 5.x required)
*
* Check if CDN's url is valid, if not return fallback
*/
$test_bootstrap_bundle_js = #fopen( 'https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/js/bootstrap.bundle.min.js', 'r' );
if ( $test_bootstrap_bundle_js !== false ) {
wp_register_script( 'bootstrap_bundle_js', '//stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/js/bootstrap.bundle.min.js' );
} else {
wp_register_script( 'bootstrap_bundle_js', get_template_directory_uri() . '/assets/js/bootstrap.bundle.min.js' );
};
wp_enqueue_script( 'bootstrap_bundle_js' );
/**
* Register then enqueue bootstrap css (Bootstrap 5.x required)
*
* Check if CDN's url is valid, if not return fallback
*/
$test_bootstrap_css = #fopen( 'https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css', 'r' );
if ( $test_bootstrap_css !== false ) {
wp_register_style( 'bootstrap_css', '//stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css' );
} else {
wp_register_style( 'bootstrap_css', get_stylesheet_uri() . '/assets/css/bootstrap.min.css' );
};
wp_enqueue_style( 'bootstrap_css' );
/**
* Register then enqueue style css
*/
wp_register_style( 'style_css', get_stylesheet_uri(), array( 'bootstrap_css' ) );
wp_enqueue_style( 'style_css' );
};
}; ?>
EDIT 1: Read more about the wp_enqueue_script # https://developer.wordpress.org/reference/functions/wp_enqueue_script/
EDIT 2: Bootstrap 5 as a range plug and play component # https://v5.getbootstrap.com/docs/5.0/forms/range/ (same for Bootstrap 4)
EDIT 3: When you enqueue your scripts you can set up dependencies restricting the load and enqueue of your script
<?php
/**
* Register then enqueue script js
*/
wp_register_script( 'script_js', get_template_directory_uri() . '/assets/js/script.js', array( 'bootstrap_bundle_js', 'jquery_js' ) );
wp_enqueue_script( 'script_js' ); ?>
Inside the wp_register_script we specify an array of script to load our new script after array( 'bootstrap_bundle_js', 'jquery_js' ). It uses the handles defined upon registering the style/script wp_register_script( 'script_js', ... here 'script_js' is the handle.
In response to your last comment, we can do something like this:
For your JS scripts:
(1) jquery.min.js,
eg: wp_enqueue_script( 'jquery_js', '//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js' );
(2) bootstrap.min.js with dependency towards (1),
eg: wp_enqueue_script( 'bootstrap_js', '//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js', array( 'jquery_js' ) );
(3) bootstrap-slider.min.js with dependency towards (1) & (2),
eg: wp_enqueue_script( 'bootstrap_slider_js', '//cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/9.8.0/bootstrap-slider.min.js', array( 'jquery_js', 'bootstrap_js' ) );
(4) script.js with dependency towards (1) & (2) & (3),
eg: wp_enqueue_script( 'script_js', get_template_directory_uri() . '/assets/js/script.js', array( 'jquery_js', 'bootstrap_js', 'bootstrap_slider_js' ) );
For your CSS scripts:
(1) bootstrap.min.css, eg: (same here but with wp_enqueue_style)
(2) bootstrap-slider.css with dependency towards (1),
(3) style.css with dependency towards (1) & (2),
I am trying to substitute 1 javascript file from the parent theme.
I am using the child theme of this theme and i modified 1 *.js file
When i load the file in the parent theme directory all is fine
When i load the file from the child theme all it does is finding the file in the parent theme
I tried different codes found here and on the internet but all failed
I tried
/*
* Use any number above 10 for priority as the default is 10
* any number after 10 will load after
*/
add_action( 'wp_enqueue_scripts', 'my_custom_scripts', 100 );
function my_custom_scripts()
{
wp_dequeue_script( 'Theme-custom' );
#wp_deregister_script( 'Theme-custom' );
// Now the parent script is completely removed
/*
* Now enqueue you child js file, no need to register if you are not
* doing conditional loading
*/
wp_register_script( 'Theme-custom', get_stylesheet_directory_uri() . '/js/custom.js' );
wp_enqueue_script( 'Theme-custom', get_stylesheet_directory_uri() . '/js/custom.js' );
//Now we have done it correctly
}
and i tried
// dequeue your required script file
function your_child_theme_js_file_dequeue() {
wp_dequeue_script( 'Theme-custom' );
}
add_action( 'wp_print_scripts', 'your_child_theme_js_file_dequeue', 1 );
// enqueue your required script file
function your_child_theme_js_file_override(){
wp_enqueue_script( 'Theme-custom', get_template_directory_uri() . '/js/custom.js', array('jquery' ) );
}
add_action('wp_enqueue_scripts', 'your_child_theme_js_file_override');
add_action( 'wp_enqueue_scripts', 'my_scripts_method' );
function my_scripts_method()
{
wp_enqueue_script( 'Theme-custom', get_stylesheet_directory_uri() . '/js/custom.js', array( 'jquery' ));
}
and i tried
add_action('wp_enqueue_scripts', 'wpse26822_script_fix', 20120207);
function wpse26822_script_fix()
{
wp_dequeue_script('Theme-custom');
wp_enqueue_script('Theme-custom', get_template_directory_uri().'/js/custom.js', array('jquery'),20151110,true);
}
I tried even more but will not post
I just want the child theme to load this JS file instead of the original one that comes with the theme
the Handle should stay the same as other files in the theme will also look for this js file
The parent theme registers the JS file like this
wp_register_script('theme-custom', trailing(get_template_directory_uri()) . 'js/custom.js', array('jquery', 'theme-dd', 'type'), false, true);
Just fixed it myself
Just forgot to register the script correct
See code below
add_action( 'wp_enqueue_scripts', 'my_custom_scripts', 100 );
function my_custom_scripts()
{
wp_dequeue_script( 'custom.js' );
wp_deregister_script( 'custom.js' );
// Now the parent script is completely removed
/*
* Now enqueue you child js file, no need to register if you are not
* doing conditional loading
*/
wp_register_script( 'Theme-custom', get_stylesheet_directory_uri() . '/js/custom.js', array('jquery', 'theme-dd', 'type'), false, true );
wp_enqueue_script( 'Theme-custom', get_stylesheet_directory_uri() . '/js/custom.js' );
//Now we have done it correctly
}
I have a website in WordPress. It's have a site preloader (Queryloader2). But when I go to my site its load first site after then loader. But it should load loader first. If I add it in header part then it works well. I am adding in header below this coded:
See the site here (now queryloader added in footer)
<head>
<?php wp_head(); ?>
<script type="text/javascript" src="<?php bloginfo("template_directory"); ?>/js/jqueryloader2.min.js"></script>
</head>
But when I click on any image then its blank with black color.
Now my code for this site is:
functions.php: (just one functions part)
if (is_home() || is_archive()) {
wp_enqueue_script( 'sliphover', get_template_directory_uri() . '/js/jquery.sliphover.min.js', array ( 'jquery' ), null , true);
wp_enqueue_script( 'queryloader2', get_template_directory_uri() . '/js/queryloader2.min.js', array ( 'jquery' ), null , true);
}elseif (is_single()) {
wp_enqueue_style('fancy-box', get_template_directory_uri() . '/css/jquery.fancybox.css', '');
wp_enqueue_script( 'fancybox', get_template_directory_uri() . '/js/jquery.fancybox.js', array ( 'jquery' ), null , true);
wp_enqueue_script( 'easing', get_template_directory_uri() . '/js/jquery.easing.1.3.js', array ( 'jquery' ), null , true);
My one question is: how can add custom jQuery in header of WordPress site? And it just for a specific page (home).
Thanks in advance.
Try This :
Replace false with true.
So js file will add in head.
if (is_home() || is_archive()) {
wp_enqueue_script( 'sliphover', get_template_directory_uri() . '/js/jquery.sliphover.min.js', array ( 'jquery' ), null , false);
wp_enqueue_script( 'queryloader2', get_template_directory_uri() . '/js/queryloader2.min.js', array ( 'jquery' ), null , false);
}elseif (is_single()) {
wp_enqueue_style('fancy-box', get_template_directory_uri() . '/css/jquery.fancybox.css', '');
wp_enqueue_script( 'fancybox', get_template_directory_uri() . '/js/jquery.fancybox.js', array ( 'jquery' ), null , false);
wp_enqueue_script( 'easing', get_template_directory_uri() . '/js/jquery.easing.1.3.js', array ( 'jquery' ), null , false);
I have script
<script src="js/app/script.js" charset="iso-8859-1"></script>
I need to enqueue this js in wordpress with charset. How can I do it ?
I tried do it like that
private static function includeScriptWithCharset($path, $charset){
// I need charset="iso-8859-1"
wp_enqueue_script ($path, plugins_url($path). " ". $charset);
}
I know this question is quite old now, however I have the answer for this, in case this still helps Serg, or helps anyone else who comes across this issue.
The way to do this is to use the WordPress 'script_loader_tag' hook as follows:
// First enqueue your scripts as follows:
wp_enqueue_script( 'my-script-handle', get_stylesheet_directory_uri() . '/some.js', array( 'jquery' ), '6.0');
wp_enqueue_script( 'my-other-handle', get_stylesheet_directory_uri() . '/someother.js', array( 'jquery' ), '6.0');
// Next use the script loader hook as follows:
function my_async_scripts( $tag, $handle, $src ) {
// the handles of the enqueued scripts we want to async
$async_scripts = array( 'my-script-handle', 'my-other-handle' );
if ( in_array( $handle, $async_scripts ) ) {
return '<script type="text/javascript" src="' . $src . '" charset="iso-8859-1"></script>' . "\n";
}
return $tag;
}
add_filter( 'script_loader_tag', 'my_async_scripts', 10, 3 );