Child Theme

Why use a child theme?

Child themes allow you to extend an existing theme in WordPress and adapt it more to your needs.

Ideally, it only contains changes compared to the original, so that the checking effort is kept low during updates.

A child theme behaves in the original state initially the same as the original theme – only the changes you make then make the difference.

So you can also install the parent theme and the child theme directly for a new project or do so at any time.

Separation of Concerns

Theme and Plugin Property

The SV100 theme follows the best practices and therefore does not display any plugin functionality. You should keep this even with a child theme. Read more about the tasks of a WordPress theme.

Getting Started

Installation

Download SV100 Child Theme

Installation

Download the zip archive and unzip it.
You will find the directory sv100_child and a style.css.
Upload the directory together with the style.css to the /wp-content/themes/ folder of your WordPress installation.
Enable the child theme.

Tip

Alternatively, you can upload the child theme as a zip archive via WP-Admin under “Themes”

Basics

Structure

When making adjustments via the child theme, you will mainly expand the modules of the theme. You should know the structure of the theme and the theme modules.

Theme Structure

Theme Module Structure

Minimum Viable Theme Module

Register module in child theme

In the child theme, in the same directory hierarchy as in the parent theme, create a directory with the name of the module you want to change, for example:

/sv100_child/lib/modules/sv_common/

In it, you create a PHP file with the name of the module and use the module snippet. If necessary, adjust it so that the class names match the module:

<?php
namespace sv100_child;

class sv_common extends \sv100\sv_common {
	
}Code language: PHP (php)

This completes the preparation and in the next points you will learn the different possibilities to expand a module.

Replace Theme Files

Replacing CSS and JS

If you want to completely replace CSS or JS files with your own versions, then you only have to save the new versions in the same directory hierarchy in the Child Theme module.

/wp-content/themes/sv100_child/lib/modules/sv_common/lib/css/common/common.css

The SV100 theme automatically detects that files are in the same place in the child theme as in the parent theme and thus loads the child theme files instead of the original files.

Register additional scripts

Add CSS and JS

<?php
namespace sv100_child;

class sv_common extends \sv100\sv_common {
	protected function register_scripts(): \sv100\sv_common {
		parent::register_scripts();

		$this->get_script( 'common_child' )
			->set_is_gutenberg()
			->set_path( 'lib/css/common/common_child.css' );

		return $this;
	}
}Code language: PHP (php)

This code snippet shows how to extend the original method register_scripts to load additional scripts.

In some modules, the scripts must also be enqueued.

Register additional scripts

Add Block Styles

<?php
namespace sv100_child;

class sv_common extends \sv100\sv_common {
	public function init(): \sv100\sv_common {
		parent::init();

		$this->block_styles();
		
		return $this;
	}
	
	protected function register_scripts(): \sv100\sv_common {
		parent::register_scripts();

		$this->get_script( 'gutenslider_box_shadow' )
			->set_is_gutenberg()
			->set_path( 'lib/css/common/style_gutenslider_box_shadow.css' );

		return $this;
	}
	
	public function enqueue_scripts(): \sv100\sv_common {
		parent::enqueue_scripts();

		if($this->has_block_frontend('eedee-block-gutenslider')){
			$this->get_script( 'gutenslider_box_shadow' )->set_is_enqueued();
		}
		
		return $this;
	}
	protected function block_styles(): \sv100\sv_common {
		$this->get_script('block_child')
			->set_path('lib/js/backend/block_extra_styles_child.js')
			->set_type('js')
			->set_is_gutenberg()
			->set_is_backend()
			->set_deps(array('wp-blocks', 'wp-dom'))
			->set_is_enqueued();

		return $this;
	}
}Code language: PHP (php)

Here the init method is extended to add additional block styles.

It is best practice, if a theme module already exists for a Gutenberg block, to extend it in the child theme.

For third-party plugins, however, the common module is also suitable. This example extends the Gutenslider block with its own style.

To ensure that this is only output when the block is active on the respective page, there is a corresponding query here via the has_block_frontend method.

wp.blocks.registerBlockStyle( 'eedee/block-gutenslider', {
	name: 'sv-box-shadow',
	label: 'Box Shadow'
} );Code language: JavaScript (javascript)

In addition, the new block style must be registered via Javascript. For this purpose, the necessary JS file has already been registered in the Child module:

lib/js/backend/block_extra_styles_child.js

.wp-block-eedee-block-gutenslider.is-style-sv-box-shadow .swiper-slide.swiper-slide-active .slide-content > * {
	box-shadow: 0 1px 16px 0 rgba(0, 0, 0, 0.3);
}Code language: CSS (css)

Here is the CSS file for the style, also already registered in the child module.

lib/css/common/style_gutenslider_box_shadow.css

Don’t forget

Renew Theme Cache

In many modules, a cache is active, so CSS generation is cached. Adjust something to the common.css or default.css, remember to renew the theme cache afterwards.