There are several to write 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. The caching could be happening in your browser, or it may even be happening on the server.

In any case it’s frustrating, when you’re trying to update your CSS file but your changes aren’t sticking.

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

Basically you add a “?”, (followed my numbers or letters) to the end of you 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’s name. The browser may already have style.css but it doesn’t have style.css?v2, so it downloads it.

So how do we do this in a WordPress Environment?

I’m going to show you three ways to deal with this. Each has it’s 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.

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 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.

So 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 your save 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 is just 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…

No Comments

Leave a Reply

Your email address will not be published. Required fields are marked *