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: http://example.com/flat/
Description: Flat Child Theme
Author: John Doe
Author URI: http://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: http://example.com/flat/
Description: Flat Child Theme
Author: John Doe
Author URI: http://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='http://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='http://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='http://www.site.com/blog/wp-content/themes/flat-child/style.css?ver=4.1' type='text/css' media='all' />
Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
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
