themes - WordPress loads old style.css, then loads current one

admin2025-01-08  4

I'm new to WordPress, so I'm not really sure how it works, but I've been editing the theme by changing wp-content/themes/<theme_name>/css/style.css, then uploading this to the website via FTP. Here's the issue I'm having:


From the Chrome Developer Tools, I can see that the style.css (the current file) is overwriting style.css?ver=4.6.3. This means that even though I removed the border from the current CSS, it's still being displayed from the old CSS version.

Looking at the HTML source code for the page that WordPress generates, I found this in <head>:

<link rel="stylesheet" id="twentysixteen-style-css" href="http://<web.address>/wp-content/themes/<theme_name>/style.css?ver=4.6.3" type="text/css" media="all">

And then I also found this:

<link href="http://<web.address>/wp-content/themes/<theme_name>/css/style.css" rel="stylesheet" type="text/css">

What's going on? Why is WordPress loading an old version of style.css, and then the current one?

I'm new to WordPress, so I'm not really sure how it works, but I've been editing the theme by changing wp-content/themes/<theme_name>/css/style.css, then uploading this to the website via FTP. Here's the issue I'm having:


From the Chrome Developer Tools, I can see that the style.css (the current file) is overwriting style.css?ver=4.6.3. This means that even though I removed the border from the current CSS, it's still being displayed from the old CSS version.

Looking at the HTML source code for the page that WordPress generates, I found this in <head>:

<link rel="stylesheet" id="twentysixteen-style-css" href="http://<web.address>/wp-content/themes/<theme_name>/style.css?ver=4.6.3" type="text/css" media="all">

And then I also found this:

<link href="http://<web.address>/wp-content/themes/<theme_name>/css/style.css" rel="stylesheet" type="text/css">

What's going on? Why is WordPress loading an old version of style.css, and then the current one?

Share Improve this question asked May 11, 2017 at 23:24 wardzinwardzin 1011 bronze badge 3
  • For one, they are in two different directories. One is in the parent theme directory and the other is in the css subdirectory. You can either upload your new style.css to the parent theme directory or dequeue the style as shown here wordpress.stackexchange.com/questions/220267/… – czerspalace Commented May 12, 2017 at 0:06
  • Oh, true, I didn't catch that! Should I be changing the style.css in the main directory or the one in the css subfolder? What's the difference between the two? – wardzin Commented May 12, 2017 at 0:13
  • Could you please share me your site URL where it's happening so that i can troubleshoot it and help you? – Vinod Dalvi Commented May 12, 2017 at 5:10
Add a comment  | 

3 Answers 3

Reset to default 0

Styles are loaded in the order specified in the underlying code. It's usually under control of the theme. If a 2nd style file has the same style defined, then the 2nd one overwrites the 'parameters' of the 1st style. This is as designed.

Note that it is not a good idea to edit a theme's files directly. Any changes you make will be overwritten when that theme is updated.

If you want to customize a theme (and it's styles), then it is best to create a 'Child theme'. This is a theme that uses the coding/style from the 'parent' theme, then adds your customized stuff from the 'child' theme. This is a great way to experiment with theme customizations without the worry of your changes being 'trashed' when theme updates.

There are a ton of tutorials on how to make a child theme. I use a plugin called "Child Theme Wizard" to create the necessary child theme files.

Enqueue your style inside 'wp_head' action it will load first.

 add_action('wp_head', function () {
     wp_enqueue_style('custom-style', get_stylesheet_directory_uri() . '/style.css');
 }
  1. (optional but recommended) Create a child theme following this guide: https://developer.wordpress.org/themes/advanced-topics/child-themes/

  2. (optional but recommended) Put your css file in the child theme (eg. /css/style.css)

  3. Load the styles in functions.php by specifying, that the parent style should be loaded BEFORE yours:

    function my_enqueue_styles() {
        $parent_style = 'twentysixteen-style';

        wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' );
        wp_enqueue_style( 'my-style',
            get_stylesheet_directory_uri() . '/css/style.css',
            array( $parent_style ),
            wp_get_theme()->get('Version')
        );  
    }
    add_action( 'wp_enqueue_scripts', 'my_enqueue_styles' );
转载请注明原文地址:http://conceptsofalgorithm.com/Algorithm/1736268354a1268.html

最新回复(0)