I'm noticing that my style.css changes are only showing up after a hard refresh, but then they revert back to an older version when I refresh normally

Apologies for the lengthy title. Here's the issue:

I have a WordPress website with a custom theme and its corresponding child theme. Previously, updating the style.css file of the child theme would show the changes immediately after a website refresh or hard refresh.

However, currently, the updates only appear when I hard-refresh a specific page. Upon refreshing the same page or navigating to another page where the changes should be visible, the old style.css file is loaded instead.

I've attempted clearing all caches provided by the "W3 Total Cache" plugin. Additionally, I disabled "W3 Total Cache" and installed the "Style.css Load Last Version" plugin, utilizing this method to always fetch the latest version of the style.css file. I even tried accessing the page in incognito mode. However, the problem persists - only a hard refresh seems to work temporarily, and subsequent refreshes continue to display the outdated style.css file.

I know this is a long description, but any help on resolving this frustrating issue would be greatly appreciated.

htmlcsswordpresscachingweb

Answer №1

Are you currently loading your child theme's CSS file using a specific method? If you are utilizing a link tag to incorporate your child CSS, consider adding the version at the end of the file name like this:

<link rel="stylesheet" href="your_child_style.css?v=1.10"> where ?v=1.10 represents the version number. To ensure proper updating, increase the version number whenever the CSS is modified. In case manual updates are cumbersome, employing the php time() function can automatically generate a unique number each time the CSS loads.

If your CSS file is loaded automatically, verify that the version is declared within the file itself:

/*
Theme Name: yourchildtheme
Version: 1.2
*/

Alter the version accordingly to resolve the issue smoothly. Best of 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' );
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Create a vibrant PNG image background that changes dynamically based on the dominant color of the

Is it possible to dynamically set the background color of a PNG image, either white or black, based on the dominant color in the image? For example, this image should have a dark background: https://i.stack.imgur.com/cerjn.png And this one should have a ...

javascripthtmlcssvue.js

Curious as to why body.scrollTop functions differently in Google Chrome and Firefox compared to Microsoft Edge

Up until recently, the code body.scrollTop was functioning correctly in my Chrome browser. However, I've noticed that now it is returning 0 in both Firefox and Chrome, but still giving the proper value in Microsoft Edge. Is there anyone who can assis ...

javascripthtmlcss

Take away the follow option on the embedded tweet

I need to customize the appearance of embedded tweets on a website by removing the follow button as well as the reply, favorite, and retweet buttons in the footer. Here is a simple HTML example: <blockquote class="twitter-tweet"> <a href="htt ...

jqueryhtmlcsstwitter

CSS animation using a series of linked elements

Is there a way to make my buttons animate sequentially? For example, the second button should start animating only after the first one has finished. Any assistance would be greatly appreciated! a { padding: 6px; display: block; width: 50px ...

htmlcssanimation

Tips for making a sidebar sticky when scrolling

In order to keep the right-side bar fixed, I have implemented this javaScript function: <script type="text/javascript> $(document).ready(function () { var top = $('#rightsidebar-wrapper').offset().top - parseFloat($('#rightsideb ...

javascriptcsshtmlposition

The art of caching for optimal performance while ensuring thread safety

In order to optimize performance and reduce costs, I have implemented data caching in an ASP.NET website using the System.Web.Caching.Cache-Class. The data being cached is expensive to retrieve and changes infrequently, only when our content team makes upd ...

c#asp.netcachingthread-safety

Drop down menu alignment issue: unable to center menu on the page

My dropdown menu is misaligned and not centering on the page, even after multiple attempts to fix it using HTML and CSS only. I have refrained from using JavaScript or JQuery for this issue. CSS Code: <style type="text/css"> /* STYLING FOR DROPDOWN ...

htmlcssmenudrop-down-menu

css the vertical column is unable to reach 100% vertical

Check out my website at I need help getting the black column with my thumbnails to extend all the way down on the site. Here is the CSS code for the thumbnails: #thumbnails { position:absolute; top: 110px; width: 190px; height: 100%; ...

css

Is there a way to automatically compile LESS files whenever I save a document?

After installing Less using npm with the command $ npm install -g less I currently compile my source files to .css by running $ lessc styles.less styles.css Is there a method through the command line to automatically compile the document when saving it ...

cssnode.jsnpmless

Update the text on a button using a different button

function modify_button_text(){ //update the word from cat to dog. } <button id="button_1_id" >Cat</button> <br><br><br><br> <button id="modify_button_text_btn" >Change the Text of Above Button</button> ...

javascripthtmljquerycssarrays

How to position two divs next to each other using CSS with just one adjustment

Is it possible to position two divs side by side, with one of them moving continuously up and down while containing an image? I attempted the following code: <div> <div style="margin:30px;width:100px;height:250px;position:relative;float:left; ...

htmlcssmove

"Troubles with directing on websites using jQuery, CSS,

I have been struggling with creating this navigation bar for weeks now and I keep running into issues. What I am attempting to achieve is a primary navigation bar that, when hovered over, displays a secondary navigation menu below and slightly to the righ ...

jqueryhtmlcssnavigation

Validation of default values in contact forms

Obtained a free contact form online and hoping it works flawlessly, but struggling with validation for fields like "Full Name" in JS and PHP. Here is the HTML code: <input type="text" name="contactname" id="contactname" class="required" role="inpu ...

phpjavascripthtml

a div sandwiched between two others

I am trying to nest a <div> within another <div> and center it within the parent. Here is my current approach: <div id="redthing"> <div id="whitebox" > </div> </div> The CSS code I am using is as follows: #red ...

csshtmlmargin

Need some assistance in finding a way to input multiple values from multiple buttons into a single input field in JavaScript

Hello, I am looking for a little help with reading multiple values using multiple buttons such as 1, 2, and 3, and displaying the output in the input like '123' instead of just one number at a time. Concatenate numbers with every click. <inpu ...

javascriptjqueryhtmlajax

What is the best way to emphasize a div depending on a query outcome?

A new application is in the works for a gaming project. This app is designed to display the location of a specific monster, utilizing a database containing information about monsters and their corresponding maps. Currently, the application functions almos ...

javascriptphpjquerycssajax

Activating Vue-Bootstrap components through an image click event in VueJS 2

Seeking to achieve: VueJS integration with Bootstrap for clickable cards I am currently working on a VueJS project where I want the cards to be clickable and reveal collapsible elements upon click. To accomplish this, I have implemented a button with the ...

htmlcssvuejs2bootstrap-vue

What causes CSS to fail to load in React but work normally in Next.js?

We are currently experiencing an issue with a component located in a Git Submodule that is being used by both Next.js and React. While everything is functioning correctly in Next.js, React is unable to accept the way the CSS is being loaded: import styles ...

javascriptcssreactjs

Video HTML autoplay feature malfunctioning

I have been attempting to use the <embed> tag in order to showcase a video on my webpage. However, I have encountered an issue where the video begins playing automatically when the page loads. In an effort to remedy this situation, I included autost ...

htmltagsembed

How can I position two divs side by side within an Appbar?

I would like the entire Container to be in a single row, with the Typography centered as it already is, and the toggle-container to float to the right <AppBar className={styles.AppBar}> <Toolbar> <Container> ...

javascriptcssreactjsflexboxmaterial-ui