WordPress Child Theme
A child theme is a theme which uses another theme (the parent) as its base. You change only the things you need in the child, and everything else comes from the parent. The biggest benefit: when the parent theme gets an update, your changes are safe.
When to use a child theme
- You want to change a template file or CSS of a theme which you did not write.
- You want to add some PHP code to the theme, and keep it after updates.
- You do not need it when you build your own theme from the start, or when you only add a little CSS in the Customizer or the Site Editor.
Create a child theme
We use our small demo theme as the parent. A child theme needs only a folder with style.css (with the Template line) and functions.php.
/*
Theme Name: TC Child Theme
Template: tc-theme
Version: 1.0
*/
.site-note { color: #b00; }<?php
add_action( 'wp_enqueue_scripts', function () {
// load the parent style first, then the child style
wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css', array(), '1.0' );
wp_enqueue_style( 'child-style', get_stylesheet_uri(), array( 'parent-style' ), '1.0' );
} );The Template line must be the folder name of the parent theme. Now activate the child and ask WordPress which is which:
$ wp theme activate tc-child
Success: Switched to 'TC Child Theme' theme.
$ wp theme list –fields=name,status
name status
tc-child active
tc-theme parent
twentytwentyfive inactive
twentytwentyfour inactive
twentytwentythree inactive
$ wp eval 'echo "Template (parent): " . get_template() . "\nStylesheet (active): " . get_stylesheet();'
Template (parent): tc-theme
Stylesheet (active): tc-child
$ curl -s http://example.com/ | grep -E "parent-style|child-style" | sed 's/^[ \t]*//'
<link rel='stylesheet' id='parent-style-css' href='http://example.com/wp-content/themes/tc-theme/style.css?ver=1.0' media='all' />
<link rel='stylesheet' id='child-style-css' href='http://example.com/wp-content/themes/tc-child/style.css?ver=1.0' media='all' />
Override a template file
To change a parent template, copy it into the child theme with the same name and edit it. WordPress looks in the child first. Let us override footer.php:
<footer>
<p class="site-note">This footer comes from the child theme.</p>
</footer>
<?php wp_footer(); ?>
</body>
</html>
$ curl -s http://example.com/ | grep -E "<footer|site-note"
<footer>
<p class="site-note">This footer comes from the child theme.</p>
What can be overridden?
| Thing | How |
|---|---|
| Template files (single.php, page.php…) | Copy to the child with the same name |
| functions.php | The child file loads first, then the parent one. Both run, so functions are added |
| Pluggable functions | Wrapped by if ( ! function_exists() ) in the parent, so the child can define its own |
| style.css | Loaded separately. Enqueue the parent style yourself |
| Template parts | Use get_template_part(), and copy the part to the child |
Useful functions
get_template_directory(),get_template_directory_uri(): path and URL of the parent.get_stylesheet_directory(),get_stylesheet_directory_uri(): path and URL of the active theme (the child, if used).
| Exercises & Assignments |
|---|
| No Content Found. |
| Interview Questions & Answers |
|---|
| No Content Found. |