How to Create a WordPress Child Theme

WordPress is an open-source CMS for everyone.

Introduction

What’s up guy’s. It’s been a while since I last wrote anything on here but I’m back. I’ve been getting myself more familiar with building websites in WordPress and I wanted to share a short mini-tutorial with you. I’ll pen it “How to Create a WordPress Child Theme”.

Build a Website with WordPress?

Lately I have been getting a lot of clients that have been requesting their websites to be created using WordPress. And it’s no wonder. It is the most robust blogging platform out there. But WordPress isn’t just for blogs and bloggers. You can actually build an entire website using this (including a lot of big name websites like CNN and Mashable). Before I go any deeper, let’s all assume that you have never heard of WordPress before and start with the basics, okay?

What Is WordPress?

WordPress is a Content Management System or CMS for short. It’s open-source so it’s free. WordPress comes in two flavors – the hosted version (www.wordpress.com) and the self-hosted (www.wordpress.org) version. For this post, I’m going to discuss how to use the self-hosted version. FYI…if you are building a site for a client, I have found it best to develop using a local server such as XAMPP and migrating the completed site once you and the client are ready.

WordPress.com vs. WordPress.org comparison chart

This info graphic lists the pros and cons of the different flavors of WordPress. http://www.wpbeginner.com/beginners-guide/why-is-wordpress-free-what-are-the-costs-what-is-the-catch/

How Does It Work?

The technology for WordPress uses PHP allowing the author to dynamically update content. This is wonderful news if your site is 100+ pages (imagine the horror of updating 100+ pages with a new page in the navigation menu). But even if your site or the site you are building is just 5 pages, this is still a life-saver.

I Need a Website Built Today!

Once you or your client knows that he/she needs a website and would like it to be built on the WordPress engine, it’s now time to decide if this will be a completely original design or will you be starting from a template. There are several bare-bones templates out there that should get your developer up and running in no time flat. You can use a blank template such as the Bones Theme or one of the many templates found at the wordpress.org website.

Under no circumstances should you ever edit the original files within a theme.

Why Should I Use a Child Theme?

If you will be building a site in WordPress with a pre-built theme and you plan on doing anything custom, you better use a child theme. A child theme is a theme that inherits the functionality of the parent (core) theme. Under no circumstances should you ever edit the original files within a theme. This is the reason why the child is important. If that theme is ever update, you could potentially run the chance that all of your changes will be lost forever. Another scenario could be if WordPress releases an update and all of the changes that you made within the CSS (Cascading Style Sheet) of the original/parent could potentially be lost. This is why you create a child theme. The child theme will be served after the parent theme and any changes will be overridden. The child theme takes precedence over the parent theme.

What files are candidates for a child theme? The core WordPress files that most people begin with are the style.css, function.php, header.php and index.php files. For starters, I will discuss the style.css file for this post.

Explain To Me How To Create A WordPress Child Theme.

I’m going to give you guys a quick tutorial on how to build a child theme.

Make sure you have a good text editor and fire it up. My favorite is Sublime Text 3. I would also recommend Notepad++.
Download your theme or create a new theme from scratch (I will discuss this in a future post).
Create a new folder on your desktop and name it. I will call this twentyfourteen-child (child themes are often appended using -child, but you are free to name this whatever you please).
Create a new file in your text editor and save it as style.css This file will live in the child theme folder.
Paste this at the top of the file…

/* 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 */
@import url("../twentyfourteen/style.css");

/* =Theme customization starts here
————————————————————– */

Save the file again.

From here on, now you should be safe to edit the file safely! Just use the built-in web developer tools in Chrome or use Firebug if your on Firefox to locate the changes that you want to make.

In Conclusion…

There you have it! Creating a child theme is a pretty important and very necessary step in the design process. As I said before, if you don’t child theme you site, you risk loosing any custom changes that you’ve made if and when the theme updates.