10 June 2017

create a child theme

: : for WordPress : :


Child themes ... it's a thing ... use them!  There are a lot of great articles already out there that explain what a child theme is, why you should use them and how to set one up.  This article on Smashing Magazine By Nick Schäferhoff is my go-to: How To Create And Customize A WordPress Child Theme

NB: Under "When to Use a Child Theme" Nick says "So, should you always build a child theme ... ? No, it really depends." ... I disagree ... I think you should always use a child theme.

As great as Nick's article is though, I thought I'd give you a condensed, step by step process to simplify it even further, for next time.  I do suggest you read up on child themes first so you know what/why you're setting one up, and that article from Smashing Mag is a great place to start.

Once you've got your head around that, here's the cut-down version for quick reference (I'll use the same headings so you can refer back to the original article for more info at any time):

NB: I usually work with offline files, then load them via FTP to the webserver.  Nick has a great suggestion to zip the theme folder then install it like a normal theme via the WordPress Theme menu ... gold!

Set Up A Basic Child Theme

"... a child theme needs three things: its own folder, a style sheet and a functions.php file."

Create a Folder in wp-content/themes

  • It can be called anything, but no spaces - something like "twentyfifteen-child" will work, and so would "myawesomewebsite".

Create a Style Sheet

  • Create a new text file and call it "style.css" (you can use any text editor or you can be fancy and use Dreamweaver ... do not under any circumstances use Word!)
  • Paste the style sheet header as follows:
/*
 Theme Name:   Twenty Fifteen Child Theme
 Description:  A child theme of the Twenty Fifteen default WordPress theme
 Author:       Nick Schäferhoff
 Template:     twentyfifteen
 Version:      1.0.0
*/

Activate Child Theme

  • Skip this step for now!

Create functions.php

  • Same as the Style Sheet, just create a text file and call it "functions.php" (these files are of course created in the theme folder we created earlier "wp-content/themes/myawesomewebsite/functions.php"
  • Copy the following code into the file (yep, that's PHP ... don't worry, you don't need to fully understand PHP to get this going, trust me!):
<?php
//* Code goes here

Inherit Parent Styles

  •  DON'T use the @import method ... (this is the one thing I don't like about the article, this is the old way of doing things so in my humble opinion, why mention it at all?!)
  • DO use the wp_enqueue_style() method ... copy this code into your functions.php file (underneath the other bits we just pasted):
add_action( 'wp_enqueue_scripts', 'enqueue_parent_styles' );

function enqueue_parent_styles() {
   wp_enqueue_style( 'parent-style', get_template_directory_uri().'/style.css' );
}

Upload Theme

  • NB: This is a variation of Nick's "Activate Your Theme" step
  • Zip your Theme folder, eg, "myawesomewebsite"
  • Login to WordPress
  • Click on Themes
  • Click on Add New and upload your zip file
  • NB: The parent theme must already be installed
  • Activate your child theme
Congratulations you've created and installed your child theme ... easy right?!


Labels: ,