Child theme not using parent theme css/styles/formatting?

Question

I am making a simple child theme of the "Grow Minimal" theme.

I created a folder, grow-minimal-child and added functions.php and style.css:

functions.php:

function my_theme_enqueue_styles() {

    $parent_style = 'grow-thinkup-style-minimal'; // This is 'twentyfifteen-style' for the Twenty Fifteen theme.
    wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' );
    wp_enqueue_style('thinkup-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' );

and style.css:

/*
Theme Name: Grow Minimal Child
Theme URI: https://www.thinkupthemes.com/free/grow/
Author: Think Up Themes
Author URI: https://www.thinkupthemes.com
Description: Created for customizing...
Template: grow
Version: 1.0.1
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Tags: one-column, two-columns, three-columns, right-sidebar, left-sidebar, custom-header, custom-menu, full-width-template, theme-options, threaded-comments, editor-style, featured-images, featured-image-header, post-formats, sticky-post, translation-ready, flexible-header, custom-background, grid-layout, footer-widgets, blog, e-commerce, portfolio, rtl-language-support
Text Domain: grow-minimal-child
*/

So, if you see I didn't really add any CSS. However, now when I activate this child theme, and visit the site, it looks a bit different. As if the parent CSS was completely overlooked. I also tried using $parent_style = 'parent-style', $parent_style = 'thinkup-style'.

Here's the functions.php inside Grow-minimal folder:

function grow_thinkup_child_frontscripts() {

    wp_enqueue_style( 'thinkup-style', get_template_directory_uri() . '/style.css', array( 'thinkup-bootstrap' ) );
    wp_enqueue_style( 'grow-thinkup-style-minimal', get_stylesheet_directory_uri() . '/style.css', array( 'thinkup-style' ), wp_get_theme()->get('Version') );
}
add_action( 'wp_enqueue_scripts', 'grow_thinkup_child_frontscripts' );

When I change my theme back to just Grow Minimal, the site looks as expected.

Where's the css going wrong (or more likely, where am I not updating or linking the child to parent)?

Answer 1

The theme you're trying to use as a parent, Grow Minimal, is a child theme of the Grow theme. It's not possible to create a child theme of another child theme without writing custom code workarounds.

In your code, these two lines just do the same thing twice:

wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' );
wp_enqueue_style('thinkup-style', get_template_directory_uri() . '/style.css');

They enqueue the stylesheet for the parent theme, Grow. The Grow Minimal theme is ignored. This question provides more context about the problems with grandchild themes.

In this case, the best practice is to simply add your custom styles or template code directly to the off-the-shelf child theme (Grow Minimal), effectively converting it to a custom theme. You'll still be able to apply any updates to the unmodified parent theme without losing your customizations.