Storefront is a robust and flexible free WordPress theme developed by the team behind WooCommerce. Out of the box, Storefront supports deep integration with WooCommerce, which makes it a perfect starting point for developers to launch their projects. Storefront’s codebase relies on WordPress hooks and filters to add, remove or change functionality which makes it a perfect candidate for customizations through a child theme.
At WebDevStudios, we decided to create a child theme for a recent client project. Customizing Storefront directly would make it impossible to upgrade for new features and bug fixes. Any changes would be overwritten during the upgrade process. By creating a child theme, we have the ability to upgrade the parent theme (Storefront) for access to new features and bug fixes.
Throughout the article, when I refer to parent theme, it’s Storefront.
A child theme is basically a blank WordPress theme—it becomes a child theme when you define the parent theme in the “Template” param in the header block of a child theme’s style.css file.
Notice how we have defined “storefront” in the template param of the style.css header block. The template param should equal the folder name of the parent theme. In this case, our parent theme’s folder name is storefront.
This flexibility of a blank WordPress theme allows us to set up this project similar to the starter theme that we use for all our internal projects.
The following folder structure is inspired by our starter theme wd_s. For this project, I have simplified the folder structure, especially the
sass folder, since we will be mainly using Storefront’s styles and doing little customizations to it.
We will be using Gulp setup from our starter theme
wd_s. Gulp will will perform the following tasks:
- Compiles Sass files into CSS (from
- Vendor prefixes CSS automatically
- Minifies JS files (from
- Compiles JS files from
- Minifies images inside
- Generates sprite file & Sass mixins automatically from images dropped in
- Compiles and minifies SVG icons dropped into
- Generates .pot file for il8n strings based on theme’s text-domain
- Automatically runs the build process on file changes
- Immediately preview changes in the browser using BrowserSync
To get started, install Gulp globally:
npm install -g gulp
package.json file in the root folder of your theme with the following contents: the
package.json file is used to define npm packages that are used by Gulp to execute the build process.
npm install to install all the packages defined in the package.json folder.
Make sure to add the
node_modules folder to the
.gitignore file. We don’t want to version control
Next, we need to define the Gulp tasks and how to run each of them. Create a
gulpfile.js file in the root folder of the child theme:
_son line 292, 293 and 295 with your theme’s text-domain. This will be used to generate the il8n pot file.
- To setup BrowserSync, edit
_s.teston line 361 with your local development URL. Access BrowserSync by adding port 3000 to the end of the development URL.
After the above setup is complete:
gulp watch in the terminal will continuously look for changes in the PHP files and files in the
assets directory. Any changes that you make to those files will not require a browser refresh on the development URL. Gulp will live stream the changes to the development URL with the help of BrowserSync.
During the development process, it is highly recommended to run
PHP Coding Standards
For PHP code, we use our own set of coding standards extended from WordPress Coding Standards. PHPCS is the tool used to run against these rules. You can configure your editor to run through these rules.
gulp lint. You can configure your editor to run ESLint tests, which is recommended and makes it easy to see errors and warnings as you write code.
We use Sass to write all CSS. Like ESLint, the rules are defined in a
sass-lint file and will be tested against whenever you run
gulp lint. Just like ESLint, you can configure your editor to run sass-lint which is recommended and makes it easy to see errors and warnings as you write code.
This ends a quick rundown on how we set up Storefront for our client projects. Having build tools and coding standards added to our projects help us write clean and maintainable code. How do you setup your Storefront projects?