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.
get_stylesheet_directory_uri
parent-style
and after that thechild style sheet
which holds 'only' your changes/add-ons. Yourchild style.css
can be used as add-on on teparent style.css
or to make changes which you do not like from theparent stle sheet
. You could see thechild style sheet
as a supplement on theparent style sheet
(which holds extra or corrections on what already exists). See my answer for thefunction
.