How to create a child theme?

Knowledge Base > General > How to create a child theme?

in General Tags: childoverridingsettingstheme

A Child Theme is just an empty theme that inherit all the syles/functions from your main theme “the parent”.

Why should I have a child theme?

Actually all the settings you select in TiePanel are kept in the database and will not be affected even if you deleted the whole theme files, you amy need to add extra CSS codes to be loaded within your theme and you can add these codes to “Custom CSS” section under (TiePanel >> Styling)

However, some may need to edit the main theme files without losing these changes after themee update, and that’s why you should think about child theme/

What can be overridden by child theme?

All styles in the parent theme style.css file can be changed in the child theme, also you can add more new CSS codes in the child theme style.css file, and some php files can be overwritten using child theme.

Note: Core theme functions located mainly at (Sahifa/framework/functions/) can’t be masked using child theme concept.

How to create a child theme ?

  • Let’s assume you are creating a child theme for Sahifa theme, then you wil need to create a new folder under (/wp-content/themes) named “sahifa-child”.
  • Also, create a new file under this sahifa-child theme folder called “style.css”.
  • Add these lines in style.css file:
/*
Theme Name: Sahifa Child
Description: Child theme for Sahifa theme
Author: TieLabs
Template: sahifa
*/
/* write custom css after this line */

Note: the “Template” tage in the code above, is the name of the parent theme folder which is by default “sahifa” here, of course you will need to change it in case you have differnet heme efolder name than the default.

  • The last step is to tell the child theme to load the parent theme styles, to do that we need to create a new file under child theme directory called functions.php and add this code snippet to it:
<?php
/**
* Enqueues child theme stylesheet, loading first the parent theme stylesheet.
**/
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
	wp_enqueue_style( 'tie-parent-css', get_template_directory_uri() . '/style.css' );

	/* Load the RTL.css file of the parent theme */
	if ( is_rtl() ) {
		wp_enqueue_style( 'tie-parent-rtl-css', get_template_directory_uri().'/rtl.css', '' );
	}
}
?>
  • Then just go to (WordPress Dashboard >> Appearance >>Themes) and activate your child theme just as any regular theme.

0