How to create, install and use a WordPress child theme

In this WordPress tutorial video, I respond to the following question on how to create, install and use a WordPress child theme:

Can you please explain child themes in the simplest terms possible? Also it would be really awesome to demonstrate buying a theme from themeforest, creating the child theme in a WordpPress installation, and going through a theme update process without disrupting child customizations. Take it from theme purchase through theme update. This demo is greatly needed in the beginner WP developer community. Thanks.

Ok so I set to work on a step-by-step answer to this request. I omitted the buying of a ThemeForest theme part and used the default Twenty Eleven theme instead. However, the tutorial can be applied to any WordPress theme, free or premium.

There are 3 main parts to this tutorial: part one looks at what a WordPress child theme is and why you might use one. Part two looks at how to create a child theme using a basic style.css file. Part 3 explains how to use the child theme and how to deal with parent theme updates.

Below is the basic code required for the style.css file:

[wpsm_codebox style=”2″]
/*
Theme Name: Twentyeleven Child
Description: Child theme for the twentyeleven theme 
Author: Your name here
Template: twentyeleven
*/
@import url("../twentyeleven/style.css");
[/wpsm_codebox]

And as promised in the video, here are some recommended open source FTP clients and Text Editors for use in modifying your child themes:

Filezilla is one of the most popular Open Source FTP solutions available and it works on Mac, Windows and Linux. It is reliable software with a user-friendly interface. Highly recommendable.

Cyberduck is an open source SFTP (SSH Secure File Transfer) and FTP browser built from the ground up with usability in mind, with a friendly graphic interface. This is for Mac only.

elRTE is a WYSIWYG HTML editor for Web written using jQuery. It features rich text editing, options for changing its appearance and style, insertion and management of HTML elements with formatting, viewing and editing HTML code.

jEdit is a programmer’s text editor written in Java. It uses the Swing toolkit for the GUI and can be configured as a rather powerful IDE through the use of its plugin architecture.

Notepad++ is a source code editor and Notepad replacement, which supports several programming languages and runs under the MS Windows environment. Its features include syntax highlighting, WYSIWYG, auto-completion, multi document/view and more.

I hope this is of some use. If you have further tips or ideas on this topic, I’d be grateful if you could let me know in the comments below. Thanks.

Written by Will Ellington

Originally from the UK, I currently live in Osaka, Japan, where I work in higher education. I’ve been a WordPress user since 2004 and have developed numerous projects with it over the years. Wpliving is a place to share things i've learnt along the way, and to explore innovations in WordPress too.

Leave a Reply

6 Comments on "How to create, install and use a WordPress child theme"

avatar

Sort by:   newest | oldest | most voted
Chris
Guest
Chris
4 years 8 months ago

Wow. Fantastic Tutorial!

Thanks so much for creating this!

Rudi Ardiansyah
Guest
4 years 4 months ago

this is my problem for couldn’t change the theme, I didn’t edit the css with the text editor, thank you.

Patrik Stedt
Guest
3 years 4 months ago
Hi Will thanks for a great tutorial. I have used wp for a couple of websites but never bothered with the child theme. Makes a lot of sense to use it. Making a new website now and did the whole process exactly like you did but for some reason the “customize” section within the theme now looks completely different, as if it had lost its structure. I am using the Oxygen theme and seen that several people are using a child theme but for some reason it just does not look right. I tried both with just the short css… Read more »
Jeremy
Guest
Jeremy
3 years 2 months ago

Thank you!

GPA
Guest
2 years 9 months ago
Hi! Thank you for sharing this. I am wondering if I understand this correctly. So I have a few questions just to be sure. First, for my existing sites, I could follow all of these same steps IF and WHEN a theme update becomes available by kind of doing this in reverse order, no? Say I already have my site running with a theme I bought. If an update comes out, I can copy my current modified style.css over to a new child theme and THEN do the update to the parent? Also, one more question. Even though the parent… Read more »
wpDiscuz