How to: Create a child theme for Twenty Fourteen

If you’ve created a child theme for any WordPress theme before, it’s very similar for Twenty Fourteen as well.

If you’re in hurry, download the Twenty Fourteen Child theme right away.

Download Twenty Fourteen Child Theme.

Download, unzip and upload it to your “/wp-content/themes/” folder.

However, if you got a min, please read through and create your own. It’s easy, really! 🙂

What is a child theme?

A WordPress theme that adds more functionality to the existing theme on your site. Read more on WordPress Codex.

Why create a child theme?

So that we can tweak the main theme without actually editing it. When there is an update to the main theme/ parent theme, the child theme will still hold your customizations.

Why not edit the main theme files?

Because the custom changes will be lost when the main theme is upgraded. In our case, as we are talking about Twenty Fourteen, the theme is relatively new and may see few updates as we go along. We don’t want to customize the site and tweak the look and feel or functionality every time there’s an update!

Creating your own child theme

It’s really easy and takes less than 10 minutes!

  1. You will need access to your website via either FTP or your hosting provider’s file manager application.
  2. Navigate to “/wp-content/themes/” directory.
  3. You should see twentyfourteen as a directory. This holds all your Twenty Fourteen theme files.
  4. Create a new directory at the same level, that will hold your child theme files. I recommend twentyfourteen-child as is normal practice.
  5. Inside this folder, you need to add the one and only file that is required to create a valid child theme – style.css.
  6. Add the following lines to the style.css file.
    /*
    Theme Name: Twenty Fourteen Child Theme
    Theme URI: http: //mysite.com/
    Description: This is a custom child theme I have created.
    Author: My Name
    Author URI: http: //mysite.com/
    Template: twentyfourteen
    Version: 0.1
    */
    
    @import url("../twentyfourteen/style.css");
  7. Obviously all the information above is generic and can be changed, except Template: twentyfourteen. This variable is required in order to tell your child theme which parent theme it is related to, and must hold the folder name of your active theme.
  8. Also, don’t change the name of the parent theme in @import url("../twentyfourteen/style.css");.
    This calls the parent theme’s CSS file within your child theme’s style.css file.
  9. Navigate to “Appearance > Themes” in your WordPress admin area and activate the child theme.

Any additions to your child theme’s style.css will have an effect upon your site. And as intended, any future update to the Twenty Fourteen theme will not affect your child theme’s style.css file.

I’ve created the folder and the basic style.css file if you want to use it.

Download Twenty Fourteen Child Theme.

Download, unzip and upload it to your “/wp-content/themes/” folder.

If you want to make a change to a specific PHP file in your parent theme, just make a copy of it, and paste that copy into your child theme’s directory. Any changes you make will go live.

However, when editing the PHP file, make sure that the directory structure in your child theme should match that of the parent theme’s. So if you decide to edit a PHP file in “/twentyfourteen/inc/widgets.php”, you should place it in ”/twentyfourteen-child/inc/widgets.php”.

Other useful links:

If you need any further help in this regard, ask me in the comments!

Add a comment