WP Grunt Child

by Aaron Reimann

March 6, 2017

I found it frustrating that I had to write regular CSS and JS when working on extending a pre-built theme. So I have modified our Grunt config and integrated our SASS and JS build process into a template that can be used in any child theme. Check it out here: WP Grunt Child.

To use the theme, clone or download the source code into your theme directory and update the parent theme settings accordingly.


First update the style.css to the parent theme we are wanting to use. We can update the following lines to match whatever we would like, however, the Template line must reference the parent theme. In the repository we are using twentyseventeen as our parent theme. For example:

  • Theme Name: change this to reflect our child theme
  • Template: change this to the name or slug of the parent theme
  • Text Domain: change this to reflect our child theme name (lowercase with no spaces)
 Theme Name:   Twenty Seventeen Child
 Theme URI:    https://github.com/sideways8interactive/wp-grunt-child
 Description:  Child theme template with grunt for compiling SCSS and JS.
 Author:       Sideways8 Interactive, LLC
 Author URI:   https://sideways8.com
 Template:     twentyseventeen
 Version:      1.0.0
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 Text Domain:  twentyseventeen-child

Next we need to update the functions.php file. We should only need to update three variables:

  • $parent_style: This is style name for the parent theme
  • $child_style: This is style name for the child theme
  • $google_fonts_url: The URL that contains the Google fonts we want to include. Will not be enqueued if left empty.

*Note: For easier debugging you can set the SCRIPT_DEBUG global to true and it will load the non-minified JS and CSS.*



We have included four JS packages that get a lot of use in our development process:

More Information

All of this information, including more detailed install and usage instructions, can be found in our README on the Github page.

related posts

Have a WordPress Expert Look at Your Site

ClockworkWP has the privilege to “inherit” sites from other developers on a regular basis. Each…

man holding head

DNS, Mailgun, and I’m Losing My Mind

I became slightly balder today because I pulled most of what was left out. I…

Three Articles For GoDaddy

Writing articles on my personal blog and Sideways8’s blog has always been fun. I’ve been…