Need help with wordpress-gulp-starter-kit?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

xsynaptic
674 Stars 139 Forks 109 Commits 11 Opened issues

Description

[NOT MAINTAINED] A starter kit for developing WordPress themes with Gulp.

Services available

!
?

Need anything else?

Contributors list

# 56,535
PHP
Gulp
wordpre...
wordpre...
73 commits
# 254,500
PHP
Gulp
wordpre...
wordpre...
3 commits
# 251,322
CSS
Gulp
wordpre...
wordpre...
2 commits
# 163,225
elm
Racket
Gulp
wordpre...
1 commit
# 352,806
PHP
Gulp
wordpre...
wordpre...
1 commit
# 92,720
healthc...
Django
Gulp
wordpre...
1 commit

A WORDPRESS/GULP STARTER KIT

Designing WordPress themes the old-fashioned way is time-consuming and error-prone. Automating the build process allows us to integrate best practices into our workflow while saving time. This project is a starter kit for developing highly optimized WordPress themes with Gulp, npm, and Sass, among other tools. This is not meant to be a starter theme or framework (although I have included a minimum viable theme to demonstrate some of the possibilities). It is, instead, a kind of project scaffolding and example workflow for modern and efficient WordPress theme development.

The latest version of this starter kit features a modular Gulp file design inspired by Dan Tello's excellent gulp-starter. Configuration is isolated from the tasks themselves to make it easier to change paths and modify settings. This approach is slightly more complicated than what I originally outlined on my blog but also far more powerful. Live local development is now facilitated by your choice of BrowserSync or LiveReload (the default choice).

Why use this project instead of any of the alternatives? A few advantages:

  • It doesn't try and do too much.
  • You should be able to easily drop your own theme into the
    src
    folder and start hacking without much additional setup.
  • Documentation and comments in the code assume a novice level of understanding.
  • Builds on existing WordPress and Gulp best practices without doing anything too crazy.
  • Includes several JS and Sass integrations to show you some of the possibilities. All of these are easily removed.
  • This kind of workflow will save you a ton of time and help you make better, more readily-optimized themes once you learn how it all works.

INSTALLATION

If you're already up and running with most of the usual Node ecosystem tools this starter kit won't require much additional effort.

REQUIRED

  • Install npm.
  • Install Gulp:
    npm install -g gulp
    .
  • Install JSHint:
    npm install -g jshint
    . (You can skip this and cut JSHint out of the workflow but it will take some additional work.)
  • Download or clone this repo:
    git clone https://github.com/synapticism/wordpress-gulp-starter-kit.git
    .

