Child Theme

3 min read Updated

Use a child theme when you want to change Origami at code level, for example to add PHP functions or to override a template file. A child theme keeps your changes safe when you update Origami. If you change the files of the parent theme, the next update removes your changes.

For small CSS changes you do not need a child theme; see CSS Snippets. For small PHP changes, the Code Snippets plugin works too, as Advanced Customizations shows.

Install the Starter Child Theme

Download the Origami starter child theme. It has no changes yet, only a style.css file for your CSS and a functions.php file for your PHP.

  1. Go to AppearanceThemesAdd ThemeUpload Theme.
  2. Choose the ZIP file and click Install Now.
  3. Click Activate. Keep Origami installed, because the child theme needs it.

The Template: origami line in the child style.css file tells WordPress which theme is the parent. It must match the name of the Origami folder in wp-content/themes, which is origami when you install Origami from WordPress.org. If your Origami folder has another name, change the line to that name before you upload the child theme.

Check Your Settings

WordPress saves Customizer settings for each theme, so the child theme starts without some of them. After you switch, go to AppearanceCustomize and set these again:

  • Theme Settings and Theme Design. See Theme Settings and Theme Design.
  • Your logo in Site Identity or Header Image.
  • The background color and image in Colors and Background Image.
  • Your CSS in Additional CSS. If you use SiteOrigin CSS, copy your CSS into AppearanceCustom CSS while the child theme is active.

WordPress moves your menu location and your Footer widgets to the child theme. Check them in Menus and Widgets.

How the Stylesheets Load

Origami loads the style.css file of the active theme. With a child theme active, that is the child style.css, so a child theme must load the Origami style.css itself. The functions.php file of the starter child theme does this. It loads the Origami stylesheet first and the child stylesheet after it, so your rules win when two rules are equally specific:

<?php
/**
 * Load the Origami stylesheet, then the child theme stylesheet after it.
 */
function origami_child_enqueue_styles() {
	wp_enqueue_style(
		'origami',
		get_template_directory_uri() . '/style.css',
		array(),
		wp_get_theme( get_template() )->get( 'Version' )
	);

	wp_enqueue_style(
		'origami-child',
		get_stylesheet_uri(),
		array( 'origami' ),
		wp_get_theme()->get( 'Version' )
	);
}
add_action( 'wp_enqueue_scripts', 'origami_child_enqueue_styles', 9 );

If you made an Origami child theme before and the site shows without the Origami styles, add this code, without its first line, to the end of its functions.php file. If the child style.css file loads the Origami stylesheet with an @import rule, remove that rule when you add the code, so the stylesheet does not load twice.

Origami prints the CSS for the Theme Design settings you change after the theme and child theme stylesheets. To override one of those values, use a more specific selector, or add the rule in AppearanceCustomizeAdditional CSS.

Change a Template File

To change a template, copy the file from the Origami folder to the same place in the child theme folder, for example footer.php or parts/footer-copyright.php. Then edit the copy. WordPress uses the file from the child theme. If you copy a template, check it after each Origami update, because your copy does not get the changes.

Many Origami functions, for example origami_header_image, check if a function of the same name exists first. To replace one, define a function with the same name in the functions.php file of the child theme. Older child themes that call so_setting() to read a theme setting still work, because Origami keeps that function.

For more on child themes, see Creating a Child Theme.