WordPress: Creating a child theme

I’m going to try to be a good WP citizen today. Instead of just hacking the new theme (Roots) I just installed, I am going to create a child theme.

Roots seems to want to discourage users from creating a child theme:

There is a tradeoff however. One of the philosophies behind Roots is to be clean and simple which is why we rewrite URLs in the form of /wp-content/themes/roots/ to /css/js, etc. Unfortunately, this doesn’t work with child themes.

I haven’t run into too many issues though. I created a “Proteus” folder to hold the child theme’s files, then I copied the empty style.css file from the Roots theme. As advertised on the WordPress Codex site, the style.css file is the bare minimum needed to create a theme.

Roots also discourages importing the parent style.css file because it hurts performance. I’m going to follow their advice for now because Roots’ style.css file is empty anyway.

In my early efforts to create the theme, I have borrowed a few other files from the Roots parent theme:

  1. front-page.php: I needed this one to create the home page carousel. I copied in the code I created in earlier effort to create the carousel.
  2. functions.php: I needed this file to call in the custom post types I created earlier. That’s all I put in this file. The parent version of the file will still be called (after the child version).
  3. main.js, vendor/bootstrap-carousel.js: Needed these for the front page carousel.
  4. inc/scripts.php: Needed this to call in the two JS files above.

When I created inc/scripts.php, I unwittingly lost everything in Roots’ version of inc/scripts.php. I tried a bunch of different things to include the contents of the parent theme until finally this snippet was the ticket:

if (!defined('__DIR__')) { define('__DIR__', dirname(__FILE__)); }
include __DIR__ . "/../../roots/inc/scripts.php";

I set up a Sass directory in the child theme, then wrote some code in my new inc/scripts.php file to point to the resulting CSS files. All good.

Leave a Reply