Child theme with flatsome theme crashes website

Question

Hi I troubling with creating a working child-theme. I tried following the codex.wordpress and adjusted everything like below. But when I then activate the child theme in wordpress, the website is not working anymore and just white.

Do you see a mistake somewhere here? Thank you very much in advance!

style.css of the child

/*
Theme Name: flatsome-child-newest
Description: This is a child theme for Flatsome Theme
Author: UX Themes
Template: flatsome-newest
Version: 3.0
*/

functions.php of the child

<?php
// Enqueue stylesheets and dependencies

$parent_style = 'flatsome-style';

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

}

function my_theme_enqueue_styles() {

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


**and some custom code**

Answer 1

I always find it best to start simple, make something that works, then build another tiny piece. That way it's easier to determine at what point something is going wrong.

I would suggest removing everything except the parent "flatsome" theme from your server. (Keep your backups locally, just don't have them installed in WP.)

Next, create a new theme folder "flatsome-wpse" with only a "style.css" file. (I suspect one of your issues is the "template" is wrong - "template" should be the folder name of the parent theme, which in your case is just "flastome"):

/*
Theme Name: WPSE Flatsome
Description: Child theme from scratch
Author: UX Themes
Template: flatsome
Version: 1.0
*/

With just that folder and file uploaded, see if you can activate the theme. If so, you should simply see the parent theme in action with no overrides. Then, proceed with customizations - add some specific CSS that makes it easy to visually see whether the child theme is overriding or not, like perhaps a body background.

Also of note, your "functions.php" file does not need to enqueue the parent stylesheet. This should be done by the parent theme already. You are trying to enqueue the parent style twice, so in addition to the parent enqueueing itself, you're calling the parent stylesheet 3 times. And, you can use get_stylesheet_uri to pull in your child theme's style.css file. So, all you need to do is enqueue your child theme's custom styles:

<?php
add_action('wp_enqueue_scripts', 'wpse_flatsome_enqueue_styles', 20);
function wpse_flatsome_enqueue_styles() {
    wp_enqueue_style( 'flatsome-wpse-style',
        get_stylesheet_uri(),
        array( 'flatsome-style' ),
        wp_get_theme()->get('Version')
    );
}
?>

Once you can visually verify that your child theme's styles are working, you can add the additional functions.php code and any other overrides you want to add. Again, one small step at a time, so you can tell exactly which step causes issues, which makes it much faster to troubleshoot.