Stuck with Enqueue Styles for multiple css files in a child theme

Question

I am brand new to WP and I have been reading a ton of posts and trying out different examples out to get the wp_enueue_style to work for me but to no avail.

I am using refur wp theme and I made the child according to the wp documentation. I then copied the style.css file from the parent theme and put it into my child directory and used the wp_enqueue_style function given on the wp documentation show below. I changed the color of the text in the child directory and it shows up perfect in my website. Now I am trying to add different css files for different pages.

<?php
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
wp_enqueue_style( 'parent-style', get_template_directory_uri() .  '/style.css' );

}
?>

So this is where I get lost in trying to implement different .css files. I made a new css file named form.css and stuck it in the child theme directory. I then put this code in to get it to use form.css instead of style.css if the page is something

<?php
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {

if ( is_page( 'home' ) {
    wp_enqueue_style( 'parent-style', get_template_directory_uri(), '/style.css' );
    }
elseif ( is_page( 'form') {
    wp_enqueue_style( 'form-style', get_template_directory_uri() .  '/form.css' );
    }
}
?>

Not sure what I am doing wrong, I am a little confused about the 'form-style' and 'parent-style' handles and how they play a role exactly with the file naming. Since I have messed around with 'parent-style' name and broken the site.

My understanding so far is with the child theme, the parent theme css is overridden by the css in the child theme directory if anything is different. The enqueue is a way to load the css into the website instead of using import. But why do they name it parent-style if its a child css directory? Also if my parent theme has a couple .css files named font and one other that control only a couple things do I need to put that dependency (shown on the wp documentation child theme example) in the enqueue if I am not overriding it in the child anywhere?

Thank You I have been looking at so many examples and I just cant figure out what I am doing wrong.

Answer 1

The following code in your functions.php should load first the parent and than the child CSS file. What it actually does: Loading the parent style sheet and then it will load your child style sheet and at last it will load your form.css.
You must keep style.css in your child theme else Wordpress will not recognize it as it!

As already mentioned by yourself the child style.css will/should overwrite the parent style.css when made changes in the style-sheet.
By creating a child-theme we keep the parent-theme as it is and when it needs to be upgraded (only the parent theme will be upgraded in that case) all your changes made in the child-theme will still exist.

Keep in mind that such is also for other theme files. (e.g. changes which you want to make in the single.php you should make in a child-theme file,by copying the original single.php from the parent theme into your child themefolder. And there you make those changes.)

Take a look here for detailed explanations.

Note: Please make always a backup before you edit/add some in a file.

Updated after comment from OP
(because I am blind and not reading complete question)

function wpse220011_theme_enqueue_styles() {

    $parent_style = 'parent-style';

    wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' );
    wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/style.css', array( $parent_style ) );
    // Load extra styling for Form pages
    if( is_page( 'form' ) ) {
        wp_enqueue_style( 'form-style', get_stylesheet_directory_uri() . 'style-form.css', array() );
    }
    // Load extra styling for single posts
    if( is_single() ) {
        wp_enqueue_style( 'single-post-style', get_stylesheet_directory_uri() . 'style-single.css', array() );
    }

}
add_action( 'wp_enqueue_scripts', 'wpse220011_theme_enqueue_styles' );

Above is just an example!

• Realize that the extra style sheets as used in the code are loading on top of the existing style.css so it is extra code.
• Or you have to copy from the style.css file, code which you want to change/hide and make in that (lets say as used in example) style-form.css your changes.
• You can use display: none; which will display as if the element is not there at all, or visibility: hidden; however, the element will still take up the same space as before.

I did not add if( is_page( 'home') because your example shows that it is using the (basic) styles.css already so why loading it again?!