I am learning web and WordPress theme development. Is there a way to force the browser to NOT use cache version of the website when I have have made changes to the HTML, CSS, JS files.
We can let the browser know that we have made changes to the CSS/JS by changing the version of the file:
function pr_scripts_styles()
{
wp_enqueue_script('my-script', get_stylesheet_directory_uri() . '/js/script.js', array(), '20200902', true);
}
add_action('wp_enqueue_scripts', 'pr_scripts_styles');
as you see 20200902 that is the version, simply increase it by 1 after we have some change.
Related
I am having problem on my Wordpress to save changes on module.css file.
It appears that I have a minified file : module.min.css which comes with the theme.
Each times I make a change it the module.css file, it doesn't change it on my website page. I check with google inspector, and the minified file is loaded, obvioulsy, without my changes.
My website page : https://dermelia.fr/epilation-laser-un-acte-medical/
I saw it could be a caching problem, then I tried to purge cache, I use WP Rocket plugin and Clouflare. I cleaned the cache on both Clouflare and my website, still nothing...
I would like to add just a border-top on my ".widget ul li { " class
Any suggestion ?
Hi Changing in your css files will not reflect in your min.css files you have to update it.
To updated the changes use,
grunt uglify
grunt cssmin
if you want to update html use,
grunt htmlmin
If you don't have grunt please install it.
If module.min.css is generated at run time by some plugin like autoptimize, it is most probably cache-related problem.
However, in your case, the theme most probably simply has two options (minified & not minified CSS) & you have chosen to use minified version to improve performance.
In this case, CSS files are completely independent & change in 1 file, will not affect another in any way.
You have two options:
Make changes in not-minified CSS file and then minify it on your own. Finally update both files.
Switch to use not-minified version & install something like previously mentioned autoptimize to calculate minified files at runtime.
Please note, that in both cases you would be better off by not modifying original theme files & creating a child theme instead.
Otherwise, all your changes will be lost once the theme will be updated.
I had an old php site using a theme I bought, which uses the cubeportfolio 4.1 image gallery... see plugin: here and here.
I am rebuilding the site as a static site with gatsby, and have had to rebuild the gallery component by:
moving all the static assets (css, js etc) into my /static gatsby folder
hardwiring all the necessary js and css links as into my html.jsx file
fetching my image assets from graphql and rebuilding the gallery with very basic react components
Amazingly it works, and the cubeportfolio image gallery populates and resizes all the images into a perfect grid. Mouseovers etc also work.
problem:
when I navigate away, and come back to the home page (i.e. change routes), the cubeportfolio grid doesn't redraw itself! The image assets are just dumped on the page and nothing kicks in to shuffle them into a grid of appropriately resized elements. So, all i know at this point is that there is a bit of javascript somewhere that should be re-triggered, but isn't.
Googling, I found a snippet and tried adding the following to gatsby-browser.js:
exports.onRouteUpdate = () => {
// force cubeportfolio to redraw
$(window).trigger('resize.cbp');
}
This did not work. Any help appreciated.
OK figured it out. I found the code the old theme was using to set up cubeportfolio. It was in one of the static js files, so I think it was loaded once at startup and then subsequent returns to the page with the gallery didn't necessarily reload the js file.
Fix was to lift that code and move it to gatsby-browser.js:
exports.onRouteUpdate = ({location}) => {
// force cubeportfolio to redraw
if (location.pathname === '/') { // or path to whatever page has cubeportfolio
$('#grid-container').cubeportfolio({...}); // pass needed options
}
}
I have a wordpress website. I usually make changes in CSS file of theme without any problem but there is file in which CSS changes do not appear. But they do appear while inspecting element.
But while inspecting it shows some digits after the file name. The file name is theme.css, but inspector show me the file name: theme.css?ver=15350008013:1
CSS is compacted and all codes are in one line.
Any change in the CSS file not happen but in the inspector shown. Why CSS editing not working?
This is fairly standard of most caching plugins for Wordpress.
theme.css?ver=15350008013:1
Is requesting a cached version of the file.
The CSS being all in one line is a minified version of the file. This is done to reduce the load on the server by making the file smaller.
Suggestions:
Look through your theme settings to see if there is any mention
of caching.
Look through your plugins and see if there is any
mention of caching.
Once found, clear / flush the cache.
Your changes should now be loaded by the server.
Generally what happens when you clear out the cache is that your plugin / theme will be unable to find a cached version and will minifiy and generate you a new version based off the original and you will see a new number at the end of the request string to tell the browser that the version it has downloaded previously is old and that it needs the new one.
Long title, sorry. Anyway:
I've got a WordPress site with a custom theme and its child theme. For a while, updating the child theme's style.css would produce results as expected - a refresh (or hard-refresh) of the website, and it would work from then on out.
Now, however, my updates are only reflected when I hard-refresh a certain page. If I then refresh the same page, or navigate to a different page on which the changes should be applied, the changes are reverted and the old style.css file is called instead.
I am using, and have tried purging all the caches available through the "W3 Total Cache" plugin. I have tried disabling "W3 Total Cache" entirely and installing the "Style.css Load Last Version" plugin, which as far as I know is using this trick to always call for the latest style.css file. I've tried visiting the page using incognito mode. In all cases, the behavior is the same - hard refresh works as a one-time deal, either refreshing the same page or navigating to different parts of the site which should be effected results in the browser calling for an older style.css file version and the changes are reverted.
Long test, sorry :) Anyway, I would love some feedback on this issue as its driving me nuts.
Which method are you using to load your child-theme's css file??
If you are using a link to include your child css as
<link rel="" ..............> then try appending the version at the end of you file name
<link rel="stylesheed"...... href="your_child_style.css?v-=1.10"> where ?v=1.10 is the version number. Every time you update your css increase the version number(In case you don't want to change the version every time i suggest you use the php time() function to generate a unique number eveytime the css is loaded)
If your css file is loaded automatically then make sure you have version decalared in you css file as
/*
Theme Name: yourchildtheme
Version: 1.2
*/
Try to change the version and it will work just fine.
Good luck
add_action( 'wp_enqueue_scripts', 'my_child_theme_scripts' );
function my_child_theme_scripts() {
wp_enqueue_style( 'parent-theme-css', get_template_directory_uri() . '/style.css' );
}
I'm trying to get Chrome's DevTools to auto reload a page when I save a watched SCSS file which will compile and make changes to the CSS file.
I have the Auto-reload generated CSS option checked, but sadly, it isn't working as expected.
Whenever I make changes to the SCSS file and save it, the page doesn't reload. I have added my working folder to the workspace and also mapped the files (both the SCSS file and the generated CSS) to their respective versions on my local system drive. This, however, doesn't help.
The SASS source maps seems to be working fine as the scss files are reflected in the DevTools inspector:
I'm using Chrome version 31:
Have I missed out anything that I don't know of? What else do I have to do to get this to work?
I used drupal in this case and drupal generate css link like 'style.css?abc'. Problem in this suffix '?abc'. You need to start file mapping from LOCAL (press right-click on local) 'style.css' to WEB 'style.css?abc' (shown in list). Not from WEB to LOCAL. If result is correct WEB-links disappears from list in 'resourses' tab.
here is a good solution, to avoid this mapping issue of .css?201203241721 / .js?201203241721-files as szdv mentioned with drupal. I have had it with typo3 and this solved it:
/* remove in production *************************************************/
//filter typo3 temp file src/href with ?date ending for chrome workspaces
$('script, link').each(function(){
rpString = /\?[0-9]*/;
if(this.src){
this.src = this.src.replace(rpString,'');
}
if(this.href){
this.href = this.href.replace(rpString,'');
}
});
/* ******************** *************************************************/