Create Child Theme

Hi there!

You can read about child themes at the WordPress Codex here.

You don’t necessarily have to copy any files, it depends on what you are trying to achieve. For basic CSS customizations you don’t need to copy any thing, just create two new ones:

1. style.css

Paste in this code (modify as necessary):

/*
 Theme Name:   Flat
 Theme URI:    https://example.com/flat/
 Description:  Flat Child Theme
 Author:       John Doe
 Author URI:   https://example.com
 Template:     flat
 Version:      1.0.0
 Tags:         flat
 Text Domain:  flat-child
*/

/* =Theme customization starts here
-------------------------------------------------------------- */

2. functions.php

Paste in this code:

<?php

add_action( 'wp_enqueue_scripts', 'enqueue_child_theme_styles', PHP_INT_MAX);
function enqueue_child_theme_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri().'/style.css' );
    wp_enqueue_style( 'child-style', get_stylesheet_uri(), array('parent-style')  );
}

Then go to Appearance -> Themes and activate your new child theme. You can paste any CSS into your style.css file.

I hope that helps!

Luke the Daft Duke

Hello Luke,

thanks for your post. It came just in time ?? I just did what you said and it worked well. I made a new folder called “flat-child” and added those 2 files you mentions and a few changes like this in the style.css file:

/*
 Theme Name:   Flat
 Theme URI:    https://example.com/flat/
 Description:  Flat Child Theme
 Author:       John Doe
 Author URI:   https://example.com
 Template:     flat
 Version:      1.0.0
 Tags:         flat
 Text Domain:  flat-child
*/

/* =Theme customization starts here
-------------------------------------------------------------- */

/* Header - Untertitel - Schriftfarbe */
#masthead .site-description, .hentry .entry-meta {
    color: #fff;
}

/* Widget - überschriften - Textfarbe */
#secondary .widget-title {
    color: #fff;
}

/* Widget - Linkbox - Textfarbe */
#site-navigation .current-menu-item > a, #site-navigation
.current-menu-parent > a, #site-navigation
.current-menu-ancestor > a, #site-navigation
.current_page_item > a, #site-navigation
.current_page_parent > a, #site-navigation
.current_page_ancestor > a {
    color: #fff;
}

/* Footer - Seitenzahlen - Hintergrundfarbe */
.paging-navigation .page-numbers {
    background-color: #ff7e00;
    border-color: #000;
}

/* Footer - Seitenzahlen - Hintergrundfarbe, HOVER */
.paging-navigation .page-numbers:hover {
    background-color: #2c486f;
    border-color: #fff;
}

I just wonder why it was so easy ?? I mean how did the child theme found out which one is the parent theme? And why is the child theme also named “Flat” and not “Flat Child”

I could not see anything in the functions.php that defines which parent theme to chose.

And how do I add a thumbnail to the child theme. I often make websites for customers and its always a pain if theres a design update…

Thanks again for everything,
Atilla

That’s determined by the comments at the start of the file: “Theme Name:” determines the name of theme as displayed by WordPress. “Template:” tells WordPress what the parent theme is. To display a thumbnail, make a file named screenshot.png and put it in the child theme’s folder.

Thanks for your answers. I hadn’t edit the functions.php like this yet. Now it works fine!

Hi, I seem to have a problem with the child them css loading twice. I have added the code mentioned above to the childs functions.php

<?php

add_action( 'wp_enqueue_scripts', 'enqueue_child_theme_styles', PHP_INT_MAX);
function enqueue_child_theme_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri().'/style.css' );
    wp_enqueue_style( 'child-style', get_stylesheet_uri(), array('parent-style')  );
}

<link rel='stylesheet' id='flat-style-css'  href='https://www.site.com/blog/wp-content/themes/flat-child/style.css?ver=1.5.5' type='text/css' media='all' />
<link rel='stylesheet' id='parent-style-css'  href='https://www.site.com/blog/wp-content/themes/flat/style.css?ver=4.1' type='text/css' media='all' />
<link rel='stylesheet' id='child-style-css'  href='https://www.site.com/blog/wp-content/themes/flat-child/style.css?ver=4.1' type='text/css' media='all' />

Probably best to create a new thread https://www.ads-software.com/support/theme/flat#postform

I have loaded main stylesheet again on the Flat 1.5.7.
Now you just need to create a style.css file on the child theme. And it will automation loaded on the site.

Regards,
Thanh Luu