Sage 9 child theme

sage
18

@Luke_Abell Really sorry about the delay with this I’m mid project and the heat is on. As a rough guide:

  • Grab the roots theme at this point before the directory change. Then cherry pick any other changes which have been merged to roots thereafter. You can cherry pick those improvements from the commit history but be sure to understand that this may well be a hands on manual process.

  • Duplicate that project as a child theme. Being sure the appropriate Template: parent-theme-folder is in your chld theme style.css in the top comments. And that your theme name is unique.

  • In the parent theme’s function file replace this block with the following:

/**
 * Sage required files
 *
 * The mapped array determines the code library included in your theme.
 * Add or remove files to the array as needed. Supports child theme overrides.
 */
array_map(function ( $file ) use ( $sage_error ) {
	if ( is_child_theme() ) {
		$file = "../src/{$file}.php";
	} else {
		$file = "src/{$file}.php";
	}

	if ( ! locate_template( $file, true, true ) ) {
		$sage_error(sprintf( __( 'Error locating <code>%s</code> for inclusion.', 'sage' ), $file ), 'File not found');
	}
}, [ 'helpers', 'setup', 'filters', 'admin' ]);
  • In the child theme functions file replace this block with the one below:
/**
 * Here's what's happening with these hooks:
 * 1. WordPress initially detects theme in themes/sage
 * 2. Upon activation, we tell WordPress that the theme is actually in themes/sage/templates
 * 3. When we call get_template_directory() or get_template_directory_uri(), we point it back to themes/sage
 *
 * We do this so that the Template Hierarchy will look in themes/sage/templates for core WordPress themes
 * But functions.php, style.css, and index.php are all still located in themes/sage
 *
 * This is not compatible with the WordPress Customizer theme preview prior to theme activation
 *
 * get_template_directory()   -> /srv/www/example.com/current/web/app/themes/sage
 * get_stylesheet_directory() -> /srv/www/example.com/current/web/app/themes/sage
 * locate_template()
 * ├── STYLESHEETPATH         -> /srv/www/example.com/current/web/app/themes/sage
 * └── TEMPLATEPATH           -> /srv/www/example.com/current/web/app/themes/sage/templates
 */
if ( is_customize_preview() && isset( $_GET['theme'] ) ) {
	$sage_error(__( 'Theme must be activated prior to using the customizer.', 'sage' ));
}

if ( basename( $stylesheet = get_option( 'template' ) ) !== 'templates' ) {
	update_option( 'template', "{$stylesheet}/templates" );
	wp_redirect( $_SERVER['REQUEST_URI'] );
	exit();
}

Finally in your child theme remove the includes which only need to be part of the parent, so for example change this block to this:

array_map(function ( $file ) use ( $sage_error ) {
	$file = "src/{$file}.php";

	if ( ! locate_template( $file, true, true ) ) {

		// $sage_error(sprintf( __( 'Error locating <code>%s</code> for inclusion.', 'sage' ), $file ), 'File not found');
	}
}, [ 'setup' ]);
  • Finally, and this is the hackiest part, manually include your parents functions file. By adding this line to very bottom of your childs functions.php file like so. Be sure to change both parent-theme-folder lines
require_once( get_theme_root( 'parent-theme-folder-name' ) . '/parent-theme-folder-name/functions.php' );

Now the reason there’s a delay in me getting this to you is that this isn’t the most elequent way, and I have got a more pragmatic solution as opposed to a manual include of the parent functions file. However that code is wrongly entwined with some other must use plugins. I’ll update this thread as soon as I can with that solution, hopefully in ~2 weeks

NB in your setup file in your child you may also want to include your parent css file, or alternatively alter your main.scss file to import your parents main.scss file depending on how you want your CSS/JS relationship to work

2 Likes