How proper add 2 CSS file in a WordPress theme?

Question

I have the following situation loading a CSS.

I have a WordPress theme that load a style.css settings file by this code into my functions.php file:

/* Function automatically executed by the hook:
 * 1) (OPTIONAL): Register a script (without load it): in this case register the CSS settings
 * 2) Load the CSS settings

 */
function wpb_adding_styles() {
    wp_register_style('my_stylesheet', get_template_directory_uri() . '/style.css');
    wp_enqueue_style('my_stylesheet');
}

/* Hooks a function on to a specific action (an action is a PHP function that is executed at specific
 * points throughout the WordPress Core)
 * @param 'wp_enqueue_scripts': The name of the action to which 'wpb_adding_styles' is hooked (wp_enqueue_scripts
 *        is the proper hook to use when enqueuing items that are meant to appear on the front end)
 */
add_action('wp_enqueue_scripts', 'wpb_adding_styles');

In this style.css file I define some basic CSS configuration, for example the body settings:

body{
    padding:0px;
    margin:0px;
    font-family:Arial, Helvetica, sans-serif;
    font-size:12px;
}

Then I have create a new style2.css settings file in which I would override\add some of the properties defined into my general style.css, following the previous example I would add the property that the body background have to be black, something like it:

body {
    ........
    ........
    ........
    background: #000;
}

Ok, so I think that I need to load the style.css file using the style2.css file as its dependencies, reading the documentation it seems to me that I can do something like it (or maybe the opposite?):

function load_theme_styles() { 
    wp_enqueue_style('main-css', get_template_directory_uri() . '/style.css', array(), '1.0', 'all');
}
add_action('wp_enqueue_scripts', 'load_theme_styles');

where array() should not be empty but it have to contain the style2.css

Is it a good solution to keep separate a general CSS file that have not to be edited (for example a css file of a CSS framework such as BootStrap with its original settings) and the have a custom CSS file in wich I override the settings that I want to change?

If this is a goog solution can you say me how to pass in the previous array my style2.css file?

Tnx

Andrea

Why not just open your css file setup and do a @import into where all your other CSS files are imported. There is ussually one file where all other CSS files are imported to. — Cam
Do you mean that in my general style.css file I have to import the custom style2.css? — AndreaNobili
Sure it save a lot of time but I am not sure that is a clean solution in WordPress... — AndreaNobili

jdsteinbach jdsteinbach · Accepted Answer · 2014-01-30T17:07:57

Here's the syntax for loading style2.css only after style.css is loaded.

function wpb_adding_styles() {
    wp_register_style('my_stylesheet1', get_template_directory_uri() . '/style.css');
    wp_register_style('my_stylesheet2', get_template_directory_uri() . '/style2.css', array('my_stylesheet1') );
    wp_enqueue_style('my_stylesheet2');
}

Since 'my_stylesheet1' is a dependency for 'my_stylesheet2', it will be called automatically without needing to be enqueued on its own.

WP Codex reference: http://codex.wordpress.org/Function_Reference/wp_enqueue_style

How proper add 2 CSS file in a WordPress theme?

2 Answers