Wordpress child theme style.css not working

21
votes

I have created a file structure in the same format as my parent theme. My parent theme is called Alpine and within Alpine there is a functions.php and style.css file. There do not appear to be any additional style.css files.

I have created a directory called Alpine-child and within that I have created a functions.php and style.css file.

I can't work out why any changes I make to the child style.css are not implemented but they are when I make the same changes in parent style.css

This is my child style.css:

/*
 Theme Name:   Alpine Child
 Theme URI:    http://www.creative-ispiration.com/wp/alpine/
 Description:  My first child theme, based on Alpine
 Author:       MilkshakeThemes
 Author URI:   http://themeforest.net/user/milkshakethemes
 Template:     Alpine
 Version:      1.0.0
 Tags: one-column, two-columns, right-sidebar, fluid-layout, custom-menu, editor-style, featured-images, post-formats, rtl$
 Text Domain: alpine-child
*/

This is my child functions.php file:

<?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' );
}
?>
6
phpwordpress
Can you share a link to your project? – Jrod
I am currently hosting the website on an AWS EC2 Instance. I have been editing the website via SSH. This is the current developement address: ec2-52-211-25-124.eu-west-1.compute.amazonaws.com – Gavin Reynoldson

6 Answers

39
votes

Take a look at your <head> tag. More importantly look at the order of your stylesheets.

The styles from your child theme are being added first and then all the styles from your parent theme. This will cause the styles from the parent theme to override your child theme styles.

You can change the priority of your my_theme_enqueue_styles function to run after the parent by using the third parameter of add_action. This will enqueue your child theme styles last and allow the CSS to work as expected.

<?php
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles', 11 );
function my_theme_enqueue_styles() {
    wp_enqueue_style( 'child-style', get_stylesheet_uri() );
}
?>
12
votes

This worked for me:

<?php
function my_theme_enqueue_styles() {
    $parent_style = 'twentyseventeen-style'; 
    $child_style = 'twentyseventeen-child-style';
    wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' );
    wp_enqueue_style( $child_style, get_stylesheet_uri() );
}
?>

and none of the other answers did.

0
votes

You need to enqueue the child theme style.css so your function should be:

function my_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 ),
        wp_get_theme()->get('Version')
    );
}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );

Take a look at the documentation.

0
votes

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

Craig Hick's answer worked for me and I also realize why my default code from the Wordpress documentation wasn't working.

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

In my case, the line wp_get_theme()->get('Version') returned 1.0.0 which was the same version number as the parent theme. So I just changed the child theme css version number to 1.0.1 and it worked.

0
votes

My child theme currently has the following code:

<?php
add_action( 'wp_enqueue_scripts', 'enqueue_parent_styles' );

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

//load child theme custom CSS
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles', 11 );
function my_theme_enqueue_styles() {
    wp_enqueue_style( 'child-style', get_stylesheet_uri() );
}

?>

Previously, the code I used only had the first part before //load child theme custom CSS part, and it was unable to get the custom CSS. I have added the code @jrod suggested above and it worked. I need to confirm with you guys that my child theme code is complete, and I don't have to add anything else. I am not sure if this also fetches the custom JS files I have in the child theme JS files.