Theme — Child Themes - martindubenet/Wordpress GitHub Wiki

A Child theme is a theme that depends on a parent theme to work properly. Common usage is when you want to customise an existing theme. A good start is to rely on themes managed by Automattic since WordPress 3.0 came out. They're all named Twenty something. For this documentation we'll go with the Twenty Twenty theme as parent.

Requirements

1. Local host environment (Wamp or Mamp).
2. Download a Wordpress solution from https://wordpress.org/download/
3. Parent theme: https://wordpress.org/themes/twentytwenty/Download and install this parent theme within the /wp-content/themes/ repository of your localhosted Wordpress site.

 

Create a child of TwentyTwenty

TwentyTwenty already use the assets repository to store static files so I do the same here. Following a common nomenclature helps for future maintenance.

1. Create a new repository within that same folder: /wp-content/themes/child-theme.
2. Create the following folders and files in that new child repository:
   1. /assets/css/theme.css
   2. /assets/js/theme.js
   3. /functions.php
   4. /screenshot.png (any 1200 x 900 pixels image will do)
   5. /style.css

style.css

Add Template: twentytwenty to the usual required header comments to declare a theme.

Template:           twentytwenty
Theme Name:         Child of Twenty Twenty
Text Domain:        twentychild
Author:             MartinDube.net
Version:            0.0.1
License:            GNU General Public License v2 or later
License URI:        Any

functions.php

Don't forget that 4 mod colors are declared in the parent theme's function twentytwenty_get_color_for_area() (twentytwenty/functions.php, #667).

The following function is for loading a distinct stylesheet. The logic been that you use the default /style.css only for declaring your theme and load a second CSS file where you can minify all your styles.

<?php
/**
 * Enqueue scripts and styles with conditionnal REMOTE_ADDR.
 */
function childtheme_styles_scripts() {

	// IF developping on localhost clear browser’s cache often, ELSE once a week
	if (in_array($_SERVER['REMOTE_ADDR'], array('127.0.0.1', '::1'))) {
		$twentychild_fakeVersionNumber = date('yzHi.s'); // every seconds
	} else {
		$twentychild_fakeVersionNumber = date('y.W'); // weekly
	}

	// theme styles
	wp_register_style( 'sass-compiled-css', get_stylesheet_directory_uri() . '/assets/css/theme.css', array(), $twentychild_fakeVersionNumber, 'screen');
	wp_enqueue_style( 'sass-compiled-css' );

	// theme scripts
	wp_enqueue_script( 'twentychild-theme', get_template_directory_uri() . '/assets/js/theme.js', array(), $twentychild_fakeVersionNumber, true );
}

add_action( 'wp_enqueue_scripts', 'childtheme_styles_scripts' );
?>

 

Sass your styles (optional)

• Create the required by npm package.json file at the root of your theme.
• Create the sources repositories and files:
  1. /src/sass/_twentytwenty.scss
  2. /src/sass/_layout.scss
  3. /src/sass/theme.scss

package.json

The following lines will load the Dart Sass compiler as a node_modules for (development only). And adds two basic scripts to compile your Sass files as a minified CSS with it’s CSS Map to help you when using the browser’s web inspector.

{
  "name": "theme",
  "version": "1.0.1",
  "description": "Front-end stack for custom wordpress theme",
  "author": "MartinDube.net",
  "license": "ISC",
  "main": "assets/js/theme.js",
  "devDependencies": {
    "sass": "^1.42.1"
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "watch": "sass src/sass:assets/css --embed-sources --style=compressed --quiet --watch",
    "compile": "sass src/sass:assets/css --embed-sources --style=compressed"
  }
}

theme.sass

This is the main stylesheet. Use it to declare the variables at the top so they will be available within the other Sass files.

/**
 * `ttc` is the acronyme for `Twenty Twenty Child`
 */
$ttc_accent: #e22658;

@import '_twenty20.scss';
@import '_style.scss';

_style.scss

This is where you add your custom styles.

_twenty20.scss

1. Simply copy/paste all the lines of the master theme’s twentytwenty/style.css EXCEPTs it’s header comments.
2. Find all the #e22658 and replace theme with the variable $ttc_primary that we declared in the main file. Save & Close.

Compile Sass to CSS

In the Bash Terminal run the script that suites your need:

script	Description
npm run watch	Recompile the files everytime the OS detects a Save action in the src/sass/* repository.
npm run compile	Compiles the src/sass/* repository only ounce and show all alerts