Easy As Blue Box

I had been looking around for a good Gulp 4 starter to work with, and while there are some great posts out there covering the transition from 3 to 4, I hadn’t found something to just get the essentials rolling immediately.

So I took my previous Gulp 3 starter and went through the hoops of updating it to Gulp 4. Mostly it was changing the way functions were declared and called in gulpfile.js, the error rollercoaster didn’t run too long, I’ve landed at this iteration:

WordPress Gulp 4 Starter

What The Hell Is Gulp?

If you are unclear about what Gulp is, this article can serve as a practical example in the wild. The simple answer of “why” is that it makes development run faster by automating several parts of the process. The “what” is a more complicated question, I will leave it to vastly smarter brains to explain it in detail.

For the true layperson, Gulp is a JavaScript based system for optimizing and streamlining many parts of software development. It’s one solution in an ecosystem of answers to make our lives easier.

Get Rolling With It

Full details are at the GitHub page, but the installation is pretty simple.

1. 1. Grab a copy of the repo. The root of the structure can be the root of your new project OR you can move the /gulp-wp folder into your project’s /wp-content folder.
2. 2. Change the theme info in /src/scss/style.scss to make it your own. Similarly follow instructions in /gulpfile.js to personalize the project.
3. 3. In the /gulp-wp folder, first run npm i to grab dependencies. Then run gulp build to cook out a copy of the fileset — this will be in your /wp-content/themes folder with the values you entered, it can be activated in your WordPress dashboard.
4. 4. Finally, run gulp from the /gulp-wp directory (or whatever you renamed it to), this triggers the watcher and pops up a dev instance in your browser. It will have a name like like localhost:3000 or similar.

BAM! You are in business. Let’s see what we’re starting with.

Absolute Bare Bones Basic

On the WordPress side, the output of this basic set is the zero minimum for a functional theme: index.php, functions.php, style.css; The functions and style files are broken down into child files for easier development, but the only layout file is the index.php. If you need a more complete theme (posts, archive, front-page, etc) then you should probably check out some other options.

minimum

On the Gulp side, everything is set up to cook from the ./wp-content/ folder of your WordPress structure. The processor functions cook the CSS, the PHP, the JS and any IMG files in the src/img folder, functions to sanitize and serve the content, a watcher call (for making edits) and a build call (to get shiny shiny fileset). The processor tasks can also be called directly from the terminal, can be very handy for troubleshooting tricky errors.

This fileset can be used in different ways; The starter root can serve as the root of a new WordPress build, just dump a WP fileset (without the ./wp-content/ folder) into the root folder. To add to an existing theme, just delete the contents of the src folder and replace with your existing theme, then change the appropriate resource paths in the gulpfile.

This can also be added to an existing WordPress build, place the gulp-wp folder into your site’s ./wp-content/ folder. It will output correctly into its sibling themes folder.

PHP Goodies

Even though the theme is intentionally layout light, we have a good set of tools for PHP that you might want to hang onto even if incorporating this with another theme. We have global vars set up for commonly used urls (like the image directory or the theme url). We have our upload directory set to “media”, comment out / delete line 11 of src/functions/globals.php.

We have utilities for converting a string to a slug, and stripping all of the non-numeric characters from a string (for instance, if you have a phone number you want to sanitize for a link). And we have a few starter shortcodes in place to handle some dynamic content duties (show current year / site url).

CSS Goodies

We also have several helpers in place in the SCSS structure, including the Meyer CSS reset (easily swapped or nuxed), media queries for detecting width, height or a hover-capable device, a basic set of screen sizes baked in.

The only actual front end style we have defined is a simple a tag styling that only shows activity on click, included as an homage to the :active pseudo-element, which I have sadly neglected in my career.

Salud

You are free to use this in whatever capacity you wish, I would only ask that if you keep the overall structure intact, please keep the credit intact as well.

If you see any room for improvement, feel free to comment or submit a PR at GitHub.