Child theme in WordPress is simply the ability to retain any design customization performed on a theme that otherwise can be lost whenever it is updated. But it is very important to update themes especially for security reasons.
This is one of the reasons why WordPress keep moving from one version to the other prompting users to update accordingly including WP plugin and theme developers.
With child theme, you can update your theme and still keep all your unique design intact.
Child theme has this ability because of its inherent power of overriding the parent theme. It is inherent because WordPress gives it priority by loading the design structures on it before looking into the parent theme whenever a request is made.
I believe strongly that it is another way Automatic (WordPress software creators) have made it possible for webmasters to use WordPress to create beautiful and elegant websites that have the capacity to draw the attention of visitors.
Why is child theme important?
– It help preserve design customization especially for site owners.
– Its time saver for theme developers.
– Its very simple to setup and manage.
– It allows deeper customization that include addition of template files that are not present in the parent theme.
– Its cost effective for web designer.
From the points highlighted above, it seems necessary to create one for your WordPress powered website if you ever plan to tweak your theme. If that is true, let’s get down to how to create it.
Simple tutorial on creating child theme
It is very simple in the sense that all what you need for it to work is a stylesheet.
For instance, let’s say I want to create a child theme on a theme called ‘Touch’. I’ll have to create a folder for my child theme within the directory of the website folder.
Remember, every theme on WordPress is located in the wp-content/theme directory of your hosting server or under the Appearance/Themes on WordPress admin dashboard. To access the wp-content/theme, you’ll have to log-in to your cpanel.
Go to ‘File Manager‘ and click on wp-content on the directory of the website folder that contains the parent theme. Then, click on the themes on the new page that emerge.
You’ll see all the themes installed on the website. Create a new folder and name it Touch-child. This type of name is good for identification.
NOTE: It is compulsory to have installed the theme you wish to create a child theme.
Now, let’s get good text editor like notepad on the computer and compose the following stylesheet;
/* Theme Name: Touch Child Version: 1.0 Author: Frandimore Themes Author URI: http://twitter.com/frandimore Template: Touch Theme URI: http://frandimore.com/touch-child Description: A lighter-than-air WordPress theme. Tags: light, one-column, flexible-width, custom-background. */
The parameters you need to pay particular attention to are:
– The theme name: Any name you wish to call your new theme with or without “child” appended to it.
– The Template: This is the name of the parent theme upon which a child theme is to be created.
Save the file as style.css.
– The import function: This is the call-in function that will import the stylesheet of the parent theme into the child theme.
Update: The import function is no longer a good idea to import the style sheet of the parent theme into the child theme. Instead, it is better to use the enqueue script from functions.php file to load the style sheet.
So, what you need to do is to create a functions.php file on the child theme folder and add the code below into it.
function themeslug_enqueue_style() {
if ( is_child_theme() ) {
// load parent stylesheet first if this is a child theme
wp_enqueue_style( 'parent-stylesheet', trailingslashit( get_template_directory_uri() ) . 'style.css', false );
}
// load active theme stylesheet in both cases
wp_enqueue_style( 'theme-stylesheet', get_stylesheet_uri(), false );
}
add_action( 'wp_enqueue_scripts', 'themeslug_enqueue_style' );
NOTE: Ensure you add <?php (php opening tag) to functions.php file and then paste the code above below it.
Use either the File Manager on your hosting platform or any FTP software like Filezilla to upload the style.css and functions.php files to the child theme folder created on wp-content/theme earlier. The theme will automatically reflect among installed themes on your WordPress admin panel.
Access the theme on WordPress dashboard
To access the child theme, just log in to your admin dashboard. Go to Appearance and click on Themes. You’ll see the theme created. Activate it to make it go live on the front-end of your website.
You might need to reload your background image and re-save your menu.
Alternative method
Alternatively, you can create a folder on your computer and name it Touch-child. Copy and paste the style.css and functions.php files created on the folder and then, convert the folder to .zip (i.e. compress the folder).
Now, log in to your WordPress admin panel and go to Appearance and click on Themes.
Click Add New at the upper part of the page. On the new page that emerge, click on Upload and use the browse button to select the child theme folder you compressed on your computer.
Click upload button and you are done.
Practical example using Twenty Twelve theme
Let’s quickly create a child theme for Twentytwelve theme as a practical example.
1. Create a folder called Twentytwelve-child theme
2. Compose a stylesheet file using text editor and name it style.css;
/* Theme Name: Twenty Twelve Child Theme URI: http://frandimore.com/twenty-twelve-child/ Description: Twenty Twnety Child Theme Author: Frandimore Author URI: http://frandimore.com Template: twentytwelve Version: 1.0 Tags: light, dark, two-columns, right-sidebar, responsive-layout. Text Domain: twenty-twelve-child */ "start customization here"
Compose functions.php file and add the code below into it;
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
}
3. Copy and paste style.css and functions.php files into Twentytwelve-child folder.
4. Upload folder through either File manager on cpanel or via WordPress admin dashboard.
a. To upload via FTP or File Manager
Log in to your hosting account and access File Manager or use Filezilla. Upload the entire folder to wp-content/themes directory of the website.
b. To upload via WordPress dashboard
Convert the Twentytwelve-child folder to .zip on your computer. Log in to your WordPress admin area. Go to Appearance > Themes. Upload the zip file.
5. Activate the theme.
Whenever you want to make any changes on your theme design, just open your child theme style.css file and effect the change below the “start customization here” hook.
Don’t forget to save whenever you modify codes in a file.
One-Click Child Theme Plugin
If you do not want to go through all the above steps in creating a child theme, you can install Child Theme Configurator plugin. The plugin will create the child theme of the activate theme on your website in one click.
All you need to do is enter the name you want for the theme and a short description of the theme.
You have the opportunity for a whole lot of configuration that you feel will suit you need.
Advance modification in Child Theme
The possibility of an extensive functionality coupled with the inherent overriding capabilities of its parent theme makes child theme a necessity.
Beyond stylesheet tweaking, you can add or modify specific template files to best suit the design you wanted on your website. Though the procedure is slightly different from how it’s been done on stylesheet. Never mind, I’ll walk you through it.
For template file
To customize a particular template file say index.php, all you need to do is to create that same file name on the child theme folder and modify the code there.
And you’re sure your changes will override the one on the parent theme and no fear of losing those changes whenever the theme is updated.
In the same vein, you can add files that do not exist in the parent theme on the child theme and WordPress will ensure the defined structures are effected.
For functions.php
The modification of functions.php file is not that different in that you also need to create a functions.php file on the child theme but you don’t have to move the existing functions on the parent theme to the child theme.
Should you need to add another function or alter the behavior of a particular function, what you should do is to add just the new code into the functions.php file in the child theme. Ensure the open php tag (<?php) is in place, at the top.
Below is an example of how we force one of our web pages on the front page of our mobile template web design sometimes ago:
&lt;?php (php open tag)
////////////////////////////////////////
// Change front page
////////////////////////////////////////
add_action( 'after_setup_theme', 'change_theme_frontpage' );
function change_theme_frontpage() {
$frontpage = get_page(3877); // 3877 is the idof the page you want to show
update_option('show_on_front', 'page'); // show on front a static page
update_option('page_on_front', $frontpage-&gt;ID);
}
?&gt; (php close tag)
It’s really that simple, but you just need to know how to do it.
Frequently Asked Questions
Q: I followed all the instructions, but why do I keep getting this message on WordPress Appearance/theme page:
Broken Themes:
The following themes are installed but incomplete. Themes must have a stylesheet and a template.
A: This problem usually comes from style.css file setup. You must ensure the ‘Template’ name and enqueue code are
correct.
Mark you, these names are case sensitive. Also, ensure the parent theme has been installed before attempting to create the child theme.
Q: What are the disadvantages of using child theme?
A: The only known disadvantage is that it can make your website slow a bit because of the call functions.
Q: Does it affect SEO?
A: It does not in any way affect or hamper website SEO.
Q: Do I have to copy the code in a template file into the same file name created in the child’s theme before modifying it?
A: Yes, you have to modify the code within the child theme after creating the file with the same name. This way you won’t lose the changes you make whenever the theme is updated.
Q: Would a template file in the child’s theme need to be updated when the parent theme of the file is updated?
A: It’s not necessary, however you might have to copy the updated file in the parent theme into the corresponding file of the child theme and then re-modify the code again if you so wish.
If you have further questions or superior answers, don’t hesitate to use the comment form below.
- How to Add Post Thumbnail Image to RSS Feed on WordPress - February 16, 2016
- 10 Tips for Getting the Most out of Google Image Search - January 19, 2016
- How to Add Next and Previous Post Links with Thumbnail - January 11, 2016
