I'm developing a theme and trying to get wp_enqueue_script to work.
But it is not included, except that the CSS file is working.
I have this function:
function KYT_admin_scripts($dir)
{
if('toplevel_page_KYT' != $dir){
}
wp_register_style('KYT-admin', get_template_directory_uri() . '/css/admin.css', array(), '1.0.0', 'all');
wp_enqueue_style('KYT-admin');
wp_register_script('KYT-admin-js', get_template_directory_uri() . '/js/admin.css', array('jQuery'), null, true);
wp_enqueue_script('KYT-admin-js');
}
add_action('admin_enqueue_scripts', 'KYT_admin_scripts');
it's working.
the problem was in:
array('jQuery')
it's should be a Small Latter: array('jquery')
Related
I need to add sync or defer attribute in Stylesheets CSS file which are included by using wp_enqueue_style.
My Code is below.
function my_scripts() {
wp_enqueue_style('bootstrap', get_template_directory_uri() . '/css/bootstrap.css', array(), '4.4.2');
wp_enqueue_style('my-style', get_stylesheet_uri());
wp_enqueue_style('about-page', get_template_directory_uri() . '/css/about-styles.css', array(), '4.4.3');
wp_enqueue_script('bootstrap-min', get_template_directory_uri() . '/js/bootstrap.min.js', array(), '20151112', true);
wp_enqueue_script('jquery-scrollto', get_template_directory_uri() . '/js/jquery-scrollto.js', array(), '20112', true);
wp_enqueue_style('details-pages', get_template_directory_uri() . '/css/details-pages.css', array(), '4.4.3');
wp_enqueue_style('owl-carousel-css', get_template_directory_uri() . '/css/owl/owl.carousel.css', array(), '4.4.2');
wp_enqueue_script('owl-carousel-js', get_template_directory_uri() . '/css/owl/owl.carousel.min.js', array(), '202', true);
wp_enqueue_script('scripts-js', get_template_directory_uri() . '/js/scripts.js', array(), '20151112', true);
}
add_action('wp_enqueue_scripts', 'my_scripts');
Now I want to add sync or defer attribute in different CSS Style sheets. So please help me, how to add sync or defer attribute. I want to add attributes in just CSS files not in JavaScript files.
Any help will be appreciated.
Thanks.
Try this code
function add_custom_attr( $tag, $handle, $src ) {
$scriptArr = array('bootstrap','my-style','about-page','bootstrap-min','jquery-scrollto','details-pages','owl-carousel-css','owl-carousel-js','scripts-js');
if (in_array($handle, $scriptArr)) {
$tag = str_replace( 'src=', 'sync="false" src=', $tag );
}
return $tag;
}
add_filter( 'script_loader_tag', 'add_custom_attr', 10, 3 );
Another solution using a different filter, which can be used to target a specific script handle:
function frontend_scripts(){
wp_enqueue_script( 'my-unique-script-handle', 'path/to/my/script.js' );
}
add_action( 'wp_enqueue_scripts', 'frontend_script' );
function make_script_async( $tag, $handle, $src ){
if ( 'my-unique-script-handle' != $handle ) {
return $tag;
}
return str_replace( '<script', '<script async', $tag );
}
add_filter( 'script_loader_tag', 'make_script_async', 10, 3 );
I hope this will help you to solve your problems.
Thank you
This is the script I use to control style and script attributes:
enqueue script
This allows you to selectively add Defer, Async, and Lazy Load to stylesheets and scripts. A perfect way to make Google PageSpeed happy LOL.
Applying proper minification, caching and lazy loading of images, along with managing the styles and scripts with this script, changed our PageSpeed score from 60 mobile / 88 Desktop to 74 Mobile and 96 desktop.
I am theming out a bare-bones WordPress theme but I am having trouble enqueuing bootstrap.min.js. All the other scripts I have enqueued work perfectly but for some reason the bootstrap js isn't. Find my code snippet below.
function html5blank_header_scripts()
{
if ($GLOBALS['pagenow'] != 'wp-login.php' && !is_admin()) {
wp_register_script('conditionizr', get_template_directory_uri() . '/js/lib/conditionizr-4.3.0.min.js', array(), '4.3.0'); // Conditionizr
wp_enqueue_script('conditionizr'); // Enqueue it!
wp_register_script('modernizr', get_template_directory_uri() . '/js/lib/modernizr-2.7.1.min.js', array(), '2.7.1'); // Modernizr
wp_enqueue_script('modernizr'); // Enqueue it!
wp_register_script('bootstrap', get_template_directory_uri() . '/js/lib/bootstrap.min.js', array(), '3.3.5'); // Conditionizr
wp_enqueue_script('bootstrap'); // Enqueue it!
wp_register_script('html5blankscripts', get_template_directory_uri() . '/js/scripts.js', array('jquery'), '1.0.0'); // Custom scripts
wp_enqueue_script('html5blankscripts'); // Enqueue it!
Bootstrap relied on jQuery being loaded first so make sure you enqueue bootstrap with jQuery dependency.
wp_enqueue_script( 'bootstrap', get_template_directory_uri() . '/js/bootstrap.min.js', array('jquery'), '3.35', true );
I am able to put bootstrap.min.js with dependency on the native wordpress jquery, but Jquery 1.11.1 does not appear in the source code and Font Awesome also does not work correctly
I've tried some code from other questions in stackoverflow, but I still can not resolve my question
I put some comments in the code below:
UPDATED CODE
function enqueue_jquery() {
// deregister jquery ok
wp_deregister_script('jquery'); // unregister the WP-provided jQuery version
// tag is not added in code
wp_enqueue_script(
'jquery',
get_template_directory_uri() . '/js/jquery.js',
array(), // don't make jquery dependent on jquery...!
'1.11.1',
true
);
}
add_action('wp_enqueue_scripts', 'enqueue_jquery');
function enqueue_styles_scripts() {
//its OK
wp_enqueue_style(
'style-theme',
get_stylesheet_uri(),
array('bootstrap-css')
);
//its OK
wp_enqueue_style(
'bootstrap-css',
get_template_directory_uri() . '/css/bootstrap.min.css'
);
//its OK
wp_enqueue_style(
'stylish-portfolio',
get_template_directory_uri() . '/css/othercss.css'
);
//I changed the directory of the files to css and fonts folders and it worked correctly
wp_enqueue_style(
'font-awesome',
get_stylesheet_directory_uri() . '/css/font-awesome.css'
);
//Appears in header but is working correctly
wp_enqueue_script(
'bootstrap-js',
get_template_directory_uri() . '/js/bootstrap.min.js',null
);
}
add_action('wp_enqueue_scripts', 'enqueue_styles_scripts');
//Its Ok
function wpse_ie_conditional_scripts() { ?>
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<?php
}
add_action( 'wp_head', 'wpse_ie_conditional_scripts' );
?>
So the problem is that 'jquery' is already registered and queued by WP. What I have done in the past is first unregister the WP-provided jquery, and then enqueue my own version. WARNING: test this out thoroughly, because you will now be upgrading jQuery for the whole WP installation!
wp_deregister_script('jquery'); // unregister the WP-provided jQuery version
wp_enqueue_script(
'jquery',
get_template_directory_uri() . '/js/jquery.js',
array(), // don't make jquery dependent on jquery...!
'1.11.1',
true
);
Alternatively, you could load a second version of jQuery in no-conflicts mode, but that is not a really good idea...
Hope this helps!
I was able to resolve without using function to unregister the native wordpress jquery and register my theme jquery
//Without using function
wp_deregister_script('jquery');
wp_register_script('jquery', get_template_directory_uri() . '/js/jquery.js', false, '1.11.1');
wp_enqueue_script('jquery');
function enqueue_styles_scripts() {
//its OK
wp_enqueue_style(
'style-theme',
get_stylesheet_uri(),
array('bootstrap-css')
);
//its OK
wp_enqueue_style(
'bootstrap-css',
get_template_directory_uri() . '/css/bootstrap.min.css'
);
//its OK
wp_enqueue_style(
'stylish-portfolio',
get_template_directory_uri() . '/css/othercss.css'
);
//its OK
wp_enqueue_style(
'font-awesome',
get_stylesheet_directory_uri() . '/css/font-awesome.css'
);
//its OK
wp_enqueue_script(
'bootstrap-js',
get_template_directory_uri() . '/js/bootstrap.min.js',null
);
}
add_action('wp_enqueue_scripts', 'enqueue_styles_scripts');
//Its Ok
function wpse_ie_conditional_scripts() { ?>
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<?php
}
add_action( 'wp_head', 'wpse_ie_conditional_scripts' );
?>
I added custom javascript to a wordpress theme through the wp_enqueue_script()
function.
I placed my file in theme-folder/js/my-javascript.js
But it would not be found by wordpress! I would see the script tag in the html source inserted by wordpress, but clicking on it would take me to a "not found page". I looked around everywhere to see if this was some caching issue. Turned off caching, still nothing.
Finally, I ended up placing my-javascript.js file in the root of theme-folder, instead of 'js' folder. And now my js file was being found and loading.
But now a new problem I don't understand.. I would edit my file and the changes wouldn't reflect! I would have to change the file name of my js file everytime I made a change, renaming the file in my enqueue script function as well...I just wanted to get this task done.
So why does this happen? The site is hosted on dreamhost, and I suspect they used a one-click installer. Does dreamhost do some sort of caching on its own? and that's why?
Am I dumb? or does wordpress somehow know that I hate it?
Edit:
This is how I'm loading the script and how I left it working, but why won't my script refresh when I make changes and why doesn't it work when I place it in theme's 'js' folder?
/* Add floater script */
function add_floater_div_script(){
/* wp_enqueue_script( 'script', get_template_directory_uri() . '/js/script.js', array ( 'jquery' ), 1.1, true); */
if ( is_page(1208) ) {
wp_enqueue_script( 'custom-floater', get_template_directory_uri() . '/custom-floater-8.js', array('jquery'), '', true);
}
}
add_action( 'wp_enqueue_scripts', 'add_floater_div_script' );
Edit: Changed code from "array ( " to "array(" because someone thought this was a problem. I did a quick check myself and PHP is ok with this space so this does not explain the weird wordpress behaviour I'm trying to solve.
Yeah, caching gets really annoying, Though hard reloading should solve the prob but we can't expect client to do it everytime. And WordPress has added a way to take care of that :)
wp_enqueue_script accepts 4th parameter as version number...
https://developer.wordpress.org/reference/functions/wp_enqueue_script/
So just update version after each update...
For development, Just set it as time()... So that it is reloaded every single time and never cached...
wp_enqueue_script( 'custom-floater', get_template_directory_uri() . '/custom-floater-8.js', array('jquery'), time(), true);
Your code will look something like this...
/* Add floater script */
function add_floater_div_script(){
/* wp_enqueue_script( 'script', get_template_directory_uri() . '/js/script.js', array ( 'jquery' ), 1.1, true); */
if ( is_page(1208) ) {
wp_enqueue_script( 'custom-floater', get_template_directory_uri() . '/custom-floater-8.js', array('jquery'), time(), true);
}
}
add_action( 'wp_enqueue_scripts', 'add_floater_div_script' );
BE SURE TO REMOVE time() FROM PRODUCTION VERSION.
Or your file will never be cached by browser... Just set the version of your theme after dev is complete, so that every new version gets JS updated.
Try by wrapping your enqueue action in a function that you'll call on after_setup_theme hook in your functions.php
<?php
add_action( 'after_setup_theme', 'yourtheme_theme_setup' );
if ( ! function_exists( 'yourtheme_theme_setup' ) ) {
function yourtheme_theme_setup() {
add_action( 'wp_enqueue_scripts', 'yourtheme_scripts' );
}
}
if ( ! function_exists( 'yourtheme_scripts' ) ) {
function yourtheme_scripts() {
if ( is_page( 1208 ) ) {
wp_enqueue_script( 'custom-floater', get_template_directory_uri() . '/custom-floater-8.js', array( 'jquery' ), '', true );
}
}
}
Also be sure you're on page with id of 1208 to see if the script is actually loaded (because of the conditional).
And do a hard refresh (Ctrl+Shift+R).
The most common issue I see is an error in how you're enqueueing the file. Can you post code in your functions.php file that's enqueuing the JS file? Always be sure to reference the codex and other developer materials as well: https://developer.wordpress.org/themes/basics/including-css-javascript/
For future reference, it should look something like this:
wp_enqueue_script( 'script', get_template_directory_uri() . '/js/my-javascript.js');
Edit: After OP posted their code I saw they have a space after array which is causing an error, here is the correct code:
function add_floater_div_script() {
if ( is_page( 1208 ) ) {
wp_enqueue_script( 'custom-floater', get_template_directory_uri() . '/custom-floater-8.js', array( 'jquery' ), '1.0.0', true );
}
}
add_action( 'wp_enqueue_scripts', 'add_floater_div_script' );
add_action('wp_enqueue_scripts', 'load_scripts', 12);
function load_scripts() {
wp_enqueue_script('filename', get_template_directory_uri() . '/js/filename.js', array(), '1.0.0', true );
}
This is the proper way to import js in wordpress..
An really easy way to prevent caching of loaded resource files like Javascript-files is to add an random value after the filename that is to be included like so:
wp_enqueue_script( 'custom-floater', get_template_directory_uri() . '/custom-floater-8.js' . '?' . rand(), array('jquery'), '', true);
The PHP function
rand()
generates a random number and is appended to the file name after a '?' as query string. This forces reloading of the file every time the webpage is loaded.
Of course dismiss it for the production version.
Sometimes the issue could be simple somewhere a duplicated declaration of the name of the enqueue_script.
wp_enqueue_script( 'custom-script', get_template_directory_uri() . '/custom-floater-
8.js', array('jquery'), '', true);
...
wp_enqueue_script( 'custom-script', get_template_directory_uri() . '/custom-floater-
8.js', array('jquery'), '', true);
Don't use twice the same name 'custom-script' for example. The second will not be loaded.
I am using following code to add some scripts in WP pages like
function add_js() {
wp_deregister_script('jquery');
wp_register_script('jquery', "http" . ($_SERVER['SERVER_PORT'] == 443 ? "s" : "") . "://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js", false, null);
wp_enqueue_script('jquery');
wp_enqueue_script( 'bootstrap-js', get_template_directory_uri() .'/js/bootstrap.min.js', array('jquery'),'',true );
wp_enqueue_script( 'colorbox-js', get_template_directory_uri() .'/js/jquery.colorbox-min.js', array('jquery'),'',true );
wp_enqueue_script( 'img-loader', get_template_directory_uri() .'/js/img-load.js', array('jquery'),'',true );
wp_enqueue_script( 'box-tanzim', get_template_directory_uri() .'/js/tanzim.js', array('jquery'),'',true );
wp_enqueue_script( 'scripts-js', get_template_directory_uri() .'/js/scripts.js', array('jquery'),'',true );
}
add_action( 'wp_enqueue_scripts', 'add_js' );
but I don't want to add unnecessary scripts on some pages! for example I would like to have all of above scripts on front-page.php but on other pages I don't need last three scripts.
Can you please let me know how I can filter them?
Thanks
something like this maybe
if ( is_page_template( 'front-page.php' ) ) {
// wp_enqueue_script()
}