Skip to content

Child Themes

btsybulnyk edited this page Oct 10, 2018 · 7 revisions

The child theme of our Boilerplate operates on the same principle as a standard Wordpress child theme.

If you create a child theme you will have all the features from a main theme. All classes will be loaded with an autoloader. Our custom templates hierarchy fully support overwrite from a child theme.

Minimal requirements for Boilerplate child theme is:

  • style.css with template declaration
  • functions.php with autoload setup
  • index.php (just blank, required by WP)
  • app/Theme.php file, extending the main Theme class

Creating a theme

We assume that you use our WordPress Starter installation.

Generate theme files

You can run composer command to generate a theme, which we will modify to make it a child.

composer wp:theme

Specify unique namespace and child theme name in command options.

For example let's generate a theme with such parameters:

composer wp:theme -- child -t="Child Theme" -ns="MafiaCo\Child"

Clean up

Now let's remove all unnecessary code, which we already have in the main theme:

  • assets
  • app classes
  • inc
  • views

At the end you should get something like this:

- /app/
    Theme.php
- /config/
    {config files}
- /.gitignore
- /.htaccess
- /functions.php
- /index.php
- /style.css

Connect to parent theme

For code examples we assume that we use our boilerplate theme as a parent as is and it's uploaded to a folder wp-content/themes/boilerplate

1. Set parent theme in a style.css

Inside style css you should add a Template definition:

/*
Theme Name: child
Description: Custom theme made specially for you!
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: _child

Template: boilerplate
*/

2. Configure Theme.php

Actually what is needed here - just to extend it from your parent theme class:

<?php
namespace MafiaCo\Child;

/**
 * Theme main entry point
 *
 * Theme setup functions, assets, post types, taxonomies declarations
 */
class Theme extends \Boilerplate\Theme\Theme {

	public function register_assets()
	{
		parent::register_assets();
		
		// register your child theme assets below.
        $this->register_assets_css( array(
            'child-styles.css',
        ), array(), get_stylesheet_directory_uri() . '/assets/css/' );
	}
}

Since we use inheritance - our theme will register all the same features as your parent one.

In case you need to update something - just overwrite some method in a Theme class.

3. Configure functions.php

Inside child functions.php you have to overwrite an initialization function. It has the same prefix as a parent theme template name.

Inside this function you have to:

  • register autoload for parent and child theme
  • create an instance of a child Theme class
  • create an instance of a theme settings class (in this case we just use parent theme settings class)
<?php

/**
 * Rewrite parent theme starter functions
 */
function boilerplate_theme_starter() {
	new \JustCoded\WP\Framework\Autoload( 'Boilerplate\Theme', get_template_directory() . '/app' );
	new \JustCoded\WP\Framework\Autoload( 'MafiaCo\Child', get_stylesheet_directory() . '/app' );

	\MafiaCo\Child\Theme::instance();
	\Boilerplate\Theme\Admin\Theme_Settings::instance();
}

That's it! WordPress will automatically include parent theme with all inc folder includes, requirements verification, and run this initialization function.

Extending parent theme

Adding/Extending new features

In case you want to update some feature (for example change some Post Type declaration) - you can copy required class in the same folder as it was in a parent theme, update it and then overwrite it's initialization in a Theme class.

For example we will overwrite dummy content creation for employee post type:

child/app/Post_Type/Employee.php

<?php

namespace MafiaCo\Child\Post_Type;

use JustCoded\WP\Framework\Supports\FakerContent;

/**
 * Custom post type Employee to illustrate single/archive features
 */
class Employee extends \Boilerplate\Theme\Models\Employee {

	/**
	 * Generate faker content
	 */
	public function faker() {
		$fkr = FakerContent::instance();

		return [
			// Post object fields.
			'post_title'          => $fkr->person(),
		];
	}
}

child/app/Theme.php

<?php
namespace MafiaCo\Child;

use MafiaCo\Child\Post_Type\Employee;

class Theme extends \Boilerplate\Theme\Theme {
	/**
	 * Register post types
	 */
	public function register_post_types() {
		Employee::instance();
	}
	// ...

Overwrite templates

This is the easiest thing: just copy a template in the same location inside a child theme. That's it! Now you can modify you custom child template.