Wordpress child theme css isn't used - php

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');

Answer 1

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' );
?>