I have a problem with a WordPress site.
When I am trying to update page content or edit css file, changes not appearing in front-end. It looks like cache problem, but I empty my cache every time and nothing helps. I should wait some hours or try another browser to see changes that I've made.
I am not using any cahce plugins and don't know why content changes take so long to go live.
Please help me.
This is standart browser cache for CSS and JS files. You can reload page with CTRL+SHIFT+R buttons. If you want to display your new CSS for all users, you need to change the version of CSS-file in your theme. Read More: https://codex.wordpress.org/Function_Reference/wp_enqueue_style
I am facing this kind of issues these days too, what I do is, in the
wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer );
in $ver i place php function time() it changes after every second, I think this technique is best for development purpose.
so the final enque will be
wp_enqueue_script( 'myscript', filesourse/file.js, array(''), time(), true );
for the style you can also use time() at the $ver position
wp_enqueue_style( 'mystyle', filesourse/file.css, array(''), time(), 'all' );
Hope this will work for you too,
If you have cache folder in your rootfolder rename it and try,because your all site configuration store that cache folder in root folder.
Related
I'm bursting my brains out. I just can't figure out why my custom stylesheets/scripts won't load.
The stylesheet/scripts are properly enqueued (see below) but for some reason, if I load the stylesheet on my browser, or check in the browser console. it would return a 404
enqueued via
wp_enqueue_style('libraries', get_template_directory_uri() . '/assets/build/css/libraries.css');
wp_enqueue_style('site', get_template_directory_uri() . '/assets/build/css/site.css');
I have also checked file permissions, and theme and file folders are set to 770.
What do you think is the issue?
Try with get_theme_file_uri() like this:
wp_enqueue_style ( 'site', get_theme_file_uri('/assets/build/css/site.css'), ... );
Here the link to the documentation of this function:
https://developer.wordpress.org/reference/functions/get_theme_file_uri/
I developed my WP WooCommerce shop locally with XAMPP and finally got around to upload my site.
1) How do you make edits to your CSS when the site is live and online?
Do you use Appearance > Theme Editor to make changes to your style.css file that is saved in your child theme or is there a plugin that is "better" than the default one?
Is there a shortcut for commenting lines out?
Or do you have an identical version locally that is synced to the uploaded version and do the edits locallly and upload the final edited style.css file?
I'm not sure what the best workflow is.
2) I find myself making changes and nothing happens on the live site. Do I have to clear the cache and than login again to get into my WP dashboard? Seems very tedious... I searched the forum and found that you can do something with this line
wp_enqueue_style( '_s-style', get_stylesheet_uri(), array(), time() );
can someone elaborate how and where to use it? does it go into the functions file?
Use this line your functions.php
function yourthemename_style_nscripts(){
wp_enqueue_style( '_s-style', get_stylesheet_uri(), array(), time() );
}
add_action('wp_enqueue_scripts', 'yourthemename_style_nscripts');
otherwise,
open your functions.php then find your yourthemename_style_nscripts function then paste it.
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’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.
WordPress does several operations to show a single page, so the first idea which came to my mind was to save the website as follows:
wget -r --no-parent http://localhost/mywebsite
Then, upload the saved website to my hosting. e.g.
http://www.mywebsite.com
The idea was to automatize that procces. However I realized that the cache plugins already do that.
I believe the next most important issue is that most of the loaded Javascript is never used. How to load only the Javascript needed? Everything I have found on the Internet just explains how to code it correctly, but not how to tell WordPress to load only the Javascript needed in theme, plugins, etc.
I think the solution is to download the website as I described. Then use some software or online service to reduce the Javascript and CSS code to the minimum, so only the needed Javascript functions will be on the website. Does that sofware exist? Is there some other procedure a better option?
if you google js minify and css minify there are online tools. e.g. http://jscompress.com/
You are right about the un-needed js and css it seems every plugin and theme loads a js file and css files (boilerplates and bootstrap) which is loaded on every page which is very wasteful (wordpress sites can often load 30-40 js files alone), but i suppose its up to end user to optimize.
you can use wp_dequeue_script( $handle ); to remove un-needed js and css but you need to find out the handle first so to output the handles:
function inspect_scripts() {
global $wp_scripts;
foreach( $wp_scripts->queue as $handle ) :
echo $handle . ' | ';
endforeach;
}
function inspect_styles() {
global $wp_styles;
foreach( $wp_styles->queue as $handle ) :
echo $handle . ' | ';
endforeach;
}
add_action( 'wp_print_scripts', 'inspect_styles', 1000 ); //repeat for js
now you can dequeue the lot and add 1 optimized js file and css file (the below is for a page template, if you want it in your functions you can qualify its by testing url / wp query vars)
function dequeue_script(){
wp_dequeue_script( 'contact-form-7' );
wp_dequeue_style( 'contact-form-7' );
//enqueue new scripts / styles
wp_enqueue_script( 'homepage-js', 'custom-url', array( 'jquery' ), '', true );
wp_enqueue_style('homepagecss', 'custom-url');
}
add_action( 'wp_print_scripts', 'dequeue_script', 100 );
Obviously to make use of browser caching as much as possible, be clever about your files, a cut down version just for the landing page is a good idea as you want this to load immediately.
But on the landing page what is the next page/pages?
Pre-load the css file for these pages to the cache whilst the user is on the page (not during page load)! Any big js files to be loaded and you think the person will spend some time on a page - pre-load the js file!