/wd_s

WebDevStudios fork of Automattic's _s. Used as our theme boilerplate.

Primary LanguageCSS

Stories in Ready

wd_s

This is WebDevStudios fork of Automattic's _s. wd_s is used as a theme boilerplate for new projects. It contains modern build tools to help developers spin up a bare bones theme quickly. To get started, see the instructions below. As always, your pull requests are welcome!

Features

Pre-Installation

Basic knowledge of the command line and the following dependencies are required to use wd_s:

Installation

  1. Download and extract the zip into your project's wp-content/themes directory and rename wd_s-master to fit your needs.

  2. From the command line, change directories to your new theme directory

cd /your-project/wordpress/wp-content/themes/your-theme
  1. Find & Replace

You'll need to change all instances of the names: _s. While this can be a tedious chore, editors like SublimeText can do a global "find & replace" allowing you to do this in under 60 seconds.

  • Search for: '_s' and replace with: 'project-name' (inside single quotations) to capture the text domain
  • Search for: _s_ and replace with: project-name_ to capture all the function names
  • Search for: Text Domain: _s and replace with: Text Domain: project-name in style.css
  • Search for (and include the leading space):  _s and replace with:  Project Name (with a space before it) to capture DocBlocks
  • Search for: _s- and replace with: project-name- to capture prefixed handles
  • Search for _s.pot and replace with: project-name.pot to capture translation files
  • Search for _s.com and replace with: project-name.dev to match your local development URL
  • Edit the theme information in the header of style.scss to meet your needs
  1. Install Node dependencies
npm install

Install and Gulp

You are now ready to use wd_s!

Gulp Tasks

From the command line, type any of the following Grunt tasks to perform an action:

gulp watch - Automatically handle changes to CSS, JS, SVGs, and image sprites. Also kicks off BrowserSync.

gulp icons - Minify, concatenate, and clean SVG icons.

gulp i18n - Scan the theme and create a POT file

gulp sass:lint - Run Sass against WordPress code standards

gulp scripts - Concatenate and minify javascript files

gulp sprites - Generate an image sprite and the associated Sass (sprite.png)

gulp styles - Compile, prefix, combine media queries, and minify CSS files

gulp - Runs the following tasks at the same time: i18n, icons, scripts, styles, sprites

What about Grunt?

We're currently making the transition from Grunt to Gulp. For the time being will continue to support both. If you'd prefer to use Grunt:

  • Delete package.json
  • Rename package.json-grunt to package.json
  • Type npm install

See Gruntfile.js for a list of tasks.

Contributing and Support

Your contributions and support tickets are welcome. Please see our guidelines before submitting a pull request.