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

If you want to add your own code to the theme, then the best way is to use a Child Theme.

Using 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 preserved and applied to the updated version as well. This is why Child themes are the best way to make changes to 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

Creating a Zakra Child Theme (Shortcut Method)

You can directly download the starter Zakra Child theme zip file. Download here: Get Child Theme For Zakra
After the download is finished, look for the zakra-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 zakra-child zip file and click on Install Now.
Activate the Zakra Child Theme.

Creating Zakra Child Theme (Manual Method)

Create a new folder in your themes directory. The themes directory is wp-content/themes. Name the folder zakra-child.
Inside the zakra-child folder, create a file called style.css and fill in the information as shown below.

/*
Theme Name: Zakra Child Theme
Theme URI: http://themegrill.com/themes/zakra/
Description: Child Theme for Zakra
Author: ThemeGrill
Author URI: http://themegrill.com
Template: zakra
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 zakra_child_enqueue_styles() {

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

	//Enqueue parent and chid theme style.css
	wp_register_style( $parent_style, get_template_directory_uri() . '/style.css' ); 
	wp_enqueue_style( 'zakra_child_style',
	    get_stylesheet_directory_uri() . '/style.css',
	    array( $parent_style ),
	    wp_get_theme()->get('Version')
	);
}
add_action( 'wp_enqueue_scripts', 'zakra_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: Zakra Child Theme
Theme URI: http://themegrill.com/themes/zakra/
Description: Child Theme for Zakra
Author: ThemeGrill
Author URI: http://themegrill.com
Template: zakra
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.

Updated on: 24/08/2022