Force CSS Changes to Go Live Immediately in WordPress

There are several ways to add CSS in WordPress, but sometimes you’ll save your CSS file, go back and refresh the page, but find the change didn’t happen.

What’s happening here? Caching. Caching is when a computer saves a version of a website so it will load faster the next time it’s called. This caching can happen in your browser level, or on the server.

Regardless of the cause, it can be frustrating when you’re trying to update your CSS file but the changes aren’t showing up on your live website.

The best way to fight caching is to “version your CSS”.

Basically you add a “?”, (followed by numbers or letters) to the end of your CSS filename like this…

<link rel="stylesheet" href="style.css?v2" />

This effectively changes the name of the file without actually needing to change the file name. The browser may have already cached style.css but it hasn’t seen style.css?v2, so it downloads it as if it were a new file.

So, how do we do this in a WordPress Environment?

I’m going to show you three ways to deal with this. Each has its place.

1. Easy Solution – Use the Customizer

A while ago WordPress added the ability to add CSS to any website regardless of theme. It’s a great feature, and a super easy way to make small tweaks to your layout.

Looking For An Exciting Fantasy Adventure?

Meet your newest fandom.

Simply go to Appearance > Customize > Additional CSS.

It will even show your changes live as you write them.

The Additional CSS adds the styles inline on all pages (so it won’t be affected by caching). This is great for little tweaks, but I don’t recommend using it for extensive styling.

2. Enqueue In Functions.php File

When you’re developing your own theme, “enqueuing” is the most correct way call your stylesheets. But simply doing that won’t add add versioning.

Here’s an example that you can put in your functions.php file…

add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
function my_theme_enqueue_styles() {
	wp_enqueue_style('main-styles', get_template_directory_uri() . '/style.css', array(), filemtime(get_template_directory() . '/style.css'), false);	
}

The above code adds your stylesheet to every page, along with a timestamp that changes every time you save your CSS file. This is great, because the browser will still cache your CSS (which improves load times) but will reset the cache whenever you update the CSS file.

The output will look something like this…

<link rel='stylesheet' id='main-styles-css'  href='/wp-content/themes/blankslate/style.css?ver=1557348399' type='text/css' />

Modular Stylesheets

Now, let’s get a little more advanced.

Large website can have thousands of lines of CSS. Sometimes it just isn’t efficient to put everything in one CSS file.

For example, EZ-NetTools.com has some extensive styling on our Team page. This code isn’t used anywhere else on the site, so adding it to the main CSS would just be unnecessary bulk.

Here’s an example of how to enqueue styles based on page template…

add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
function my_theme_enqueue_styles() {
	wp_enqueue_style('main-styles', get_template_directory_uri() . '/style.css', array(), filemtime(get_template_directory() . '/style.css'), false);
	
	if ( is_page_template('template-aboutpages.php') || is_singular( 'jobs' ) ) {
		wp_enqueue_style('about-styles', get_template_directory_uri() . '/about.css', array(), filemtime(get_template_directory() . '/about.css'), false);
	}
	
}

The above code loads the main style.css file on every page, but only loads about.css on pages using the about template.

3. Add PHP Code to the end of your <link> tag

Sometimes you may want to call a CSS file directly in your page template.

The following code will display a timestamp for a specific file…

<?php echo '?' . filemtime( get_stylesheet_directory() . '/services.css'); ?>

Here’s an example of how it’s used…

<link rel="stylesheet" href="<?php echo get_stylesheet_directory_uri(); ?>/services.css<?php echo '?' . filemtime( get_stylesheet_directory() . '/services.css'); ?>" type="text/css" media="screen" />

Just copy the code above and change “/services.css” to whatever your css file is named.

There we go. Nice and easy. Let me know if you have any questions in the comments below…