Contact Us

WP Grunt Child

Child theme template with Grunt

We rarely work on WordPress themes that are not custom but when we do, we use Grunt. Why shouldn't we get the same benefits of using a task runner with compiled SASS and JS when using a child theme? WP Grunt Child is a WordPress child theme that can be used with any theme parent.

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)
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:

More Information

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

ABOUT

No Comments Yet

Leave a Reply

Your email address will not be published. Required fields are marked *

We would love to hear from you!

Please fill out this form and we will get in touch with you shortly.