Ultimate Guide How to Create a WordPress Child Theme (Step by Step)

Ultimate Guide How to Create a WordPress Child Theme (Step by Step)

July 30, 2021

Creating a child theme is a great way to add advanced customization to your theme without having to worry about erasing those changes each time you update the theme. In fact, a Wordpress Child theme has many benefits. It allow you to better organize all of your custom CSS/Code in one place, making it easier to collaborate with others.

In this post, Im going to show you how to Build WordPress Child Theme. So lets Start.

Why use a Child Theme?

Here are a few reasons use WordPress Child Themes?

  • If you modify an existing theme and it is updated, your changes will be lost. With a child theme, you can update the parent theme (which might be important for security or functionality) and still keep your changes.
  • It can speed up development time.
  • Its a great way to get started if you are just learning WordPress theme development.

How to Create a WordPress Child Theme

Create a directory in your themes directory to hold the child theme. The theme directory is wp-content/themes. You should name the directory without any space as part of the name, and it is common practice to use the name of the parent theme folder with -childappended to it. For example, if you are making a child of the twentyfourteen theme, your folder name would be twentyfourteen-child.

Note: In this example, we are naming the child theme folder with -childappended to it for didactical purposes, but you can name the folder whatever you like as long as you include the line "Template" on your child theme CSS, as will be explained below.

In the child theme directory, create a file called style.css. The style sheet must start with the following lines:

*

Theme Name: Twenty Fourteen Child

Theme URI:http://example.com/twenty-fourteen-child/

Description:Twenty Fourteen Child Theme

Author: John Doe

Author URI: http://example.com

Template: twentyfourteen

Version:1.0.0

Tags: light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready

Text Domain:twenty-fourteen-child

*/

/* =Theme customization starts here

-------------------------------------------------------------- */

You can change each of these lines to suit your theme. The only required lines are the Theme Name, the Template.

The Template is the directory name of the parent theme. In this case, the parent theme is the Twenty Fourteen theme, so the Template is twentyfourteen, which is the name of the directory where the Twenty Fourteen theme resides. If you want to make a child of a theme with the directory name example-theme-name, then you would use Template: example-theme-name.

@import should not be used to import the parent stylesheet into the child theme. The correct method is to use wp_enqueue_style() to enqueue the parent stylesheet, using this code in your child theme's "functions.php".

You will need to create a functions.php in your child theme's root folder (This is the only two files needed to create a child theme). Right at the start, on the first line, you should add an opening php tag. All other code will follow after this opening php tag

<?php

add_action( 'wp_enqueue_scripts', 'enqueue_parent_theme_style' );

function enqueue_parent_theme_style() {

wp_enqueue_style( 'parent-style', get_template_directory_uri().'/style.css' );

}

Note: The child themes stylesheet is included after the parent theme's and styles will therefore override those in the parent themes stylesheet.

Activate the child theme: Log in to your sites dashboard, and go to Administration Panels > Appearance > Themes.

You will see your child theme listed there And Click Activate.

(If your wordpress is running in multi-site mode, you may need to switch to the network admin dashboard, then themes, then click network enable. Then you switch to regular admin dashboard and the above step to activate your child theme should be present)

Template Files

If you want to change more than just the stylesheet, your child theme can override any file in the parent theme: simply include a file of the same name in the child theme directory, and it will override the equivalent file in the parent theme directory when your site loads. For instance, if you want to change the PHP code for the site header, you can include a header.php in your child theme's directory, and that file will be used instead of the parent theme's header.php.

You can also include files in the child theme that are not included in the parent theme. For instance, you might want to create a more specific template than is found in your parent theme, such as a template for a specific page or category archive.

Using functions.php

Unlike style.css, the functions.php of a child theme does not override its counterpart from the parent. Instead, it is loaded in addition to the parents functions.php. (Specifically, it is loaded right before the parents file.)

In that way, the functions.php of a child theme provides a smart, trouble-free method of modifying the functionality of a parent theme.

The fastest way would be to open its functions.php file and put the function there. But thats not smart: The next time your theme is updated, your function will disappear.

But there is an alternative way which is the smart way: you can create a child theme, add a functions.php file in it, and add your function to that file.

The function will do the exact same job from there too, with the advantage that it will not be affected by future updates of the parent theme.

Do not copy the full content of functions.php of the parent theme into functions.php in the child theme.

The structure of functions.php is simple: An opening PHP tag at the top, and below it, your bits of PHP. In it you can put as many or as few functions as you wish.

The example below shows an elementary functions.php file that does one simple thing: Adds a favicon link to the head element of HTML pages.

<?php // Opening PHP tag - nothing should be before this, not even whitespace

// Custom Function to Include

function favicon_link() {

echo '<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico" />' . "\n";

}

add_action( 'wp_head', 'favicon_link' );

Tip For Theme Developers:

The fact that a child themes functions.php is loaded first means that you can make the user functions of your theme pluggable that is, replaceable by a child themeby declaring them conditionally. E.g:

if (! function_exists( 'theme_special_nav' ) ) {

function theme_special_nav() {

//Do something.

}

}

In That way, a child theme can replace a PHP function of the parent by simply declaring it beforehand.

Referencing / Including Files in Your Child Theme

When you need to include files that reside within your child theme's directory structure, you will use get_stylesheet_directory(). Because the parent template's style.css is replaced by your child theme's style.css, and your style.css resides in the root of your child theme's subdirectory, get_stylesheet_directory() points to your child theme's directory (not the parent theme's directory).

