How to add custom css file in theme?

  • 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.

    If the person asking this question is German then nearly certainly "overwrite" means "override". I assume the question is not saying that putting code in the custom.css file will cause the style.css file to be modified. I am not saying this to be critical, I am saying that I am confused and this is my understanding.

  • Wai Wong

    Wai Wong Correct answer

    8 years ago

    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.

    not best practice anymore —

    @iantsch why not? whats better? i couldnt find anything better.

    @Kangarooo see the answer provided by Fil Joseph: Enqueue the scripts/styles you want included in the header or footer

    With HTTP/1 it's best practice to pack all basic styles into one minimized file, instead of adding another CSS file the browser needs to download and process.

    in my case, this was the best solution.

License under CC-BY-SA with attribution

Content dated before 6/26/2020 9:53 AM