I have an issue with the child theme stylesheet being browser cached, and I need to dequeue/reregister, then re-enqueue with a timestamp for the version number. The dequeue then re-enqueue is working fine, but no matter what I try there isn't a version number being appended. I've tried to set the version parameter of wp_enqueue_style() to both true, and a string. No matter what there isn't a version number added as a query string to the stylesheet link href. My full code snippet is below.
function custom_dequeue_enqueue_child_styles() {
wp_dequeue_style('mk-style');
wp_deregister_style('mk-style');
$cacheBuster = filemtime(get_stylesheet_directory() . '/style.css');
wp_enqueue_style('jupiter-child-stylesheet', get_stylesheet_directory_uri() . '/style.css', array(), $cacheBuster, 'all');
}
add_action( 'wp_enqueue_scripts', 'custom_dequeue_enqueue_child_styles', 999999999);
As it turns out, the code does indeed work, and the reason the version number was being stripped out was due to a buried theme option that by default removes all version numbers from all JS and CSS files.
This is in the Jupiter WordPress theme by Artbees, and the theme option is in Theme Options > Speed Optimization > Query Strings from static Files. By default its set to "off" and that removes version numbers. Setting it to "On" appends version numbers as query string parameters. This is a very dumb option to be enabled by default, but now we know.
Related
On wordpress, using GeneratePress free template, I'm trying to push my custom script after all others.
The big problem is that all the scripts of a plugin (Visual Portfolio) are always loaded at the very end, after my scripts.
I tried to put a very high $priority parameter in the add_action() functions but it doesn't work.
function register_scripts_and_styles() {
wp_enqueue_script('custom-js', get_stylesheet_directory_uri() . '/js/custom-js.js', null, true);
}
add_action( 'wp_enqueue_scripts', 'register_scripts_and_styles', 99999 );
Do you have any idea how to fix this problem?
Thank you very much.
Here's idea, js and css files in WP use different technique to figure out in what order js\css files should be loaded.
here's function
wp_enqueue_script('custom-js', get_stylesheet_directory_uri() . '/js/custom-js.js', array('js-handle-of-some-dependency','js-handle-of-some-other-dependency'), true);
Each script has it's handle, it's first argument to this function, in your case it's custom-js.
Based on digging into plugin's code it's main js has handle visual-portfolio
So you can just enqueue your script with setting it's handle as dependency.
And final solution will be:
function register_scripts_and_styles() {
wp_enqueue_script( 'custom-js', get_stylesheet_directory_uri() . '/js/custom-js.js', array( 'jquery', 'visual-portfolio' ), '1', true );
}
add_action( 'wp_enqueue_scripts', 'register_scripts_and_styles' );
I've also added jquery as dependency as I guess you are using jQuery in your js code, you can remove it if not.
I've also set version to '1' - it's a query string version which will be applied to your JS code so when you do update and move code live you can force user's browsers to load a fresh one just changing version here.
And see last argument true, it denotes that your script will be injected in footer.
If your code relies not only on main.js of this plugin you might need to add more dependencies as this plugin enqueues bunch of scripts, see whole list of them in /wp-content/plugins/visual-portfolio/classes/class-assets.php from line 350, at the end of register_scripts method of class defined in this file. So you really can put exactly all script's handles on which your custom js code relies and WP will figure out right order of linking those files to page for you.
Happy codding :)
I've made an Wordpress theme. But recently, after every change I make in the code, the cache in Chrome has to be deleted to see the change.
Can this be handled automatic with a plugin or a line of code to add to the funtions.php?
Yes, you can make the link to the css use a query string with a timestamp. This way you will get a unique link each load.
Assuming you are using wp_enque_style() to load the style, there is a version parameter, set this to the current time with the function time() and it will add it to the link.
function themeslug_enqueue_style() {
wp_enqueue_style( 'mystyle', 'path/to/mystyle.css', false, time() );
}
add_action( 'wp_enqueue_scripts', 'themeslug_enqueue_style' );
More info about wp_enqueue_scripts
I am trying to figure out why the version number query string is not being included in any of my JS or CSS files that I set. I have looked through all documentation and tried different methods. I have even tried just removing the version and Wordpress won't add it's own version. Was hoping to get any other ideas to try from someone so I can cache break Cloudflare easier.
wp_enqueue_style( 'theme-stylesheet', get_template_directory_uri() . '/assets/css/style.css', false, '1.0' );
wp_register_script( 'theme-scripts', get_template_directory_uri() . '/assets/js/blacklab.min.js', array( 'jquery' ), '1.0.2', true );
wp_localize_script( 'theme-scripts', 'localVar', $stream_info );
wp_enqueue_script( 'theme-scripts' );
Odds are that you have a plugin or theme function that is removing the query variable. It's impossible to guess where it might be without seeing your code, but if it was built properly, you should be able to search your plugins and theme folders for:
remove_query_arg: Which is the function used to remove the ver string.
script_loader_src: The hook which is often used to run the above function.
There are some plugins which removes the query strings.
In my case, it was W3 Total cache.
This option can be found in W3 Total cache's browser cache section
I’m using localhost for wordpress theme development by xampp server. When I change in my css file it not work instantly. Its work may be after 3-4 hours. css dynamically linking is ok. Wht’s the problem plz.?
Sometimes I have found that the browser will cache assets when running under localhost and make it appear as though updates are not taking effect. It's hard to tell from your description if this might be the problem, but try clearing cached images and files and see if that helps.
Sounds like you have some intense caching. In local development you can bust the cache with a different version numbers in your wp_enqueue_style call. Version number is the 4th parameter. In this example, we'll update the version number to be the current date/time of the latest change to the style.css file.
/**
* Proper way to enqueue scripts and styles
*/
function theme_name_scripts() {
$cacheBusterCSS = date("U", filemtime( get_stylesheet_directory() . '/style.css' ) );
wp_enqueue_style( 'style-name', get_stylesheet_uri(), array(), $cacheBusterCSS );
}
add_action( 'wp_enqueue_scripts', 'theme_name_scripts' );
This kind of dynamic version number is only for local development and is a bad idea for production sites when you want to leverage caching for better page load times.
I am attempting to load a script using wp_enqueue_style following the advice on the Wordpres Codex, but the script doesn't seem to be included in the source. Is this the correct way to do it?
function load_scripts() {
wp_enqueue_style('bootstrap.css', get_template_directory_uri() . '/css/bootstrap.min.css');
}
add_action('wp_enqueue_scripts', 'load_scripts');
Your action and function looks fine from here. The wp_enqueue_scripts hook should work perfectly for both stylesheets and scripts.
Have you tried echoing something out in the function to see if it's actually being called at all? I.e:
function load_scripts() {
echo "Does this output to the actual page?";
wp_enqueue_style('bootstrap.css', get_template_directory_uri() . '/css/bootstrap.min.css');
}
add_action('wp_enqueue_scripts', 'load_scripts');
If it's not, you might have a problem with your placement of the code, but if you keep everything in functions.php and outside of any other scope this shouldn't be a problem.
Another thing that can cause this behaviour is if you have already registered a stylesheet or script with the same handle ("bootstrap.css" in this case). The first argument in the wp_enqueue_style() function is just a handle for internal dependency management and should be unique, try renaming it to something else and see if that fixes your problem.
Okay, first step is to ensure you are using the correct path of the CSS file.
Add the following line in the functions.php of your theme or other appropriate place.
print( get_template_directory_uri() . '/css/bootstrap.min.css' );
This should print the URL of your desired stylesheet on top of the page. Copy and paste this URL in a new tab, if it opens a stylesheet then you are good to go. Otherwise, there is a mistake in the path.
Second step is to ensure that wp_head() is being called on the page you are displaying. It can be placed in your header template or top of archives/post files etc. This function actually renders the styles and scripts on the page.
Without wp_head(), its basically useless to enque anything as you can add links and scripts manually if you know the exact paths.
Note that in admin mode there is a special hook 'admin_enqueue_scripts'. So, if there is need to load CSS in both modes, it should be done on two hooks.
function load_scripts() {
wp_enqueue_style('bootstrap.css', get_template_directory_uri() . '/css/bootstrap.min.css');
}
add_action('wp_enqueue_scripts', 'load_scripts');
add_action('admin_enqueue_scripts', 'load_scripts');
You are trying to enqueue style on wp_enqueue_scripts hook.
Try wp_print_styles.
add_action('wp_print_styles', 'load_scripts');
Also try to register style, first.
in case you don't want to use wp_head(); in your template, you could also include your styles directly:
<link rel="stylesheet" href="<?php echo get_theme_file_uri( 'style.css' ); ?>">
beware though: wp_head() includes tons of stuff (scripts, styles,...), by wordpress itself as well as most plugins, so only omit it if you know what you're doing.
Register the style first:
function register_plugin_styles() {
wp_register_style('my-plugin', plugins_url('my-plugin/css/plugin.css'));
wp_enqueue_style('my-plugin');
}
http://codex.wordpress.org/Function_Reference/wp_register_style
Do that way. Dont try to enqueue directly. And put code into functions.php of course.
Fist confirm path of the css file is correct or not if is it a correct try with below code :
function load_scripts() {
wp_enqueue_style('load-custom-css-new', get_template_directory_uri() . '/css/bootstrap.min.css');
}
add_action('wp_enqueue_scripts', 'load_scripts');
or Go with this URL.
https://developer.wordpress.org/reference/functions/wp_enqueue_style/
I had the same problem. Although I have implemented this many times before, I lost many hours to find out what went wrong with this.
Because I made my own themes, I had declared this file unit as “fuctions.php” (I lost the -n- letter).
So, besides all the things described above you should also consider, take a good look at the file name and confirm that is “functions.php” (not fuctions, not function etc).
This might be also the reason for you.
I had the same issue. I fixed it by hard refreshing the page with Ctrl + F5 to clear cache and the css loaded normally.
If you are protecting the directory with .htpasswd, the https call generated by get_stylesheet... will fail, and you might lose some time chasing that one.