How to Create a Child Theme in WordPress? | Gutenberg WordPress

CodeLedge
3 min readOct 15, 2019

--

Imagine modifying your WordPress Theme for hours, aligning things, changing color scheme, making featured images bigger… later after some weeks you see there is an update for your theme. You hit that Update Theme button and BAM, you site’s a soup. Everything is messed up.

If WordPress is your first choice, it’s important to allow parent theme to be updated without affecting your website look and functionality. Creating a child theme is the easiest way of modifying your WordPress Theme.

Your child theme holds all custom changes you have made in your WordPress Theme, so updating its parent theme should be pretty secure.

Don’t know how to create a WoordPress child theme? Here is the guide for you.

How to Create a WordPress Child Theme

If you are looking forward to give it a try by yourself, there are two methods you can create child theme and both methods are very simple. One is by using Plugins that automatically create the child theme for you and other is to do it manually.

Create WordPress Child Theme by using Plugins

Here are some of the best Plugins I have sorted for creating child theme. You can it easily in WordPress repository:

The method where you plugins is appropriate, but you don’t get all control. It is suitable for beginners and businesses who don’t want to spend most of the time with child theme and customization.

Create Child Themes Manually

If you have decide to create a child theme manually, just follow the steps below.

  1. Create a directory in your wp-content/themes/ folder to hold the Child theme. Don’t use space while naming your Child theme folder.
  2. In child theme directory, create a file named style.css. This is the only file required to create a child theme.

Here is an example of Holi — Twenty Thirteen’s Multi Colored Child theme. Style sheet starts with the following lines:

@import url("../twentythirteen/style.css");/
*Theme Name: Holi
Theme URI: http://thematosoup.com/products/twenty-thirteen-multi-colored/
Description: Multicolor child theme for the Twenty Thirteen theme
Author: ThematoSoup
Author URI: http://thematosoup.com
Template: twentythirteen
Tags: blue, gray, green, yellow, pink, purple, red, brown, orange, tan, white, yellow, light, one-column, two-columns, right-sidebar, flexible-width, custom-header, custom-menu, editor-style, featured-images, microformats, post-formats, rtl-language-support, sticky-post, translation-ready
Version: 1.0.4
This theme and all bundled resources, like WordPress, are licensed under the GPL.Use it to make something cool, have fun, and share what you've learned with others.Header/BG Images License
Author: Slobodan Manic ​http://thematosoup.com
License: GPLv2*/

You can change the lines according to your fit. There are only two mandatory lines, theme name and template, which is directory names of parent theme.

If you don’t import parent’s theme style sheet (style.css). You will erase the identity completely.

You can activate your child theme in Appearance > Themes.

How to use more files in Child Theme

Want to change just more than visuals? Just copy the file you want to edit in your Child theme. So, you can take header.php from the parent to child and edit it there.

For further assistance on how to edit theme files, function.php and other stuff that developers need, have a look at WordPress Codex on Child Theming.

So, the biggest benefit of using child theme is that updating the parent theme don’t affect the website. You can use child theme whenever you want to make your WordPress website more secure, easier to maintain and extend.

If you are still not sure, how to create the child theme, feel free to ask us help. We at CodeLedge are a team of well experienced WordPress developers, always ready to help and offer the best possible solution for your website.

Don’t waste your time by asking just yourself “How do i create a Child theme in WordPress?”, Ask WordPress Experts for the solution. Ask us here.

--

--

CodeLedge
CodeLedge

Written by CodeLedge

Web Development & Design Studio

No responses yet