Sometimes, you come to a point with a WordPress website where you just want something new and different to better fit the design needs of your site. The way to do that in WordPress is by building a child theme.
The reason you need a child theme is that updates may cause changes to be overwritten. That means that the theme will go back to default and all your work may be lost. In order to prevent that, you build a child theme.
Getting started with WordPress child themes
For this tutorial, we are creating a child theme for the WordPress Twenty Thirteen theme that came with the 3.6 update to WordPress.
Below you will find a step-by-step process to create a WordPress Child theme.
Step 1: Navigate to your themes folder
To begin, we will access your WordPress files through your host with an FTP program. You can use anything, but I like FileZilla.
Your web host should have clear instructions on how to get into your WordPress install. When you have the FTP program setup, begin by navigating to a folder by the name of wp-content. Inside this folder, you should see another folder by the name of “themes”. Inside of this folder, you should see another folder that says “twentythirteen”.
Step 2. Creating the folder
Create a new empty folder, and name it “twentythirteen-child”.
Step 3. Creating the style.css
Open your empty “twentythirteen-child”, create a file, and name it style.css. For the next part, you do need a text editor. After you have opened the style.css in your text editor, you will need to copy this for the child theme to work:
/*
Theme Name: My Twenty Thirteen Child Theme
Theme URI: http: //yoursite.com/
Description: This is my first Twenty Thirteen Child theme!
Author: Your Name
Author URI: http: //yoursite.com/
Template: twentythirteen
Version: 0.1
*/You do not have to add the theme URI, but you must add the “Template:” part and add the name of the original theme you are trying to edit (In this case, twentythirteen). You will see this in your WordPress Dashboard under appearances and in “Themes”.
Step 4. Styling your child theme
At this point, your WordPress child theme has no style and no color, so we are going to get the original styling from the Twenty Thirteen theme so you have a canvas to work on. In your style.css, under */, add this line of code:
@import url("../twentythirteen/style.css");Make sure to save all of the work after you have that code in.
Step 5. Finishing up
One of the final things to do is to activate the theme. Go to the WordPress dashboard, go to appearences and under that should be theme. Go to the theme (whatever you named it) and hit activate.
After you activate, you can go to your website and check out the styling you have.
You can then play with the CSS in the theme and try different things to get different colors and designs. Also, if you want to try some different functions in this child theme. Copy the php files from the original theme that you need, or create new ones based off of the other files but with your own awesome php.
Any WordPress themes can be turned into WordPress child themes. Test out different things and play around with what you know. Remember that in the next update, none of your hard work will be lost.
Have you built a WordPress child theme? What tips would you share? Let us know in the comments.
Some Final Words
Thanks you for following along with this tutorial, as you can tell, child themes are an awesome way to make custom sites. As I said before, do your research in the original style.css and create different designs based on how you want your WordPress Powered website to look like. What website do you want to create a WordPress child theme?
