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 );
Related
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 want to use countUp.js on my custom theme in Wordpress.
When I add the file with wp_enqueue_script(), I get an error:
Uncaught SyntaxError: Unexpected token 'export'
I've read that it can be fixed setting on the <script> label type="module", but I don't know how to do that, as that option doesn't exist in wp_enqueue_script()...
Anyone can hel me?
One can add attributes to a script by applying filter 'script_loader_tag'.
Use add_filter('script_loader_tag', 'add_type_attribute' , 10, 3); to add the filter.
Define the callback function like the example given on the link above:
function add_type_attribute($tag, $handle, $src) {
// if not your script, do nothing and return original $tag
if ( 'your-script-handle' !== $handle ) {
return $tag;
}
// change the script tag by adding type="module" and return it.
$tag = '<script type="module" src="' . esc_url( $src ) . '"></script>';
return $tag;
}
I want to address a specificity to Paul Naveda's answer.
Yes it works, but with this your basically losing any additional inline scripts.
What I mean is, when using wp_add_inline_script() function, which basically takes what you are giving it, and either add it just before or after the current 's handle:
wp-includes/class.wp-scripts.php:393 (github)
$tag = $translations . $cond_before . $before_handle;
$tag .= sprintf( "<script%s src='%s' id='%s-js'></script>\n", $this->type_attr, $src, esc_attr( $handle ) );
$tag .= $after_handle . $cond_after;
$tag = apply_filters( 'script_loader_tag', $tag, $handle, $src );
So by doing:
$tag = '<script type="module" src="' . esc_url( $src ) . '"></script>';
You loose the before and after tag.
To make sure you're not losing it, either use wp_localize_script() (it's supposed to only be used for translating though)
or add those lines of codes:
function add_type_attribute($tag, $handle, $src) {
if ('your_handle_here' === $handle) {
/** #var WP_Scripts $wp_scripts */
global $wp_scripts;
$before_handle = $wp_scripts->print_inline_script( $handle, 'before', false );
$after_handle = $wp_scripts->print_inline_script( $handle, 'after', false );
if ( $before_handle ) {
$before_handle = sprintf( "<script type='text/javascript' id='%s-js-before'>\n%s\n</script>\n", esc_attr( $handle ), $before_handle );
}
if ( $after_handle ) {
$after_handle = sprintf( "<script type='text/javascript' id='%s-js-after'>\n%s\n</script>\n", esc_attr( $handle ), $after_handle );
}
$tag = $before_handle;
$tag .= sprintf( "<script type='module' src='%s' id='%s-js'></script>\n", $src, esc_attr( $handle ));
$tag .= $after_handle;
}
return $tag;
}
add_filter('script_loader_tag', 'add_type_attribute' , 10, 3);
It keeps the before and after and print it if present
Keep in mind this is still not perfect, because of $translations variable, but this is another approach if you are using wp_add_inline_script()
This is a little more complicated way to go... But I've used the following to add defer, crossorigin etc...
I don't think it's that official yet but from what I've read it's not a bad way to do it (and I've seen this approach in production for several plugins).
So, (adjust your params/variables to suit obviously) script registering (not just enqueue) is required (see https://developer.wordpress.org/reference/functions/wp_script_add_data/):
wp_register_script('countup-js', 'https://cdnjs.cloudflare.com/ajax/libs/countup.js/2.0.0/countUp.min.js', ['jquery'], $js_version, true);
wp_enqueue_script('countup-js');
wp_scripts()->add_data('countup-js', 'type', 'module');
And then your filter (like the top answer here, but I think this outlines how you can set it up to be more reusable, flexible etc)
add_filter('script_loader_tag', 'moduleTypeScripts', 10, 2);
function moduleTypeScripts($tag, $handle)
{
$tyype = wp_scripts()->get_data($handle, 'type');
if ($tyype) {
$tag = str_replace('src', 'type="' . esc_attr($tyype) . '" src', $tag);
}
return $tag;
}
To further add to what #Zeldri said, you don't need to make use of wp_localize_script(), we can keep that function for translations as it was first intended for.
Below is the code you'd need if you don't want to lose code added using wp_add_inline_script()
function make_scripts_modules( $tag, $handle, $src ) {
if ( 'your-script-handle' !== $handle ) {
return $tag;
}
$id = $handle . '-js';
$parts = explode( '</script>', $tag ); // Break up our string
foreach ( $parts as $key => $part ) {
if ( false !== strpos( $part, $src ) ) { // Make sure we're only altering the tag for our module script.
$parts[ $key ] = '<script type="module" src="' . esc_url( $src ) . '" id="' . esc_attr( $id ) . '">';
}
}
$tags = implode( '</script>', $parts ); // Bring everything back together
return $tags;
}
add_filter('script_loader_tag', 'make_scripts_modules' , 10, 3);
This will turn the required script into a module and leave the inline scripts alone.
Inspired by #PaulNaveda, #peter and #zeldri
A small plugin demontrating JS modules support, including localization and inline scripts.
Content of wp-content/plugins/js-module-support-demo/js-module-support-demo.php
<?php
/*
Plugin Name: Javascript Module Support - Demo
Plugin URI: https://froger.me/
Description: Javascript Module Support - Demo
Version: 0.1
Author: Alexandre Froger
Author URI: https://froger.me/
*/
/* ---------------------------------------------------------------
* Below is the main logic - it can be used in plugins or a theme
* --------------------------------------------------------------- */
add_filter( 'script_loader_tag', 'add_type_attribute', 10, 3 );
function add_type_attribute( $tag, $handle, $src ) {
$type = wp_scripts()->get_data( $handle, 'type' );
if ( $type && is_string( $type ) ) {
$tag = str_replace( ' src=', 'type="' . esc_attr( $type ) . '" src=', $tag );
}
return $tag;
}
/* ---------------------------------------------------------------------------------------
* Below is the demo code - it adds the demo scripts (main, module, localization, inline)
* --------------------------------------------------------------------------------------- */
add_action( 'wp_enqueue_scripts', 'demo_scripts', 10, 1 );
function demo_scripts() {
$inline_script = '
console.log(\'this is an inline script added to demo.js\');
';
wp_enqueue_script( 'demo', plugin_dir_url( __FILE__ ) . 'js/demo.js', array(), false, true );
wp_scripts()->add_data( 'demo', 'type', 'module' );
wp_add_inline_script( 'demo', $inline_script );
wp_localize_script( 'demo', 'LocalizationVar', array( 'key' => 'value' ) );
}
Content of wp-content/plugins/js-module-support-demo/js/demo.js
import moduleVar from './module.js'
console.log(moduleVar);
console.log(window.LocalizationVar);
Content of wp-content/plugins/js-module-support-demo/js/module.js
const moduleVar = 'This is a variable from module.js';
export default moduleVar;
Upon execution of the full demo code, the following is seen in the console:
this is an inline script added to demo.js
This is a variable from module.js
{"key":"value"}
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
I want to be able to only enqueue certain JavaScript when there is a form embedded (emedded with shortcode and php).
Is there an action hook for Gravity Forms that triggers when a form is embedded? Then I could do something like this.
add_action('some_gforms_hook', function() {
add_action('wp_enqueue_scripts', function() {
wp_enqueue_script( 'postcode', get_bloginfo('stylesheet_directory') . '/modules/Postcode/assets/js/postcode.js', array('jquery') );
wp_localize_script( 'postcode', 'ajax_object', array( 'ajax_url' => admin_url( 'admin-ajax.php' ) ) );
});
});
If there is no such hook, is there another (non hacky) way of archiving what I want?
You're looking for gform_enqueue_scripts. It passes the $form object so you determine if your scripts should be loaded for the given form.
I found this example in the documentation.
add_action( 'gform_register_init_scripts', 'gform_format_money' );
function gform_format_money( $form ) {
$script = '(function($){' .
'$('.gf_money input').each(function(){' .
'$(this).val(gformFormatMoney($(this).val()));' .
'}).change(function(){' .
'$(this).val(gformFormatMoney($(this).val()));' .
'});' .
'})(jQuery);';
GFFormDisplay::add_init_script( $form['id'], 'format_money', GFFormDisplay::ON_PAGE_RENDER, $script );
}
The problem with this example is that I don't like the JS written in my PHP files and the add_init_script() function needs a string with JS as argument.
I could use file_get_contents() to get the JS from the file but then I will not be able to localize the script for injecting the AJAX url.
I now use the hook as in the question and it works perfect.
add_action( 'gform_register_init_scripts', function() {
add_action('wp_enqueue_scripts', function() {
wp_enqueue_script( 'postcode', get_bloginfo('stylesheet_directory') . '/modules/Postcode/assets/js/postcode.js', array('jquery') );
wp_localize_script( 'postcode', 'ajax_object', array( 'ajax_url' => admin_url( 'admin-ajax.php' ) ) );
});
});
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);