Create and use sub-themes to prevent loss of added functionality
This article was published 373 days ago. The content in the article may be out of date. If you have any questions, please leave a message in the alvincr.com
view my personal blog original article for more：
1 Basic content
1 background
Recently, the site has customized a lot of styles and added a lot of functions, but these contents will be automatically deleted as the theme is updated. Unless the theme is not updated, the operation must be repeated again. Don’t be afraid of ten thousand, just in case, if the theme exists It is very troublesome to deal with the situation that must be updated, and a large amount of content has been changed.
Fortunately, there are not many changes to the theme now, so I decided to adopt a sub-theme to prevent special circumstances in the future.
2 What is a subtopic
I personally think that a child theme is a child type that inherits the functions of the parent type, has all the functions of the parent type, but can add other functions by itself.
The child theme can also be regarded as a separate theme, we only need to add a custom style.css file in the theme directory to take effect.
3 containment relationship
wp-content must contain the following content: (ellipsis content is unnecessary content)
- father-themes (parent theme directory, including complete content)
- EndSkin (parent theme directory)
- index.php
- style.css
- …….
- EndSkin-Child (sub-theme directory, including some custom content)
- style.css
- …….
- father-themes (parent theme directory, including complete content)
4 Function of sub-theme
The ultimate purpose of the child theme is to customize the parent theme. For example, to customize the content of the homepage, you only need to put the corresponding template file in the child theme directory, and WordPress will automatically call it first when detected. A special file in the child theme is functions.php, which will not be overwritten, but is introduced at the same time in the order of the child parent theme. The functions.php file can be used to maximize the customization of the theme, but it requires the cooperation of the parent theme and certain WordPress plugin API knowledge.
5 Other knowledge
I encountered a lot of problems when creating subtopics. Here are the basics to solve the problem.
https://webdesign.tutsplus.com/tutorials/a-guide-to-overriding-parent-theme-functions-in-your-child-theme–cms-22623 (The following is a machine translation)
How to partially override the function in the parent theme
Strictly speaking, you cannot partially override a function. You can only let it run or disable it. But there is a solution.
The first is that the function you want to partially cover contains pluggable functions. You may find that this function includes calling another pluggable function from the parent theme.
In this case, if you want to change the code, you can overwrite any function in the main function. Do this by writing a new version of a pluggable function that contains only one
returnstatement or contains alternative code. Please note that this only works when the function is pluggable; otherwise, your site will be interrupted.However, this method only works if you are lucky enough to need to override the functionality in a function provided by another included pluggable function.
In most cases, this is not an option. In this case, you will need to deactivate the function and replace it with your own function with another name. To create a new function, you can copy and paste the function from the parent theme into the functions.php file of the child theme , and then edit it to remove unnecessary code.
You will use two of your own functions: one to delete the original function, and the second to provide new code, as the following example covers the parent theme called on the init hook:
2
3
4
5
6
7
8
9
10
11
function remove_parent_function(
remove_action( 'init', 'parent_theme_function');
)
add_action( 'wp_loaded', 'remove_parent_function');
function child_theme_function(
// contents of child theme function based on original parent theme function
)
add_action( 'init', 'child_theme_function');How to rewrite non-pluggable functions
The non-pluggable functions in the parent theme cannot be overridden in any special way. Therefore, you must use the above method to remove the function from its action hook, and then write a new function on the same action hook that provides the new code.
Don’t give the function in the child theme the same name as the function in the parent theme, because this will ruin your site!
2 Create subtopic
Method one: code
Enter /www/wwwroot/alvincr.com/wp-content/themes through the shell, and use mkdir child-“change here to the template theme you want to create”
The content I added here is as follows:
/*
Theme Name: Child_ashe //Sub theme name is required
Theme URI: http://childtheme-generator.com/ //Theme page, optional
Description: Child_ashe is a child theme of Ashe, created by ChildTheme-Generator.com //Subject description, optional
Author: AlvinCR
Author URI: http://alvincr.com/ //Author website
Template: ashe
Version: 1.0.0
Text Domain: child-ashe
*//*
Add your custom styles here
*/
Method two: third-party tools
1. Plugin
Child Theme Configurator
Child Theme Generator
2. Automatically generate website
https://childtheme-generator.com/create-child-theme
I did not use this method, the effect is not guaranteed, it should be in the form of a compressed package after generation, and then upload it to the website.
Method: Find Appearance-Add-Upload Theme, after enabling the uploaded theme. WordPress will automatically recognize the parent theme.
Jump to the picture below
problem
1 Fatal error encountered
After I added a function to the sub-theme function.php, I entered the homepage and the following situation occurred:
The reason for this is because: I copied the custom code in the parent theme function.php into the child theme, but did not delete the copied code in the parent theme.
Refer to the above knowledge about pluggable functions, you can know that you can add your original code in the middle of the code I selected. (Pay attention to the location of <?php here, and don’t add php tags repeatedly)
`
2
3
4
5
6
``function` `my_function() {
``// 将你自定义的代码放到这里来，就不会出现上面的情况了。
``}
}
?>
The picture below is how I did not add CSS:
2 The preview style is different from the main theme
For example, when I preview here, there is a blank on the top, no matter how I adjust the css and function, it is invalid. I use the browser console to check that this is the code left by my flash animation, and it can’t be displayed in the preview because of Google Browse. The device does not support flash anymore.
If you can’t find the location of this code, refer to question 3
Check the original code of the webpage and find that the beginning is this flash animation…
3 How to find the code location (this is very interesting, I will study separately and write an article)
You can download it to the local, and then hold down shift and click the right mouse button in the explorer, and choose to open the powershell window here.
Use the following command to find the location of the code.
findstr.exe /s /i “Fill in the code you are looking for here” .
