Using a Child Theme For Your WordPress Website

child-theme

Child Themes

Your WordPress theme is the folder where all the files reside that determines how the content on your site behaves and displays. There are lots of great WordPress themes out there that can make your site look really great. But what if there is something that you want to add to an already great theme, but that is not supported in the theme?

This is where Child themes come in. A child theme inherits it’s functionality from another theme, the parent theme, and can then be tweaked to extent that functionality. You can directly make changes to a theme itself, but as soon as the theme gets updated, all your changes will be lost. This makes child themes especially useful. All your changes will be saved when updates occur.

How to

Firstly, upload the theme you are going to use as a parent theme to your WordPress site, or you may also like to use one of the WordPress default themes.

In your wp-content/themes folder, create a folder with your child theme name. It is good practice to name your child theme the same as the parent theme with -child appended to it.

child-folder

In this folder two basic files are required:

  • style.css
  • functions.php

In the style.css file the following header is required:
/*
Theme Name: Twenty Fifteen Child
Theme URI: http://example.com/twenty-fifteen-child/
Description: Twenty Fifteen Child Theme
Author: John Doe
Author URI: http://example.com
Template: twentyfifteen
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
Text Domain: twenty-fifteen-child
*/

You can adjust the information according to your child theme details.

Note that the Template must specify your parent theme directory name.

Now to make your child theme available, you need to enqueue styles correctly in the functions.php file.
Here is the script that you need to put in the functions file:
function theme_enqueue_styles() {
$parent_style = 'parent-style';
wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' );
wp_enqueue_style( 'child-style',
get_stylesheet_directory_uri() . '/style.css',
array( $parent_style ));
}
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );

Find out more about the wp_enqueue_style() functions.

You can now log into your sites administrations panel and under Appearance > Themes activate your child theme.


Keep your WordPress Website up to date and secured, contact WP Help.

Cheers.

Leave a Comment

Your email address will not be published. Required fields are marked *

*