June meetup – The one with the child theme

I’m a bit late in getting this blog post out, but we had a great meeting at the start of the month talking about “How to create a child theme”. We did have a slight hiccup of the room not being ready, but I guess this is one of the learning curves of starting a meetup!!

We started off with some open networking and met with the new visitors within the room. It was great to see that we had been found through the WordPress dashboard. For those that haven’t seen, when you log into your WordPress site, you are greeted with a dashboard widget that shows the latest WordPress News, but also importantly for us, a list of local Meetups. This means that if you are a local user of WordPress in Coventry you will probably see our “WordPress Coventry Meetup” and the “WordPress Birmingham (UK)“, as well as the next Wordcamp that is happening within the UK or Europe.

Anyway, enough about the meetup, let’s get onto the talks. First up was me with:

Why you need a Child Theme and how to create one?

On every site I build I use a child theme as even if I don’t have the need for one at the start of the project, it puts the site in the right place if the project changes in the future. There are a lot of settings that WordPress saves with the database that are specific for each theme. If you switch themes, WordPress will try to make it’s best guess to keep everything in the right place, but there is the opportunity for things to go askew. If you start with a Child Theme you’re on the right footing 👍

What is a child theme?

WordPress has been created in a really useful way that you can stand on the shoulders of giants, meaning that you can use the majority of files from a “parent” theme, then override the files that you want to within a “child” theme.

When you look at the files that make up a theme, you will notice that there are a lot of php files that run through various loops to output the html that your web browser understands as a webpage. For instance in a really simplified version, your parent theme may run through:

  • header.php – Maybe this show’s your logo top left and then pull in nav.php top right
  • nav.php – Creates a holder for your menu structure
  • page.php – This will the content your create with the WordPress Dashboard.
  • footer.php – This could, for example, show some widgets and a copyright strap line.

Now, if we construct our child theme correctly, we can use the coding in all of these files, but if we add a footer.php file we can override just that one with our own code.

Theme Updates?

Now, we could just make the changes that we wanted to the file in the parent theme. However when a theme update becomes available, once we download it to our site, it will override our changes. This is where a child theme comes into it’s own. It allows us to keep up theme upto date with the latest security and functionality updates, but with our personal twist, as the files in our child theme will never be overwritten.

How do I create a child theme?

Personally, every time to go to create a child theme I Google the code I need. Now I know I could keep a copy of this locally, but this was I know I am always getting the latest standards. The font of all knowledge used to be the Codex but this has recently moved over to developer.wordpress.org and the Child Theme page can be found here: https://developer.wordpress.org/themes/advanced-topics/child-themes/

The developer overview says to create a folder within your WordPress install, but I prefer to work offline, then create a zip file to upload. So to get started create yourself a working folder, I normally go with the scheme PROJECT/Theme/themename as we will need to compress the “themename” folder to upload.

Now that we have our working folder, we need to create three files:

  • style.css – This is the file the WordPress reads to understand your theme
  • functions.php – This will allow you to add custom code to your site
  • screenshot.png – Which will show a visual representation of your theme.

Creating style.css

 Theme Name:   WP Coventry
 Theme URI:    https://www.wpcoventry.co.uk/
 Description:  A custom child theme built for the WP Coventry community
 Author:       Neil Batchelor
 Author URI:   https://encode.host
 Template:     generatepress
 Version:      1.0.0
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 Tags:         Hero Image, 
 Text Domain:  twentyfifteenchild

You will need the above head information for WordPress to read and understand what your theme is trying to do. There are only two required fields: Theme Name and Template. But I do recommend doing a proper job and filling out the rest.

  • Theme Name: This needs to be unique for your theme and from any other themes in the repository
  • Theme URI: This is a link to a specific page for the theme (If one exists)
  • Description: A space to describe what the theme will do
  • Author: Your Name!
  • Author URI: A link to your website
  • Template: This is the name of the parent theme folder
  • Version: The latest version number for your theme
  • License: The licence that your theme is released under. Be conscious of the licence of the parent theme and any restriction that may be place on you.
  • License URI: A link to the licence that your theme is released under.
  • Tags: Any tags to add to describe the attributes of your theme
  • Text Domain: This is used if you would like to internationalise your theme.

Creating functions.php

The second file that you will need is functions.php which will allow you to add custom code to your theme, but for our purpose we will be using it to pull in the parent style.css so that our theme works correctly. This is called enqueuing your stylesheet. You will need to open up your functions.php file and add:

add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
function my_theme_enqueue_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );

This tells your child theme to look within the parent theme folder with “get_template_directory_uri” then add the style.css file.

Creating screenshot.png

The last step is to create your screenshot that will be show in the dashboard when viewing the theme overview page. The current recommended ( https://codex.wordpress.org/Theme_Development#Screenshot ) dimensions for this are 1200 x 900 px and the file will need to be called screenshot.png

An easy way for you to create this may be to just copy the one from your parent theme. Alternatively you can use a graphics program like GNU Image Manipulation Program (GIMP) which is a cross-platform image editor to create one of your own.

Finishing up

For the final part of the demo, I copied the footer.php from our parent theme and removed a link to show how we can easily override the parts of the code that we want to change without having to write the whole theme from scratch.

If you were at the Meetup, firstly I hope you found the talk informative and this write up helpful. Or, if you missed this one but would like to join us, feel free to pop along one month. We’re a friendly bunch!

Finally, what are your thoughts on using a child theme? Is this something your already do? Or maybe planning for your next project? Let us know in the comments below.

Featured image by Luca Bravo on Unsplash / Cover image by Ilya Pavlov on Unsplash

Leave a comment