WordPress child theme creation and usage tutorial

The official WordPress child theme has a very detailed tutorial.

https://codex.wordpress.org/zh-cn:%E5%AD%90%E4%B8%BB%E9%A2%98

Here are some examples of how to actually use this site.

The role of subtheme

Many times we need to modify some files such as style.css of the theme, or add some function codes to the functions.php file. After we modify it, if the theme is updated later, the files we modified will be updated at the same time.

The function of the child theme is to keep the functions we modified and can be used normally while keeping the theme updated normally.

Tutorial Example

Take the current theme of this site as an example.

Modified: the default article page content width, the default article title font size, and the distance between the bottom footer and the main content of the article.

Added: comment removal URL form, Baidu quick inclusion API submission code

These modifications are in the theme's style.cc and functions.php files. Next I will start creating a sub-theme.

Original theme name: Twenty Twenty-One
Original theme directory name: twentytwentyone

Subtheme name: Twenty Twenty-One Child
Child theme directory name: twentytwentyone-child

Create subtheme directory

We need to first create a sub-theme directory in the WordPress theme directory wp-content/themes. The directory name is set to twentytwentyone-child so that it is easier to distinguish the directory relationship between the original theme and the child theme. It doesn’t matter if you change the subtheme directory to something else.

The child theme must contain some files:

style.css (required)
functions.php (optional)
Template files (optional)
Other files (optional)

Here we only need to create style.css and functions.php in the sub-theme directory.

Create child theme style.css file

The style.css of the child theme has fixed requirements. The following header information must be included:

/*
Theme Name: sub-theme name (write whatever you want)
Theme URI: sub-theme URL (write whatever you want)
Description: Description of the subtopic (write whatever you want)
Author: The name of the theme author (write whatever you want)
Author URI: theme author URL (write whatever you want)
Template: Original theme directory name (must be accurate)
Version: version (write whatever you want)
*/

The header file code of the subtheme of this site is as follows:

/*
Theme Name: Twenty Twenty-One Child
Theme URI: http: //example.com/
Description: Child theme for the Twenty Twenty-One theme
Author:Cheshirex
Author URI: http: //www.cheshirex.com
Template: twentytwentyone
Version: 0.1.0
*/

Then copy the code I modified in the original theme. The code in the entire file after copying is as follows:

/*
Theme Name: Twenty Twenty-One Child
Theme URI: https://www.cheshirex.com
Description: Child theme for the Twenty Twenty-One theme
Author:Cheshirex
Author URI: http: //www.cheshirex.com
Template: twentytwentyone
Version: 0.1.0
*/


:root {
/* Spacing */
--global--spacing-unit: 20px;
--global--spacing-measure: unset;
--global--spacing-horizontal: 25px;
--global--spacing-vertical: 30px;
	
/* Font Size */
--global--font-size-base: 1.25rem;
--global--font-size-xs: 1rem;
--global--font-size-sm: 1.125rem;
--global--font-size-md: 1.25rem;
--global--font-size-lg: 1.5rem;
--global--font-size-xl: 2.25rem;
--global--font-size-xxl: 4rem;
--global--font-size-xxxl: 5rem;
--global--font-size-page-title: var(--global--font-size-xxl);
--global--letter-spacing: normal;
	
	
}


@import url("../twentytwentyone/style.css");

.widget-area {
margin-top: calc(1 * var(--global--spacing-vertical));
padding-bottom: calc(var(--global--spacing-vertical) / 3);
color: var(--footer--color-text);
font-size: var(--footer--font-size);
font-family: var(--footer--font-family);
}

@media only screen and (min-width: 482px) {

:root {
--responsive--aligndefault-width: min(calc(100vw - 4 * var(--global--spacing-horizontal)), 1000px);
--responsive--alignwide-width: calc(100vw - 4 * var(--global--spacing-horizontal));
--responsive--alignright-margin: calc(0.5 * (100vw - var(--responsive--aligndefault-width)));
--responsive--alignleft-margin: calc(0.5 * (100vw - var(--responsive--aligndefault-width)));
}
}
@media only screen and (min-width: 822px) {

:root {
--responsive--aligndefault-width: min(calc(100vw - 8 * var(--global--spacing-horizontal)), 1000px);
--responsive--alignwide-width: min(calc(100vw - 8 * var(--global--spacing-horizontal)), 1240px);
}
}

@media only screen and (min-width: 652px) {

:root {
--global--font-size-xl: 2.5rem;
--global--font-size-xxl: 3.5rem;
--global--font-size-xxxl: 9rem;
--heading--font-size-h3: 2rem;
--heading--font-size-h2: 3rem;
}
}

:root .is-huge-text,
:root .has-huge-font-size {
font-size: var(--global--font-size-xxl);
line-height: var(--global--line-height-heading);
font-weight: var(--heading--font-weight-page-title);
}

After the modification is completed, just save the file.

Build sub-theme functions.php file

The functions.php file is relatively simple. We only need to add the php start tag in the file, and then put the code we added in the tag.

Code example on this site:

request( $api , array( 'method' => 'POST', 'body' => $url , 'headers' => 'Content-Type: text/plain') );
  $result = json_decode($result['body'],true);
//If the push is successful, add a custom column Baidusubmit to the article with a value of 1
if (array_key_exists('success',$result)) {
  add_post_meta($post_ID, 'Baidusubmit', 1, true);
  }
  }
  add_action('publish_post', 'Baidu_Submit', 0);
  }
  
?>

Notes:

style.css

The code in the sub-theme's style.css file has an overwriting relationship with the original theme. We modify a piece of code and put it into the child theme. When we visit the web page, it will automatically rewrite the original theme style.css file code.

functions.php

If you add a piece of code to the original theme, then cut the code directly into the child theme file after creating the child theme. Do not keep the code in the original theme. Otherwise, an error may be reported.

Here the sub-theme code and the original theme only have priority in the execution of the sub-theme code, and the code of the original theme will continue to execute after the sub-theme. Child themes are loaded before the parent theme files are loaded.

After the above operations are completed, the directory will look like this:

For more information on child themes, check out the official tutorial link at the beginning of this article.

Recommended site search: server Hong Kong, how to query domain name registration number, Ministry of Industry and Information Technology domain name registration, foreign trade hosting, aaa server, high defense US server, domain name registration number query, Hong Kong cn2 server, website registration number, Western Digital registration,