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 theme
folder. 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 existingstyle.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, orvisibility: 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?!