Wordpress child theme css isn't used

Question

I have a Wordpress website where the child theme is activated. It seems that everything is working fine, except the stylesheet. The CSS file isn't included.

In function.php file in the child theme:

function enqueue_child_styles() {
    wp_enqueue_style('child-theme', get_stylesheet_directory_uri() .'/style.css', array('parent-theme'));

}
add_action('wp_enqueue_scripts', 'enqueue_child_styles');

The style.css file is in the root folder of the child theme:

But the styles aren't reflected on my website itself.

My child theme CSS:

/*
Theme Name: Vitrine Child
Theme URI: http://themeforest.net/user/Epicomedia
Template: vitrine
Author: EpicoMedia
Author URI: http://www.Epicomedia.com
Description: WooCommerce WordPress Theme
Tags: two-columns,three-columns,left-sidebar,right-sidebar,custom-background,custom-header,custom-menu,editor-style,featured-images,flexible-header,full-width-template,microformats,post-formats,sticky-post,theme-options,translation-ready,accessibility-ready
Version: 1.0.1498974811
Updated: 2017-07-02 05:53:31

*/

/* Write your styles here */
/* Cookiebot */
a#CybotCookiebotDialogBodyLevelButtonAccept {
    background: #E5002F !important;
    border: none !important;
}

/* WPCF7 form submit button */
.wpcf7-form-control.wpcf7-submit {
    border-color: black;
    color: black;
}

function.php in child theme:

<?php
require_once dirname( __FILE__ ) . '/widgets/bln-widget-functions.php';

// Exit if accessed directly
if ( !defined( 'ABSPATH' ) ) exit;

function example_enqueue_styles() {
    // enqueue child styles
    wp_enqueue_style('child-theme', get_stylesheet_directory_uri() .'/style.css', array('parent-theme'));
}

add_action('wp_enqueue_scripts', 'example_enqueue_styles');

I think it should be the dependency part array('parent-theme'). You have to know the name of the style sheet(s) of your parent theme(s). search for wp_enqueue_style in your wp-content/themes folder — yunzen

Dammeul Dammeul · Accepted Answer · 2018-12-07T14:05:07

Have a look through the Codex: https://codex.wordpress.org/Child_Themes

Your style.css in your child theme needs a specific comment header:

The exmaple in the Codex is:

/*
 Theme Name:   Twenty Fifteen Child
 Theme URI:    http://example.com/twenty-fifteen-child/
 Description:  Twenty Fifteen Child Theme
 Author:       John Doe
 Author URI:   http://example.com
 Template:     twentyfifteen
 Version:      1.0.0
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 Tags:         light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
 Text Domain:  twenty-fifteen-child
*/

A couple things to note:

You will need to replace the example text with the details relevant to your theme. The Template line corresponds to the directory name of the parent theme.

The parent theme in the example is the Twenty Fifteen theme, so the Template will be twentyfifteen. You're probably working with a different theme, so adjust accordingly.

UPDATE:

enqueue both parent and child theme (only need child css if you have css in it):

Just Parent:

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

}
?>

Parent and Child:

<?php
function my_theme_enqueue_styles() {

    $parent_style = 'parent-style'; // This is 'twentyfifteen-style' for the Twenty Fifteen theme.

    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')
    );
}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
?>

Wordpress child theme css isn't used

1 Answers