WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

Some themes ask you not to edit the style.css file, instead use custom.css file. If you write code on custom.css, it will overwrite the same element style in style.css. I think this is done in order to prevent the loss of user styles on theme update, is it so?

How this works? Do they already include custom.css file in their theme? But how this file is included in the theme so that he theme look for style in custom.css first? Thanks.

share|improve this question
up vote -2 down vote accepted

I usually add this piece of code if I want to add another css file

<link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/css/my_custom_css.css" type="text/css" media="screen" />

I believe the theme makers want to retain as much as possible of the theme's layout design. So a custom css file doesn't hurt much. I think it's more of a support question. With custom css file, the makers can help those who use their themes more easier. Because the original style.css is unaltered, so the theme maker can probably take a look in the custom css file.

share|improve this answer
    
not best practice anymore — developer.wordpress.org – iantsch Mar 15 at 7:34

If you want to leave your html along. you can add this to your css file. I think this is better.

@import url("../mycustomstyle.css");

also depending on your theme it will work with child and parent themes.

-- keep in mind, css works sequential, so what is last in your file will overwrite. so put your customstyle import at the bottom if you want to override stuff.

share|improve this answer
    
css doesn't work sequentially, it works based on the specificity of the rule; it only falls back to last overwrites previous when you have rules of equal specificity – srcspider Sep 4 '13 at 14:36
    
you are correct, and that is what I mean. my sequential referes to the overwriting. not CSS as a whole. – woony Jan 24 '14 at 11:56

My proposal would be to use child themes. It is very easy to implement and all modifications you do (including styles) are completely isolated from the original theme.

share|improve this answer

Using @import in WordPress for adding custom css is no longer the best practice, yet you can do it with that method.

the best practice is using the function wp_enqueue_style() in functions.php.

Example:

wp_enqueue_style ('theme-style', get_template_directory_uri().'/css/style.css');
wp_enqueue_style ('my-style', get_template_directory_uri().'/css/mystyle.css', array('theme-style'));
share|improve this answer
1  
Add the dependency of parent style.css to make sure your mystyle.css loaded after the style.css! – Sumit Mar 15 at 6:41
1  
Using @import is bad practice in general, not specifically in WordPress. – cybmeta Mar 15 at 7:39

Use a child theme. It's your best bet. This way if the theme is ever updated, you won't override the stylesheets you've created.

https://codex.wordpress.org/Child_Themes

Go this route, you'll thank yourself later.

share|improve this answer
    
That does not really answer the question. You might want to explain how to add the stylesheet in the Child Theme then. – kaiser Mar 15 at 16:48

To prevent overwritting of main theme CSS or other files, you should ALWAYS use a child theme in WordPress ... not doing so will only cause you major headaches and problems down the road.

https://codex.wordpress.org/Child_Themes

... and with how easy it is to setup a child theme, there is no reason you shouldn't be using one.

Using a child theme will then allow you to override any of the main parent theme files you want, simply by copying from parent into your child, or by creating a new file with the same name.

Regarding the custom.css file there's numerous ways that theme developers handle this ... a lot of them do this simply to try and prevent clients who don't want to use a child theme, from editing the main style.css file ....

Either way you shouldn't be worried about that, as long as you use a child theme you shouldn't have to worry about updating your theme later on and losing your changes ... get in the habit of always using child themes, you will thank me later, i promise.

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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