Creating Child Theme From An Unmodified Parent Theme

Creating Child Theme From An Unmodified Parent Theme

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

  1. Log in to Cpanel
  2. Put USERNAME and PASSWORD
  3. Now you will reach Cpanel paper_lantern theme.
  4. Go to FILES and then FILE MANAGER
  5. You will reach WordPress root directory.
  6. Go to the wp-content folder
  7. Then to THEMES
  8. Then you will reach THEMES and here you will find the list of themes that are installed on your WordPress Admin.
  9. In THEMES click on FOLDER plus icon and in the NEW FOLDER NAME write down ‘twentytwelve-child’.
  10. Do watch out for non-capital and the hyphen and use it with care.

Here We will make a child theme of ‘twentytwelve’ theme.

  1. You can do it with same procedure with yours favourite thems too.
  2. Then click on CREATE NEW FOLDER and in this way a new folder is created within THEME file.
  3. Now open the newly created folder namely ‘twentytwelve-child’.
  4. Then click on +FILE and a pop-up window namely NEW FILE will appear.
  5. There is the NEW FILE NAME: write down ‘functions.php’ without code.
  6. Then click on CREATE NEW FILE to create ‘functions.php’ file within ‘twentytwelve-child’ folder.
  7. Now click on +FILE a and a pop-up window namely NEW FILE will appear.
  8. There is the NEW FILE NAME: write down ‘styles.php’ without code.
  9. Then click on CREATE NEW FILE to create ‘styles.css’ file within ‘twentytwelve-child’ folder.
  10. Generally, in a child theme, both functions.php and styles.css are the minimum requirement.
  11. If you want to add other files then you can repeat above-mentioned procedures.

Using functions.php

  1. The functions.php of child theme does not override parents functions.php files.
  2. 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.
  3. Open ‘twentytwelve-child’ theme folder of wp-content/themes
  4. Open select functions.php and then click on EDIT from the top menu of cPanel.
    Write down following code in the functions.php file.
  5. Click on SAVE CHANGES.
  6. 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 :

  1. Open ‘twentytwelve-child’ theme folder of wp-content/themes/twentytwelve-child
  2. Open select styles.css and then click on EDIT from the top menu of cPanel.
  3. Do remember that I am showing the example of styles.css of the twentytwelve theme.
  4. Do change accordingly and replace example text with the details relevant to your theme.
  5. In the TEMPLATE line of child theme in styles.css write the name of the main theme.
  6. In this example, the main theme is ‘twentytwelve’ in the directory pf wp-content/themes.
  7. 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.
  8. 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?

  1. Open WORDPRESS AD-MIN
  2. From left sidebar go to APPEARANCE
  3. Then THEMES
  4. Then Choose ‘Twenty Twelve Child’ as active theme.
  5. Then open your website, it should be the same theme as before.

Further Readings: WordPress , Kinsta , Stack overflow

Tags: , ,

freewarespace

Blogger by Choice