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.

Solutions

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.

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'));

Activate the child theme and add the following example code in the function.php

add_action( 'wp_enqueue_scripts', 'child_enqueue_styles');

function child_enqueue_styles() {

wp_enqueue_style( 'reset-style', get_template_directory_uri() . '/css/reset.css', array());
}

Similar questions

Is there a way to add additional CSS styles to the styles css file dynamically?
I would like to add additional styles to the styles.css file before it is sent to the client. Is this possible? Currently styles.css contains : I would like to add additional CSS dynamically to the end of that file. Is that possible? For example, in my index.php:
Css
How to add new CSS file to new PHP file
I've made a new template file for Wordpress constructing the elements of the page via PHP and Wordpress recognizes the template as such. Then I wanted to include a CSS file for said template (same folder) and went with the standard: but for some reason the PHP file does not load the linked CSS settings. if I add the content of it gets printed onto ...
How do I remove specific styles from the parent theme css using the child theme css?
There are some styles in my parent theme that I would simply remove from the stylesheet if I was not using a child theme. Obviously, I do not want to remove them from the parent css, but is there a way to effectively "remove" the styles using my child theme?
Free theme and css/bootstrap.css is not overridden in the child theme
Why is wordpress still using the bootstrap.css from the parent theme, whenI have a child theme which (successfuly for other things) inherits the parent theme? I have the bootstrap.css settled in the child theme inside the same directory css/ and I can see in firebug that on the page the parent's bootstrap.css is still used.
The requested theme does not exist. Stylesheet is missing - error after changing style.css name to my-styles.css in wp child theme?
I renamed style.css to my-style.css, but now I am getting an error in WordPress: "The requested theme does not exist. Stylesheet is missing." I know the reason for that error, but how can I solve that without changing the stylesheet name again?
How to load wordpress child theme css after parent theme css
In my wordpress child theme css file loaded before main theme css. My child theme css functions.php file is given below I want to load child theme css after parent theme css.

Also ask

We use cookies to deliver the best possible experience on our website. By continuing to use this site, accepting or closing this box, you consent to our use of cookies. To learn more, visit our privacy policy.