Child Themes

A child theme is a small theme that names another installed theme as its parent. WordPress runs the parent theme and uses the child’s template files in place of the parent’s copies, and the child can add its own CSS and PHP, so you can change theme code and still update the parent. When a theme updates, WordPress replaces the whole theme folder, and any edit made to the parent’s files is lost.

When You Need a Child Theme

Use a child theme when you want to change the theme’s code: edit a template file such as footer.php, add PHP functions to the theme, or ship your own theme.json, templates or patterns as files.

You don’t need a child theme to change content, settings or CSS. Your content, theme settings, plugin settings, and the templates and styles you edit in the Site Editor are stored in the database, and a theme update leaves them in place. For CSS changes, use one of these instead:

• Classic themes: AppearanceCustomizeAdditional CSS.
• Block themes: AppearanceEditorStyles, then the More menu (three dots) and Additional CSS.
• Any theme: the SiteOrigin CSS plugin, which adds a visual editor.

For a few lines of PHP, a snippets plugin such as Code Snippets keeps the code outside the theme and survives a change of theme.

Starter Child Themes for SiteOrigin Themes

Each SiteOrigin theme has a starter child theme you can download. It has a style.css file for your CSS and a functions.php file that already loads the stylesheets in the right order for that theme. Download it from the theme’s Child Theme page, then install it with the steps under Install and Activate the Child Theme below.

• Corp Child Theme
• North Child Theme
• Unwind Child Theme
• Vantage Child Theme
• Origami Child Theme

Create a Child Theme by Hand

A child theme needs a folder and a style.css file. A child of a classic theme also needs a functions.php file to load the stylesheets, unless the parent loads them itself. The example below makes a child of Twenty Twenty-Five, a default WordPress theme; for another parent, change the names to match it.

Create the Folder

On your computer, create a folder named twentytwentyfive-child. Any name works, and the parent’s folder name followed by -child is the usual choice.

Add style.css

Create a file named style.css in the folder with this header:

/*
Theme Name: Twenty Twenty-Five Child
Template: twentytwentyfive
Version: 1.0.0
Text Domain: twentytwentyfive-child
*/

Template tells WordPress which theme is the parent. It must match the parent’s folder name in wp-content/themes exactly, which can differ from the theme’s display name: SiteOrigin Corp, for example, lives in siteorigin-corp. To check a folder name, go to AppearanceThemes and click the parent theme. The address bar then ends in ?theme= followed by the folder name.

Add your own CSS below the header. Add only the rules you change, and do not copy the parent’s whole stylesheet.

Add functions.php to Load the Stylesheets

Themes load their stylesheet in one of two ways, so look in the parent’s functions.php for the wp_enqueue_style line that loads its main stylesheet.

If that line uses get_template_directory_uri() or get_parent_theme_file_uri(), the parent loads its own stylesheet from the parent folder, and your child style.css is not loaded. Twenty Twenty-Five, Corp, North and Unwind work this way. Create functions.php in the child folder with this code to load the child stylesheet after the parent’s:

<?php
/**
 * Load the child theme stylesheet after the parent stylesheet.
 */
function my_child_theme_enqueue_styles() {
	wp_enqueue_style(
		'my-child-theme-style',
		get_stylesheet_uri(),
		array(),
		wp_get_theme()->get( 'Version' )
	);
}
add_action( 'wp_enqueue_scripts', 'my_child_theme_enqueue_styles', 20 );

If the line uses get_stylesheet_uri(), the parent loads the active theme’s stylesheet, which is now your child style.css, and the parent’s own stylesheet is skipped. Vantage and Origami work this way. Use this code instead to load the parent stylesheet first:

<?php
/**
 * Load the parent theme stylesheet before the child stylesheet.
 */
function my_child_theme_enqueue_parent_style() {
	wp_enqueue_style(
		'my-child-theme-parent-style',
		get_parent_theme_file_uri( 'style.css' ),
		array(),
		wp_get_theme( get_template() )->get( 'Version' )
	);
}
add_action( 'wp_enqueue_scripts', 'my_child_theme_enqueue_parent_style', 5 );

Rename the my_child_theme parts to something unique to your site. A child of a block theme only needs functions.php if you put CSS in its style.css.

Block Theme Child Themes

A child of a block theme uses the same folder and style.css header. To change global styles and settings, add a theme.json file to the child folder; WordPress merges it with the parent’s, so it only needs the values you change. To replace a template, template part or pattern, add a file with the same name in the child’s templates, parts or patterns folder.

Install and Activate the Child Theme

1. Compress the child theme folder into a zip file.
2. Go to AppearanceThemesAdd ThemeUpload Theme.
3. Use the file field to select the zip, then click Install Now.
4. Click Activate. Keep the parent theme installed, because the child theme needs it.

You can also upload the unzipped folder to wp-content/themes with an FTP program or your Hosting File Manager, then activate it at AppearanceThemes.

What Changes When You Activate a Child Theme

WordPress treats the child theme as a new theme. The first time you activate it, WordPress carries over your menu locations and widgets, but Customizer settings, such as colors and theme options, stay with the parent theme, and in a block theme the templates and styles you edited in the Site Editor stay with the parent too. Check your settings after you switch, and if you can, set up the child theme before you customize the site. To copy Customizer settings from the parent, follow Migrating Parent to Child Theme Customizer Settings.

Change Theme Files in the Child Theme

To change a template, copy the file from the parent folder to the same place in the child folder, for example footer.php, and edit the copy. WordPress uses the child’s copy. Your copy does not receive the parent’s later fixes to that file, so compare it with the parent after major updates.

functions.php works differently: WordPress loads the child’s functions.php and then the parent’s, so a copy of the parent’s file in the child can declare the same functions twice and cause a fatal error. Add only your own code to the child’s functions.php, and change the parent’s behavior through its action and filter hooks. If the parent wraps a function in if ( ! function_exists( ... ) ), a function with the same name in the child replaces it.

The WordPress Theme Handbook covers child themes in more detail in Child Themes.

Related

• Updating a Theme Using a ZIP File
• Installing a Plugin
• Debugging in WordPress
• Migrating Parent to Child Theme Customizer Settings