OPTIONAL

  • Install Bower:
    npm install bower -g
    (helps manage front-end dependencies, particularly CSS libraries and such; see below for more info).
  • Install Composer (a PHP package manager, not really necessary).
  • Install Sass (only if the built-in, default
    libsass
    compiler isn't good enough for your needs):
    gem install sass
    (requires Ruby).

SETUP

  • Edit
    gulpconfig.js
    and, at the very least, change the
    project
    variable to match the name of your theme. If you like the way this workflow is setup you shouldn't need to edit any of the files under
    gulpfile.js/tasks
    just yet.
  • Install all dependencies by running
    npm install
    . This will fetch all dependencies listed in
    package.json
    (which includes front-end JavaScript packages and back-end tools like Gulp plugins and BrowserSync). You may see warnings about deprecated packages and what-not; that's probably fine, just keep going!
  • BrowserSync setup: assuming you have a local development environment setup all you should need to do is enter the URL into the
    proxy
    setting in
    gulpconfig.js
    . Why use BrowserSync? It's fast, awesome, and allows for simultaneous responsive development across multiple devices.
  • LiveReload setup: install a browser extension for Chrome or Firefox. Why use LiveReload? It does the job without complications or additional setup after the extension is installed.
  • This build process assumes you're up and running with source maps for both JavaScript and Sass. You may need to configure your browser or debugging environment to make sense of the minified files generated by Gulp!
  • Run
    gulp
    and start hacking!

VOIDX: A MINIMUM VIABLE THEME

Previously this project shipped without a working theme included. I figured that with all the great starter themes out there (for instance, _s, Roots, and Bones) it wouldn't be hard to drop one in and start theming. I don't personally use any of these so I was a little surprised to discover how tricky this can be. Starter themes, despite their "bare bones" reputation, are often bulky and opinionated. Some even ship with their own build processes already in place!

It seems there is a need for what I'd call a minimum viable theme: a truly bare bones WordPress starter theme featuring only the essentials to get up and running, something that you can assess at a glance. For the purposes of this project I have created such a theme, tentatively named

voidx
. It isn't pretty and isn't up to WordPress standards but it works well enough to show off some of the power of this workflow. Feel free to play with or discard it as you wish. All files under
src
can be replaced by your own files, you just have to be sure to wire things up properly in the
gulpconfig.js
file if you swap in your own stuff. Several scripts have already been integrated to show you how it's done, but these are easily if you don't like 'em (which is sort of the point of having such scaffolding, so you can easily swap stuff in and out).

There are two components worth a closer look:

  • The script variable and enqueuing functions in
    src/inc/assets.php
    ; these are tightly coupled with the output of the build process.
  • The theme configuration pattern described in
    functions.php
    and
    functions-config-defaults.php
    .

Whether you use anything from this built-in theme is entirely up to you. If you prefer to start working with your own theme just drop it in. You will probably need to modify paths and glob matching patterns in

gulpconfig.js
but it is designed to be fairly easy and straight-forward with lots of comments to point you in the right direction.

ORGANIZATION

This starter kit uses

src
,
build
, and
dist
folders to organize theme development:
  • src
    : this directory contains the raw material for your theme: templates (
    src/
    ), PHP includes (
    src/inc
    ), language files (
    src/languages
    ), styles (
    src/scss
    ), scripts (
    src/js
    ), and images (anywhere under
    src/
    ). Only edit files in this directory!
  • build
    : generated by Gulp, this is a working copy of your theme for use in development and testing. Symlink
    build
    to your
    wp-content/themes
    directory for local development and testing (e.g. if your theme is in
    ~/dev/themes/my-theme
    and your local copy of WordPress is installed in
    ~/dev/localhost/wp
    you'll want to run
    ln -s ~/dev/themes/my-theme/build ~/dev/localhost/wp/wp-content/themes/my-theme
    ).
  • dist
    : short for distribution, this will be the final, polished copy of your theme for production. You will need to manually run
    gulp dist
    to create a new distribution. You can also symlink this directory for a final round of testing; just keep in mind that your theme will now be in
    dist/[project]
    , where
    [project]
    is the setting at the top of the Gulp configuration. This project folder is what you will want to deploy to production. (No more weird junk in your themes. Hooray!)

Note: both the

build
and
dist
directories are disposable and can be regenerated from the contents of
src
. You aren't likely to want to edit files in this folders but you may want to open them up to diagnose issues with the build process itself.

WORKING WITH GULP

Gulp is an extremely powerful tool for automating tasks from the command line. If you're new to Gulp but coming from a WordPress background I recommend reading tutorials by Matt Banks and Mark Goodyear. I also learned a lot from a post by Dan Trello (and have integrated much of his approach into this project) but it might be a bit more opaque for newcomers.

To get started try running

gulp
from the command line. This fires
gulpfile.js/index.js
and should build a working copy of the included theme. The other command you will use from time to time is
gulp dist
, which builds a distribution copy.

Configuration is handled by a single file:

gulpconfig.js
. If you leave the directory structure intact there won't be too much that needs changing here but I can think of two non-obvious components you might want to modify or at least look at:
  • BrowserSync settings: if you are developing on a local web server you will want to enter the URL into
    browsersync.proxy
    and then change
    watch.watcher
    to
    browsersync
    to take it for a test drive. You'll know it's working when you run
    gulp
    and a new browser opens with a live copy of your web site. Make changes to any of the Sass files and they should be shown on the page almost immediately. Of course, BrowserSync really shines when you connect a mobile device to your development server, but for that you're on your own ;)
  • Script settings: draw your attention to
    scripts.bundles
    and
    scripts.chunks
    . This feature is essentially a poor man's Browserify or Webpack. By defining different "chunks" (script files that combine to provide a particular feature) and "bundles" (chunks that combine to provide feature sets) you can generate an assortment of files that can be efficiently and intelligently loaded through your WordPress theme. This approach has its limitations, of course, particularly when dependencies are shared between scripts, but it should be of use to many WordPress theme developers.

Interested in adding new Gulp plugins to your build system? A full tutorial is out of scope for this project but it really shouldn't be all that hard to figure out. In brief, install a plugin with

npm install [package] --save-dev
, require it in a suitable task file, add something to the configuration file if needed, and drop it into the pipeline somewhere. Some types of plugin are particularly easy to add, for instance anything listed on the postcss.parts web site once you have gulp-postcss installed and configured in
/gulpfile.js/tasks/styles.js
.

WORKING WITH NPM

npm is great for working with packages of all kinds (front-end or back-end) and is increasingly becoming the package manager of choice. Previously this starter kit emphasized the use of Bower to retrieve and manage front-end dependencies but nowadays my personal preference is to use npm, mostly because it's way easier to update dependencies than Bower using tools like npm-check-updates.

  • Find new packages with
    npm search [package]
    .
  • Install new packages with:
    npm install [package] --save-dev
    .
  • A general rule-of-thumb: if you can find it there just use npm.

WORKING WITH BOWER

A few handy tips from the Bower documentation:

  • Search for packages with
    bower search [package]
    or browse the Bower web interface.
  • Install new packages with:
    bower install [package] --save-dev
    .
  • Remove packages by deleting a line from
    bower.json
    and then run
    bower prune
    .
  • Clean the cache with
    bower cache clean
    (occasionally needed when things start getting weird).

WORKING WITH SASS

  • This project now supports either gulp-sass (based on the newer and faster libsass, now active by default) or gulp-ruby-sass (which requires the original Ruby implementation of Sass). Switch
    styles.compiler
    in the configuration file as needed! For reference: Sass compatibility table.
  • Sass files can be found in
    /src/scss
    . Gulp will not process Sass partials beginning with
    _
    ; these need to be explicitly imported (see
    style.scss
    for an example). On the other hand, if you want to output any other CSS files just drop the underscore e.g.
    editor-style.scss
    .
  • Stylesheets are post-processed with cssnano, a PostCSS plugin with Autoprefixer baked in, eliminating the need for vendor prefixes.
  • Sourcemaps are generated by gulp-sourcemaps to make debugging stylesheets a snap. Note: all generated CSS is production-ready (e.g. minified and prefixed); sourcemaps only appear in the
    build
    directory.
  • Packages installed with Bower or npm are in the path by default so you can
    @import
    Sass files directly, as seen in
    style.scss
    .
  • This starter kit ships with Normalize.css and Scut, a minimalist library of useful Sass mixins and functions for the post-vendor prefixing era. Both of these are easy to remove if you're not interested in them.

A FEW OTHER NOTES

Images

Images are copied from wherever they are in

src
to the same location under
build
. They are only optimized when running
gulp dist
as this operation is resource-intensive.

PHP

Like images, PHP (and language) files can go anywhere under

src
and will be copied to
build
and
dist
while preserving directory structure.

EXAMPLE INTEGRATIONS

The bare bones theme included in this starter kit integrates three external JavaScript projects: timeago (which facilitates human-readable timestamps), SVG for Everybody, and WP AJAX Page Loader (a lightweight and intelligent infinite scroll script). Have a look at

/src/inc/assets.php
file and
gulpconfig.js
to see how this works. Timeago requires only
npm install -d timeago
, an extra line in
gulpconfig.js
, and initialization in
/src/js/footer.js
. SVG for Everybody is provided as an example of a script that must be loaded in the header; hence you can see it in action at
/src/js/header.js
. The page loading script is a more involved integraton; browse the source and see for yourself.

Now for one that you can try yourself! Let's say you run across a cool project like Headroom.js and decide you'd like to try it out. Here's how you would do that with the tools and workflow outlined in this repo:

  • npm install headroom.js --save-dev
    . This will save the package to the
    devDependencies
    field of your
    package.json
    file.
  • Look up the path to the script and add the appropriate entries to
    scripts.bundles
    and
    scripts.chunks
    in
    gulpconfig.js
    . The key name of
    scripts.bundles
    should match
    $script_name
    (below). Since this script is meant to be loaded on every page it is safe to bundle it with the
    footer
    script.
  • To make this script optional requires a bit more work:
    • Add an option to
      functions-config-defaults.php
      :
      defined( 'VOIDX_SCRIPTS_HEADROOM' ) || define( 'VOIDX_SCRIPTS_HEADROOM', true );
      .
    • Add the switch to the
      voidx_assets_footer
      functon in
      inc/assets.php
      :
      if ( VOIDX_SCRIPTS_HEADROOM ) : $file .= '-hr';
      .
    • Add an option to
      scss/_config.scss
      to allow for the styling to be turned on or off:
      $plugin-headroom: true;
      .
    • Add the necessary styling to
      scss/_plugins.scss
      wrapped in a conditional check:
      @if ($plugin-headroom) { // Style }
      .
    • Create an additional script at
      src/js/headroom.js
      to invoke the main script:
// Invoke Headroom.js; the outer function is is an IIFE, the inner one is a shortcut to document.ready
;(function($){
  $(function(){
    $("#wrap-header").headroom({ offset: 60 });
  });
}(jQuery));

That's all there is to it. Now this script can be switched on or off in two configuration files. WordPress will automatically load the correct script bundle for all JavaScript-based functionality (rather than loading lots of little scripts for each feature).

TROUBLESHOOTING

Things can and will go wrong when working with new tools but there are a few simple things you can do to avoid the worst of it:

  • Make sure everything is up to date, particularly this package, npm, node, Bower, etc.
  • If you're getting weird errors you can't figure out try deleting
    node_modules
    and running
    npm install
    .
  • You might also have some luck cleaning the cache for both npm and Bower, both of which respond to the
    clean cache
    command, or try
    npm prune && npm install
    .

TO DO

Feature requests and bug reports welcome; open an issue! Please note that I intend to reign in scope creep on this project :)

SEE ALSO

Like the approach but prefer something more mature, sophisticated, and opinionated? Check out Sage and Bedrock from Roots. Interested in another more stripped-down approach? Have a look at gulp-wp-theme.

CREDITS

The initial version of this repo featured a

gulpfile.js
adapted from Matt Banks. Additional credit is due to Mark Goodyear. The current version is largely based on Dan Tello's excellent gulp-starter. The theme templates included in this project ultimately descend from Twenty Twelve.

LICENSE

Licensed under the GPL 3.0. You are encouraged to link back to my web site, development blog, and/or this GitHub repository if you find this at all useful.

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.