How to add custom code to the theme using Child Theme?

If you want to add your own code to the theme, then using a Child Themeis the best way.

#Using a Child Theme

Child themes are a safe way to modify WordPress themes where you don't make any changes to the parent theme’s files. When the parent theme gets updated, the changes made in the child theme are also preserved and applied on the updated version. This is why child themes are the best way to change an existing theme. Rather than modifying theme files directly, you can simply override them with the templates in the child theme.

If you want to know more about child themes, then refer to this blog post here: [Tutorial on Creating WordPress Child Theme] (https://themegrill.com/blog/tutorial-creating-wordpress-child-theme/)

#Creating an eLearning Child Theme (Shortcut Method)

• You can directly download the starter eLearning Child theme zip file. Download here: Get Child Theme For eLearning.

• After the download is finished, look for the elearning-child zip file on your computer, which will likely be in your Downloads folder. Once you find it, remember the location and continue to the next step.

• Navigate to Appearance > Themes and then go to Add New. Now click on Upload Theme.

• Click on browse and navigate to the downloaded elearning-child zip file and click on Install Now.

• Activate the eLearning Child Theme.

#Creating eLearning Child Theme (Manual Method)

• Create a new folder in your themes directory. The themes directory is wp-content/themes. Name the folder elearning-child.

• Inside the elearning-child folder, create a file called style.css and fill in the information as shown below.

/*
Theme Name: eLearning Child Theme
Theme URI: https://masteriyo.com/wordpress-lms/themes/elearning/
Description: Child Theme for eLearning
Author: Masteriyo
Author URI: https://masteriyo.com/
Template: elearning 
Version: 1.0
*/

Add this and save the file.

• Create a file called functions.php and add the code below:

<?php
/* 
 * Child theme functions file
 * 
 */
function elearning_child_enqueue_styles() {

	$parent_style = 'elearning-style'; //parent theme style handle 'elearning-style'

	//Enqueue parent and chid theme style.css
	wp_register_style( $parent_style, get_template_directory_uri() . '/style.css' ); 
	wp_enqueue_style( 'elearning_child_style',
	    get_stylesheet_directory_uri() . '/style.css',
	    array( $parent_style ),
	    wp_get_theme()->get('Version')
	);
}
add_action( 'wp_enqueue_scripts', 'elearning_child_enqueue_styles' );

In creating a child theme, style.css is mandatory, while template files and other files are optional and can be created if required.

• Lastly, Activate the child theme. From the WordPress Dashboard, go to Appearance > Themes and look for the child theme you created. Now simply activate it.

Make sure the Parent theme is also present in the installed themes for the Child theme to work

If you now visit your site, it should look the same, just like when the parent theme was activated. However, you may need to reset some of the settings in the Customizer.

#Adding custom code using a Child theme

Your Child theme is ready. Now, you can add your custom code to the Child theme.

For example: If you want to modify the theme’s CSS, you can add CSS at the end of the style.css file and save it. These CSS lines will overwrite the parent theme CSS.

/*
Theme Name: eLearning Child Theme
Theme URI: https://masteriyo.com/wordpress-lms/themes/elearning/
Description: Child Theme for eLearning
Author: Masteriyo
Author URI: https://masteriyo.com/
Template: elearning 
Version: 1.0
*/

/* Theme customization starts here
------------------------------------------------------- */
#site-title a {
color: #0000FF;
font-size: 42px;
}

#To add code in template files

You can make further changes by adjusting template files. Suppose you want to make some changes or add some extra code to the Header. In that case, you can copy the header.php file of the Parent theme, paste it into the Child theme and make the required changes there. Now save the file, and this header.php file will load instead of the header.php file of the parent theme.

---

---