0

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.

2
  • for Child_Themes use get_stylesheet_directory_uri
    – Jevuska
    Mar 7, 2016 at 23:43
  • Yes you load always the parent-style and after that the child style sheet which holds 'only' your changes/add-ons. Your child style.css can be used as add-on on te parent style.css or to make changes which you do not like from the parent stle sheet. You could see the child style sheet as a supplement on the parent style sheet (which holds extra or corrections on what already exists). See my answer for the function.
    – Charles
    Mar 8, 2016 at 3:30

1 Answer 1

0

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?!

9
  • Hello, Thank you for the answer! I wanted to use different css files for different pages. So for my home page I wanted a certain stylesheet and for my form page something different. Which is the reason for child theme style.css for my main page and child theme form.css for my form page. May I ask for the array( $parent_style) this is because we are dependent on the parent style.css? Also for the form style why false false for the last two and array() nothing dependent? I figured I could just use that If elseif code for the different pages to load different css files for each page.
    – user90158
    Mar 8, 2016 at 3:55
  • Sorry for not reading, I have updated the answer. I removed false, false is in this case not needed. To enlighten some more, yes the child theme style.css is depending on the parent style.css. (It will not load until the parent style.css is loaded.) There are two ways to load the parent style.css 1) to include the parent style.css in your child theme style.css using @import 2) doing it like above by using a function. And yes of course, if you want to have another style for home just adjust the code to your needs. Please read the link to understand more.
    – Charles
    Mar 8, 2016 at 5:10
  • That makes a lot more sense now. So I added in just the if (is_page) you showed in your example but it still seems to be loading the child theme changes only and not the text change I made in the style-single.css file. So I understand now that Parent css file loads > Child style css loads any changes in the new css file > if 'form' then this loads any changes on top of those two above? I feel like it should be working haha seems to make sense. I checked the slug name and it says form in wp admin, so lost as to why this text color change is not happening in for my form page. Thanks again!
    – user90158
    Mar 8, 2016 at 5:50
  • Add-on: you should see now in the source code on the front-end that at least 2 style sheets are loaded in the <head></.head> 1 is style.css and the other is (from the example) style-form.css when you are on the form page. Of course there can/will be more when using plugins and the admin bar.
    – Charles
    Mar 8, 2016 at 5:58
  • I definitely see it loaded thats a good thing lol. But the style-form.css text color is not overriding my text color that is in the child theme style.css on my form page. I feel like I am missing something conceptually here, does the if statement style-form.css style not override the child style.css? Thanks Again you are awesome.
    – user90158
    Mar 8, 2016 at 8:49

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.