0

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?

  • 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 May 12 '17 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 May 12 '17 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 May 12 '17 at 5:10
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.

| improve this answer | |
0

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');
 }
| improve this answer | |
0
  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' );
| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.