Question 165656 in Wordpress Question posted in
The official Wordpress documentation can be found here.

Why don’t WordPress CSS file & inspector match?

I am working on a WordPress site. I’ve changed one line of CSS, but no matter what I do it’s not reflecting that change in my local development environment. I’ve tried shutting down and restarting everything and it still doesn’t match. I thought that maybe another rule was overriding it, but the inspector shows it is coming from the exact same line in my CSS file. I’ve checked this in both Chrome and Firefox. I’m at a loss for why the browser isn’t receiving the change.

CSS

.entry-content p {
        margin-bottom: 10px;
    }

Inspector

.entry-content p {
        margin: 0;
    }
Tags:

2

Answers


  1. 0

    The most common reason would be browser caching. When you enqueue a script or stylesheet with WordPress, the wp_enqueue_script and wp_enqueue_style functions allow you to specify a "version" in the 4th parameter. This version is appended to your URL like so ?ver=.

    You can take advantage of this, by having your server read the last time that your CSS or JS file was modified (using filemtime()) and using that as the version number. This will ensure that your file never gets cached, as a change to the file will result in a new URL.

    I’ve included an example below:

    function enqueue_scripts()
{
    $relative_path = '/style.css';

    wp_enqueue_style( 'my-script', get_theme_file_uri( $relative_path ), [], filemtime( get_theme_file_path( $relative_path ) ) );
}

add_action( 'wp_enqueue_scripts', 'enqueue_scripts' );
    Login or Signup to reply.
  2. 0

    It’s difficult to determine what exactly caused your issue, so my answer will focus on what may have caused it.

    Browser cache

    Web-browsers temporarily save the CSS files and will not request them for a while to reduce resource waste. When that caching period ends, the browser will request that file again.

    You may want to change the link tag loading the file whenever it’s changed by adding some URL parameter, like ?version=1234 and change that each time the CSS has changed.

    Server cache

    In some cases it’s labor-intensive for a server to generate a page each time a request is addressing it. For this purpose static web-pages are being generated and while that static file’s lifecycle is not over, you will always get the old version. You could clear the server cache, which is a drastic measure, or ensure that the given file’s cache only is invalidated, depending on what server-caching you are using.

    Wrong file

    It’s possible that there are several copies of the same file and you applied a fix for one copy and the other copy still has the old version. Search for the file and see whether there are more than one copy for it.

    Server tools

    You might have some server tools which preprocess CSS files before sending them. An example is the minifier. While your source file may have been correctly changed, it is possible that an unchanged obfuscated copy of that file is in use.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search