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:
ClockworkWP has the privilege to “inherit” sites from other developers on a regular basis. Each…
I became slightly balder today because I pulled most of what was left out. I…