Last Updated on March 8, 2023 by freewarespace
A child theme is a theme. It inherits functionality and styling of the main theme. Here, the main theme is another theme. The child theme will look same as the main theme. It is not a good idea to modify, existing theme.
Why use a Child Theme?
- From time to time themes are updated.
- If there is the modification in existing theme, then all of these modifications will be lost.
- Use Child Theme and then modify it so that even if the main Theme is updated, modifications to Child Theme stays.
- If there is the wrong modification and your website is down as the result of it, then you can turn on to the main theme and create another Child Theme.
- If you have host and domain and WordPress website, from time to time you will learn about various WordPress Theme development.
How to create a Child Theme?
- A child theme has at least one directory.
- The name of the directory is the child theme directory.
- For the theme of ‘twentytwleve’ the name of child theme directory will be ‘twetytwelve-child’.
- At least two files in the child theme directory which is ‘functions.php’ and ‘styles.php’.
How to Create WordPress Child Theme Step by Step
- Log in to Cpanel
- Put USERNAME and PASSWORD
- Now you will reach Cpanel paper_lantern theme.
- Go to FILES and then FILE MANAGER
- You will reach WordPress root directory.
- Go to the wp-content folder
- Then to THEMES
- Then you will reach THEMES and here you will find the list of themes that are installed on your WordPress Admin.
- In THEMES click on FOLDER plus icon and in the NEW FOLDER NAME write down ‘twentytwelve-child’.
- Do watch out for non-capital and the hyphen and use it with care.
Here We will make a child theme of ‘twentytwelve’ theme.
- You can do it with same procedure with yours favourite thems too.
- Then click on CREATE NEW FOLDER and in this way a new folder is created within THEME file.
- Now open the newly created folder namely ‘twentytwelve-child’.
- Then click on +FILE and a pop-up window namely NEW FILE will appear.
- There is the NEW FILE NAME: write down ‘functions.php’ without code.
- Then click on CREATE NEW FILE to create ‘functions.php’ file within ‘twentytwelve-child’ folder.
- Now click on +FILE a and a pop-up window namely NEW FILE will appear.
- There is the NEW FILE NAME: write down ‘styles.php’ without code.
- Then click on CREATE NEW FILE to create ‘styles.css’ file within ‘twentytwelve-child’ folder.
- Generally, in a child theme, both functions.php and styles.css are the minimum requirement.
- If you want to add other files then you can repeat above-mentioned procedures.
Using functions.php
- The functions.php of child theme does not override parents functions.php files.
- What you add to functions.php files all been comes to refresh to the child theme and does not trouble functionalities of the functions.php file of the parent theme.
- Open ‘twentytwelve-child’ theme folder of wp-content/themes
- Open select functions.php and then click on EDIT from the top menu of cPanel.
Write down following code in the functions.php file. - Click on SAVE CHANGES.
- In this way, the functions.php file of child theme of ‘twentytwleve’ is created.
<?php // Exit if accessed directly if ( !defined( 'ABSPATH' ) ) exit; // BEGIN ENQUEUE PARENT ACTION // AUTO GENERATED - Do not modify or remove comment markers above or below: if ( !function_exists( 'chld_thm_cfg_parent_css' ) ): function chld_thm_cfg_parent_css() { wp_enqueue_style( 'chld_thm_cfg_parent', trailingslashit( get_template_directory_uri() ) . 'style.css', array( ) ); } endif; add_action( 'wp_enqueue_scripts', 'chld_thm_cfg_parent_css', 10 ); // END ENQUEUE PARENT ACTION
Using styles.css :
- Open ‘twentytwelve-child’ theme folder of wp-content/themes/twentytwelve-child
- Open select styles.css and then click on EDIT from the top menu of cPanel.
- Do remember that I am showing the example of styles.css of the twentytwelve theme.
- Do change accordingly and replace example text with the details relevant to your theme.
- In the TEMPLATE line of child theme in styles.css write the name of the main theme.
- In this example, the main theme is ‘twentytwelve’ in the directory pf wp-content/themes.
- So in the TEMPLATE line write down ‘twentytwelve’. Do watch that it should be non-capital letters and there is no space between two words twenty and twelve.
- Write down following code in the styles.css file. Then click on SAVE CHANGES from the right-hand upper side.
/* Theme Name: Twenty Twelve Child Theme URI: https://wordpress.org/themes/twentytwelve/ Template: twentytwelve Author: the WordPress team Author URI: https://wordpress.org/ Description: The 2012 theme for WordPress is a fully responsive theme that looks great on any device. Features include a front page template with its own widgets, an optional display font, styling for post formats on both index and single views, and an optional no-sidebar page template. Make it yours with a custom menu, header image, and background. Tags: blog,one-column,two-columns,right-sidebar,custom-background,custom-header,custom-menu,editor-style,featured-images,flexible-header,footer-widgets,full-width-template,microformats,post-formats,rtl-language-support,sticky-post,theme-options,translation-ready Version: 2.5.1530436466 Updated: 2018-07-01 09:14:26 */
How to Activate Child Theme on your WordPress site?
- Open WORDPRESS AD-MIN
- From left sidebar go to APPEARANCE
- Then THEMES
- Then Choose ‘Twenty Twelve Child’ as active theme.
- Then open your website, it should be the same theme as before.
Further Readings: WordPress , Kinsta , Stack overflow