Using ChildTheme to customize

If you have made some customization in your Main theme for example add extra CSS/JS/PHP code, unfortunately, whenever you update the Main theme it will be lost.

So what could you do to preserve all of your Custom code? The key is: you should install, active and place all of your custom code in the Child theme.

Let we clarify more for you by some examples:

1. Adding custom CSS via style.css file:

If you need a Google font which is not included in our available font list like Poppins. Please install ChildTheme, then add the following CSS code to the file style.css in folder "your-folder\wp-content\themes\your-theme-child" to add it.

@import url(https://fonts.googleapis.com/css?family=Poppins);

NOTE: The @import line of code should be the very first line in your CSS file

2. Custom the available PHP files:

In case you want to customize another template file such as 404.php, copy it from the Main theme folder to the Child theme folder in the same folder hierarchy, then edit it.

For more details: Firstly, copy the original 404.php file in "your-folder\wp-content\themes\your-theme" to the "your-folder\wp-content\themes\your-theme-child". Secondly, you can make whatever modifications you want to it.

3. Using function.php to add additional PHP function:

The structure of functions.php is simple with an opening PHP tag at the top, and below it, you can add many functions as you wish.

The example below shows an elementary functions.php file that does one simple thing: Adds a favicon link to the head element of HTML pages.

To do that you need go to the "your-folder\wp-content\themes\your-theme-child" folder, open the functions.php file and add this code:

<?php // Opening PHP tag - nothing should be before this, not even whitespace
// Custom Function to Include
function favicon_link() {
    echo '<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico" />' . "\n";
}
add_action( 'wp_head', 'favicon_link' );

If you have installed the Child Theme, you can alternatively go to Appearance > Editor to modify the functions.php.

For more information, please read this official WordPress document about Child theme https://codex.wordpress.org/Child_Themes