Here's an example, using require_once, that shows how you can use get_stylesheet_directory when referencing a file stored within your child theme's directory structure.

require_once( get_stylesheet_directory() . '/my_included_file.php' );

Other Useful Information

Using Post Formats

A child theme inherits post formats as defined by the parent theme. When creating child themes, be aware that usingadd_theme_support('post-formats') will override the formats defined by the parent theme, not add to it.

RTL support

To support RTL languages, add rtl.css file to your child theme, containing:

/*

Theme Name: Twenty Fourteen Child

Template: twentyfourteen

*/

rtl.css is only loaded by WordPress if is_rtl() returns true.

It's recommended to add the rtl.css file to your child theme even if the parent theme has no rtl.css file.

Internationalization

Child themes, much like other extensions, may be translated into other languages by using gettext functions. For an overview, please see Translating WordPress & I18n for WordPress Developers.

To Internationalize a Child Theme Follow These Steps:

  • Add a languages directory.
  • Something like my-theme/languages/.
  • Add language files.
  • Your filenames have to be he_IL.po & he_IL.mo (depending on your language), unlike plugin files which are domain-he_IL.xx.
  • Load a textdomain.
  • Use load_child_theme_textdomain() in functions.php during the after_setup_theme action.
  • The text domain defined in load_child_theme_textdomain() should be used to translate all strings in the child theme.
  • Use GetText functions to add i18n support for your strings.

Example: Text Domain

<?php

/**

* Setup My Child Theme's textdomain.

*

* Declare textdomain for this child theme.

* Translations can be filed in the /languages/ directory.

*/

function my_child_theme_setup() {

load_child_theme_textdomain( 'my-child-theme', get_stylesheet_directory() . '/languages' );

}

add_action( 'after_setup_theme', 'my_child_theme_setup' );

?>

Example: gettext functions

<?php

_e( 'Code is Poetry', 'my-child-theme' );

?>

To sum up, all strings that use "my-child-theme" textdomain will be translatable. The translation files must reside in "/languages/" directory.

Using wp_enqueue_style instead of @import

The Benefit of using wp_enqueue_style() over @import is that enqueued stylesheets are all referenced from the HTML output to the browser, whereas an @import statement is referenced from the main stylesheet, which is an extra step before the browser knows where to look next.

Additionally, @import suffers from performance issues, as all resources declared in each import statement are not loaded in parallel. There is also less control over the order in which browsers honor the @import statement, as some browsers (notably Internet Explorer) will load a given stylesheet in order of completion vs declaration.

This can result in undesirable results if the order in which you declare your stylesheets depends on the existence of styles preceding it.

In order to use wp_enqueue_style() effectively, both the parent and the child theme must call their respective enqueues in their respective functions.php.

The parent theme should then not include its stylesheet in any manual way.

To queue the parent stylesheet from its functions.php:

add_action( 'wp_enqueue_scripts', 'load_my_styles' );

function load_my_styles() {

wp_enqueue_style( 'parent-theme', get_template_directory_uri() . '/style.css' );

}

To queue the child stylesheet from its functions.php:

add_action( 'wp_enqueue_scripts', 'load_my_child_styles', 20 );

function load_my_child_styles() {

wp_enqueue_style( 'child-theme', get_stylesheet_uri() );

}

These identifiers are not meaningful in anyway other than that they get included in the HTML as ids. The text "-css" is added after these names.

Alternatively, if your parent theme does not use wp_enqueue_style() you can override its header.php, and do the enqueueing yourself. But you must enqueue both and in the right order, because your child CSS file must be last. Otherwise, it cannot override the parent CSS. However, your child functions.php will execute first. Therefore you must give it a lower priority (such as 20) than the default, so it gets executed last.

If you do both yourself, you can simply call them in the right order (first enqueue the style of the parent, then of the child).

Alternate Method Using Conditional Tag

This method also uses wp_enqueue_scripts and includes the is_child_theme conditional tag.

Place this PHP code in your parent theme's functions.php file:

<?php

add_action( 'wp_enqueue_scripts', 'my_enqueue_styles' );

function my_enqueue_styles() {

/* If using a child theme, auto-load the parent theme style. */

if ( is_child_theme() ) {

wp_enqueue_style( 'parent-style', trailingslashit( get_template_directory_uri() ) . 'style.css' );

}

/* Always load active theme's style.css. */

wp_enqueue_style( 'style', get_stylesheet_uri() );

}

You'll always need a style.css in any child theme.

/*

Theme Name: Twenty Twelve Child

Theme URI: http://example.com

Author: You

Author URI: http://example.com

Description: Child theme for Twenty Twelve

Version: 1.0

Text Domain: twentytwelve

Template: twentytwelve

*/

And if you want to do something more critical on your child theme please visit wordpress child theme codex

Related Posts

from my blog


Best Code Editor Solutions for Every Developer in 2021: The Ultimate Guide

August 20, 2021

Introduction: The life of a developer is no more than a roller coaster. They have to play codes with every single minute, which is not a handy thing. It requires...

The Ultimate Best Marketplace WordPress plugins in 2021

August 17, 2021

Using WordPress to build an online business has grown a lot easier over time. Well, owing to the availability of marketplace WordPress themes, setting up your multi-author online shop has...

What is a Version Control System? and Why You Need It

August 15, 2021

In an international firm, employees may have difficulty collaborating, keeping multiple versions of files, and backing up their data. All of these issues must be addressed in order for a...