11

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. – user34660 Aug 7 '16 at 5:59
-2

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.

  • 2
    not best practice anymore — developer.wordpress.org – iantsch Mar 15 '16 at 7:34
  • @iantsch why not? whats better? i couldnt find anything better. – Kangarooo Jul 3 '17 at 19:13
  • 2
    @Kangarooo see the answer provided by Fil Joseph: Enqueue the scripts/styles you want included in the header or footer – iantsch Jul 5 '17 at 9:01
  • 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. – Andy Feb 14 at 21:47
24

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'));
  • 1
    Add the dependency of parent style.css to make sure your mystyle.css loaded after the style.css! – Sumit Mar 15 '16 at 6:41
  • 1
  • I understand the path part, but what about the first part, the 'theme-style' and 'my-style' part, can I put anything in there? And what about in the functions.php what is the total code to get this working? – Bruno Vincent Feb 5 '17 at 9:30
  • @BrunoVincent you can name the handle whatever you want, as long as it's unique. See doc – Fahmi Feb 7 '18 at 8:57
2

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.

2

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());
}
0

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.

0

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 (when using the same level of identifier, already used ) , so what is last in your file will overwrite. so put your customstyle import at the bottom if you want to override stuff.

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

The best way is to combine all enqueued styles into a single function and then call them using wp_enqueue_scripts action. Add the defined function to your theme's functions.php somewhere below the initial setup.

Code Block:

function add_theme_scripts() {
    wp_enqueue_style( 'style', get_template_directory_uri() . '/css/style.css' );
    wp_enqueue_style ( 'custom', get_template_directory_uri () . '/css/custom.css', array( 'style' ) );
}
add_action ( 'wp_enqueue_scripts', 'add_theme_scripts' );

Please Note :

3rd parameter is the dependency array which refers to whether or not this stylesheet is dependent on another stylesheet. So, in our above code custom.css is dependent on style.css

|
Additional Basic:
wp_enqueue_style() function may have 5 parameters: like this way - wp_enqueue_style( $handle, $src, $deps, $ver, $media );
In real world of WP Coding, usually we also add javascript files/jQuery libraries inside that function like this way:

wp_enqueue_script( 'script', get_template_directory_uri() . '/js/script.js', array ( 'jquery' ), 1.1, true);

The 5th parameter true/false is optional (2nd, 3rd and 4th params are also opt.) but very essential, it allows us to place our scripts in footer when we use the boolean parameter as true.

0

Go to Appearance > Edit CSS from your WordPress Dashboard. enter image description here

Here is the screen with basic CSS editor. enter image description here

Now paste your CSS directly to the default text. You can delete the default text so that your CSS only appears in the editor. Then save the stylesheet and your CSS will be live.

-2

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.

  • 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 '16 at 16:48

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.