,

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.

What do you think?

0 points
Upvote Downvote

Total votes: 0

Upvotes: 0

Upvotes percentage: 0.000000%

Downvotes: 0

Downvotes percentage: 0.000000%

6 Comments

Leave a Reply
  1. 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 code you added in your tutorial, changing names and details of course, as well as copying the original css code from the oxygen theme but the result is the same. From what I understood everything should “stay the same” unless I made changes, which I still have not done. Do you have any idea why this is happening? Thanks again for a great tutorial. Perhaps I am just missing some stupid detail, who knows…

  2. 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 theme appears to be inactive, I need to keep it installed, right? I know the answer is yes, duh, but just clarifying my understanding. It appears to be a lame duck in the list of themes, but because of the instructions you showed us, it is drawing from it?

    I am currently looking at a theme that is advertised as a child theme to the Responsive theme, but it does not come with any instructions to install. Seems like as long as I have Responsive installed in my list of themes, and I activate the child, I am golden? Or would I still need to do a manual creation of a child theme folder? It is called Dine with Me. I guess I should look at the style.css file and see what it says, now that I know what to look for. Your tutorial was very thorough. Now to give it a shot!

    Thanks so much!

Leave a Reply

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

Brian Gardner and the art of consistent WordPress design

Theme Review: Eventor, a budget design solution for conferences and social events