Cannot get Child Theme to load latest version of style.css

Question

I'm using a Child theme set up correctly. But I just cannot get changes in the Child theme style.css to be reflected in the site. Tried emptying the browser cache a million times and it doesn't work!

I'v created child template files and they overide the parent ones fine.

I have noticed in view sourse it puts a version number on the end of the style sheet like this:- style.css?ver=3.9.1 even though I have created no version!

In another site I created there is no versioning of the style sheet, so why is it being put in automatically when I don't want it set.

How can I force it to use the most up to date version of the Child style.css file and not version it?

Here's my site url:- http://www.peterswebservices.co.uk/

Answer 1

In twentyfourteen, try putting this in your child theme:

function add_require_scripts_files() {
 wp_enqueue_style('twentyfourteen-style', get_stylesheet_directory_uri().'/style.css', array(), '1.0.0', "all");        
}
add_action( 'wp_enqueue_scripts', 'add_require_scripts_files' );

This will replace the original stylesheet but with your own version. If you are using a different parent theme, look at the original wp_enqueue_style label for style.css and duplicate that label within your child theme. You will have to change 1.0.0 to another number each time you make a change (so it's better for production environments where you don't make changes that often).

To remove the version from scripts and styles all together try this:

// remove WP version tag from scripts and styles, best for dev environments
// by Adam Harley https://wordpress.org/support/topic/enqueueregister-script-remove-version
add_filter( 'script_loader_src', 'remove_src_version' );
add_filter( 'style_loader_src', 'remove_src_version' );
function remove_src_version ( $src ) {
  global $wp_version;
  $version_str = '?ver='.$wp_version;
  $version_str_offset = strlen( $src ) - strlen( $version_str );
  if( substr( $src, $version_str_offset ) == $version_str )
    return substr( $src, 0, $version_str_offset );
}

Answer 2

Adding the below function into the 'functions.php' of a Child theme I used with X helped me very much in the similar situation.

add_action( 'wp_enqueue_scripts', 'enqueue_child_theme_styles', PHP_INT_MAX);
function enqueue_child_theme_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri().'/style.css' );
    wp_enqueue_style( 'child-style', get_stylesheet_uri(), NULL, filemtime( get_stylesheet_directory() . '/style.css' ) );
}

Just do not forget to remove this before launching your website live.

Also mind caching features of your hosting service provider to make this update effect.

According to author:

... it is the best way to include a childtheme-stylesheet in WordPress combined with filemtime() to force browsers to load new versions of the css-files. I didn’t use filemtime() for the parent-style as I never touch it and therefore filemtime() would only waste resources.

Source: Comment by Daniel as of October 22, 2014 to the article Prevent CSS Caching: https://css-tricks.com/snippets/wordpress/prevent-css-caching/#comment-1586141

Answer 3

Without seeing the site we can't help diagnose the issue but a common occurrence is the main theme css is having priority over the child css, you can overrule this by using the !important tag e.g.

#element {
 color:#fff !important;
}

The important tag marks that css as priority over any other css file with the same line of css

Let us know the url and if this helps

Answer 4

I just had the same problem, and it turned out to be my new host having some kind of caching switched-on by default. I went to my control panel and flushed the cache, and it then correctly served the right style.css file.

The ?ver=3.9.1 turned out to be a red herring (at least for me). After I flushed the cache it still says ?ver=3.9.1, which is not found anywhere in my css file, but it's all working fine.

Answer 5

I had the same problem and I fixed it in another way than the default.

First I located the file that I need to change:

wp-includes\theme.php

There is a function called get_stylesheet_uri

My function looks like this:

function get_stylesheet_uri() {
    $time = time();
    $stylesheet_dir_uri = get_stylesheet_directory_uri();
    $stylesheet_uri = $stylesheet_dir_uri . '/style.css?v='.$time;
    /**
     * Filter the URI of the current theme stylesheet.
     *
     * @since 1.5.0
     *
     * @param string $stylesheet_uri     Stylesheet URI for the current theme/child theme.
     * @param string $stylesheet_dir_uri Stylesheet directory URI for the current theme/child theme.
     */
    return apply_filters( 'stylesheet_uri', $stylesheet_uri, $stylesheet_dir_uri );
}