Fix CSS caching on WordPress

When you build a wordpress blog, the first thing you’ll want to have is a theme. Then you realize that you want to change something on the theme. You can directly edit on the theme files to quickly modify the blog’s appearance to fit to your tastes but there is a recommended way – i.e., creating child themes. This way, even if you update your main theme, you can be sure that your modifications are there to stay.

The main problem you get here when editing css files is that whatever you add into the css, the changes are not reflected on the blog. This is because of cache – be it from wordpress or browser or the server. To solve this, there is we can use css versions.

The correct way to override the css of the parent theme is to add a style.css file and a functions.php file. The functions.php file contains this code

<?php
function theme_enqueue_styles() {

    $parent_style = 'parent-style';
    
    wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' );
    wp_enqueue_style( 'child-style',
        get_stylesheet_directory_uri() . '/style.css',
        array( $parent_style )
    );
}
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles',100);
?>

Just add a version number to the css by changing the above code like this

wp_enqueue_style( 'child-style',
    get_stylesheet_directory_uri() . '/style.css',
    array( $parent_style ),
    '1.0'
);

and wordpress will append the version number to the style.css url. So after updating your css file, just change the css version and the browser will always load the latest css file.

Also Read:   Creating a PHP website using MVC - 1

Happy blogging.

 

Never miss any content from Codetuto!

Subscribe to Codetuto Newsletter and be the first to recieve our latest posts and tutorials

Subscribe Now For Free

[Total: 0    Average: 0/5]