How To Create A Child Theme For The WordPress Twenty Fourteen Theme

Help us spread the knowledge:

WordPress released what is probably their best default theme to date with their last major release. Twenty Fourteent is a fantastic magazine theme that is going to be of great use for a number of people.

Of course it’s far from perfect and when applying it to one of my sites I wanted to add some css and function tweaks. Luckily WordPress allows you to create a child theme that will use a parent as a template. You can then make tweaks to the child theme and still apply any updates that WordPress creates to the parent.

In this walkthrough video we create a child theme for Twenty Fourteen and below i’ll give you written instructions and a download of the theme so you can use it on your projects.

Simple instructions

1. Create a folder in your site’s “wp-content/themes” folder.

2. Create a folder (without spaces) for your child theme. For example name it “twentyfourteen-CHILD”.

3. Create two new files; “style.css” and “functions.php”. Create one folder named “images”.

4. Add the following code to the “style.css” file


/*
 Theme Name: Twenty Fourteen Child
 Theme URI: http://blogbolts.com/
 Description: Twenty Fourteen Child Theme
 Author: Forest Parks
 Author URI: http://blogbolts.com
 Template: twentyfourteen
 Version: 1.0.0
*/

@import url("../twentyfourteen/style.css");

/* =Theme customization starts here
-------------------------------------------------------------- */

5. Add the following code to the “functions.php” file

<?php //Opening PHP tag</pre>
// Custom Function to Include

?>

6. Go to wp-admin > Appearence > Themes and activate your child theme.

OR, skip these steps and download the .zip file. Simply upload and activate it through your wordpress dashboard

Right click and save the file below.

twentyfourteen-CHILD.zip

I hope that was helpful and if you have any questions, comments or suggestions to make this post better please leave a comment below.

Help us spread the knowledge:

Comments

  1. Steve Goldberg says

    John,

    This has been very helpful – question though.

    There is nothing in the style.css beyond what the WP codex code says.

    What I am interested in is some of the style.css code you mentioned in the video – like full width screen etc. I don’t want to tread upon I.P. regarding your code – but would you feel comfortable sharing some of that with me?

    I am just beginning my WP journey and any advice that you have would be great.

    Appreciated.

  2. Frits says

    Nice child theme, I especially like the fact you enlarged the text fields of the theme (why so much padding in the original 2014 theme?) and added a logo in the header.

    I have some questions though:

    In you tutorial you speak of 2 files and 1 folder:

    functions.php
    style.css
    images (folder)

    In the downloadable package, however I also find this file:

    .DS_Store

    and a folder:

    __MACOSX

    My questions:
    1. What is this .DS_Store file and what does it do?
    2. Do I need the _MACOSX folder or is that for people using a Mac?

    That last folder contains this file:

    ._twentyfourteen-CHILD

    And this folder:

    twentyfourteen-CHILD

    Which contains these files:

    ._.DS_Store
    ._functions.php
    ._images
    ._style.css

    I hope you can find the time to answer my questions.

    Thanks

Leave a Reply

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

Just testing you are human! *