Forcing the Browser to load the updated CSS File!

I love WordPress, but when making changes to CSS and the stylesheet.css file, browsers seem to want to keep the old file and old styling in place! – Here’s a quick and easy way to always load up the latest version of the CSS file (a special thank you to ChatGPT, too!). This creates a permanent, automatic way to make sure browsers always load your latest stylesheet.css when you update it in WordPress. The best and cleanest method is to automatically version your CSS file based on its last modified time — that way, the version number updates every time you edit the file.

Please note this code has elements that only I use, so you may need to adjust as needed.

function pedleyonline_enqueue_styles() {
    // Register Bootstrap
    wp_register_style(
        'bootstrap',
        get_template_directory_uri() . '/bootstrap/css/bootstrap.min.css'
    );

    // Add Bootstrap as dependency
    $dependencies = array('bootstrap');

    // Get the file modification time for style.css (cache-busting)
    $style_path = get_stylesheet_directory() . '/style.css';
    $version = filemtime($style_path);

    // Enqueue main stylesheet with version
    wp_enqueue_style(
        'pedleyonline-style',
        get_stylesheet_uri(),
        $dependencies,
        $version
    );
}

function pedleyonline_enqueue_scripts() {
    $dependencies = array('jquery');
    wp_enqueue_script(
        'bootstrap',
        get_template_directory_uri() . '/bootstrap/js/bootstrap.min.js',
        $dependencies,
        '3.3.6',
        true
    );
}

add_action('wp_enqueue_scripts', 'pedleyonline_enqueue_styles');
add_action('wp_enqueue_scripts', 'pedleyonline_enqueue_scripts');

Alternative Method

For sites that are still loading the WordPress stylesheet from the header.php file. You’ll need to first remove the stylesheet file being loaded from your themes’ header file. Remove the file below.

<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>">

In your functions.php file you need to add the following, which loads everything you need. Please note this is the code I use and will vary depending on the filenames and theme you are using.

function pedleyonline_enqueue_styles() {
    // Register Bootstrap
    wp_register_style(
        'bootstrap',
        get_template_directory_uri() . '/bootstrap/css/bootstrap.min.css'
    );

    // Add Bootstrap as dependency
    $dependencies = array('bootstrap');

    // Get the file modification time for style.css (cache-busting)
    $style_path = get_stylesheet_directory() . '/style.css';
    $version = filemtime($style_path);

    // Enqueue main stylesheet with version
    wp_enqueue_style(
        'pedleyonline-style',
        get_stylesheet_uri(),
        $dependencies,
        $version
    );
}

function pedleyonline_enqueue_scripts() {
    $dependencies = array('jquery');
    wp_enqueue_script(
        'bootstrap',
        get_template_directory_uri() . '/bootstrap/js/bootstrap.min.js',
        $dependencies,
        '3.3.6',
        true
    );
}

add_action('wp_enqueue_scripts', 'pedleyonline_enqueue_styles');
add_action('wp_enqueue_scripts', 'pedleyonline_enqueue_scripts');