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