Child theme custom CSS


#1

Hi guys,

I’m new in coding and I’ve never taken any courses about web design so I have to figure out most of the things on my own. I have a question.

It’s a first time for me to use a child theme and I wanna make sure I do it right. I have followed all instructions on Wordpress.org and it seems to be all right. But the strange thing is that when I add some custom CSS to the style.css of the child theme, they almost never work. However when I go to Customize–Additional CSS and insert them there, they work perfectly.

Is there any difference? I want to make sure that both ways are acceptable and I won’t lose anything in case the parent theme gets updated.

Thanks.


#2

Hello there,

Did you use correct selector to override main styles? Check if you child theme’s style.css file is properly loaded. Check our child theme’s functions, which loads it with this code in the functions.php.

add_action( 'wp_enqueue_scripts', 'sydney_child_enqueue' );
function sydney_child_enqueue() {

    $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 ),
        wp_get_theme()->get('Version')
    );

}

Regards,
Kharis


#3

Hi Kharis,

Thanks for your reply. Apparently there is something a bit different in my functions.php:

<?php

add_action( 'wp_enqueue_scripts', 'enqueue_parent_styles' );

function enqueue_parent_styles() {
   wp_enqueue_style( 'parent-style', get_template_directory_uri().'/style.css' );
}

I know the basics of HTML and CSS but unfortunately I’m not familiar with PHP so I’m gonna have to ask you one more silly question. Do I have to replace anything in the code you’ve written (like version or something else) or should I copy and paste it as it is?


#4

Go to the most bottom line of your child theme’s functions.php file, and copy/paste this code block (leaving out <?php opening).

    add_action( 'wp_enqueue_scripts', 'enqueue_parent_styles' );
    function enqueue_parent_styles() {
       wp_enqueue_style( 'parent-style', get_template_directory_uri().'/style.css' );
    }

Regards,
Kharis


#5

But this block is the only thing that is already there. Do I need to paste it one more time?


#6

So in your child theme’s functions.php, you’d only have:

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

Regards,
Kharis


#7

Yes, this is what I have


#8

Could anybody reply please?


#9

Hello there,

Really sorry for the delay.

Please try replacing your child theme’s functions with this:

<?php
add_action( 'wp_enqueue_scripts', 'sydney_child_enqueue_parent_styles' );
function sydney_child_enqueue_parent_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 ),
      wp_get_theme()->get('Version')
  );

}

To check if the child theme’s style.css properly loaded, add these lines into the most bottom line of your child theme’s style.css.

  body {
     border: 10px solid red;  
  }

You’d see your site red bordered.

Regards,
Kharis


#10

Thanks a lot Kharis! It worked


#11

You’re welcome!

Please let us know in a new topic if you have any further questions, or if we can provide you with any other assistance.

Regards,
Kharis


#13

Hi Kharis,

There is something weird happening here. I moved all custom CSS from Customizer to the child theme style.css and some of theme stopped working. I don’t understand why. The majority work, for example I’ve added a code to hide the slider call-to-action button and it’s not there. But now I tried to remove the submenu borders and it absolutely didn’t work. However once I pasted the same code to Customizer, changes appeared immediately.

Do you have any idea what the problem can be?


#14

Hello there,

To set higher priority for child theme’s stylesheet, in your child theme’s functions, replace this line:

add_action( 'wp_enqueue_scripts', 'sydney_child_enqueue_parent_styles' );

with:

add_action( 'wp_enqueue_scripts', 'sydney_child_enqueue_parent_styles' , 9999);

Regards,
Kharis


#15

Are you sure?

I’ve done it and it ruined the style. Again, not everything, but some random things. Even primary color got back to default (in the Customizer I’ve chosen green but now it’s back to red, meanwhile there is nothing about it in my style.css). Some other stuff from style.css stopped working. It just got worse because now I have no clue how to fix it.

Could you explain please what is the difference between keeping custom css in Customizer and in style.css.

Thanks and sorry for my troubles


#16

Hello there,

Several years ago before Custom CSS in Customizer exists, custom styling can be made via style.css of a child theme. Custom CSS in Customizer works the same way. It’s much simpler as we don’t need to a child theme any more.

For detailed information, you can read on the codex: https://codex.wordpress.org/CSS#Custom_CSS_in_WordPress

Regards,
Kharis


#17

I’m having the opposite problem, I have installed the child theme following the wordpress.com instructions, now my site has gone back to the default styles, headings and colours?


#18

AH, answered my own question, I hadn’t realised customisations are in the database. I found a plugin to copy them down to the child theme :slight_smile: