WP Grunt Child

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.

Configuration

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.*

JavaScript

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

• Font Awesome
• Fitvids.js
• jquery-match-height
• Modernizer

More Information

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