Environment Setup

When I did this theme I thought about my usual workflow… what I consider essential to speedup my development phase. I use gulp to post-process the sass, minify javascript and images, create the pot file for translations.
I hope this theme can be a good starting point for developers, theme hackers and for everyone who want a starter template to personalize freely.

To Customize the template just follow this instructions, you will first need to install NodeJS on your development machine or on your server, then install the packages needed for the development.

Install NodeJS

First you need to download and install NodeJS from the link below:


After this step, you can check if NodeJS and NPM were installed with the command:

node -v && npm -v

How use Gulp tasks

Into the theme folder with the command line type:

npm i -g gulp-cli && npm i

This command installs all the packages needed for development and Gulp will be ready to run tasks for you!

How customize this template?

If you have already installed nodejs, and npm you can run the gulp tasks and recompile the style as you prefer. This gives you al lot of possibilities than the customizer, but if you don’t want to lose changes with updates, you need create a child theme.
But wait, you’re lucky, I’ve already done it!


Yes but now? What i can do?

I have already written some useful Gulp tasks. To run them, go with the command line inside the theme/child theme folder, then type this commands:

gulp style
Runs (once) the Sass compile task on style.scss, the autoprefixer and then creates the sourcemap.

gulp scripts
Traspile es6 to javascript (if needed) then uglify (minify), concat (merge all files into one) and creates the sourcemap.

gulp optimizeThemeImg
Minify images (PNG, Jpeg, gif and SVG) from assets/src/img then copy to assets/dist/img folder. Automatically creates a copy of each file in webp format

gulp optimizeWPUploads
Minify images (PNG, Jpeg, gif and SVG) from /wp-content/uploads. Automatically creates a copy of each file in webp format

gulp zipRelease
Zip all theme files into /releases/$version, it can be useful if you want to “package” the theme for upload purpose.

gulp createPot
Parse all php files into theme folder and generates the pot files for WordPress translations.

gulp watch
You have to run this command during development, and this command will be your best friend 🙂 It runs a file watcher on sass, scripts, and images folders and when triggered run the needed gulp task. It uses the latest version of gulp which allows these tasks to run in parallel, in order to have very short compilation times.

gulp build
To finalize the theme… for first run clean and removes all development files. Then compile with a set of options suitable for publication (in watch task instead the compilation speed is privileged and also the css is not minified)

gulp buildRelease
Same as build task but furthermore removes some unwanted files (Thumbs.db, DS_Store, ...) and zip the template files

SASS Variables

Since i moved many variables to CSS Custom Properties there are few sass variables to set but If you want to personalize your template you must edit the variables scss file (wp-content/themes/modul-r/assets/src/scss/utils/vars.scss), I choose the sassy way instead of the customizer because it creates a faster site with a more compact code.

Here you will find everything you need to customize your template colors fonts sizes and much more! And don’t forget to run the gulp task “gulp style” to re-compile stylesheets.

// Color variables
$color__icons: #888888;

// Animations
$animations__lenght : .35s;

$base_unit: 8px;
$size__margin: $base_unit;
$size__padding: $base_unit * 8;

$size__padding-resp: $base_unit * 2.5;

$size__site-width: 1500px;
$size__side-padding: 300px;
$size__nav-line-height: 2.2;
$size__nav-responsive-line-height: 2.5;
$size__responsive-menu-max-width: 360px;

// Header resp
$head__responsive_breakpoint-width: 960px;

// Hamburger menu
$hamburger__size: 30px;
$hamburger__weight: 3px;

$scrollbar-border-radius: 2px;

$avatar_size: 64px;
$comments__avatar-size: 64px;

$button__height: 36px;

// Blockquote
$blockquote__icon-size: 60px;

If you use the child theme instead, a unique file will be created from the parent’s and the child’s style (so only the child style will be enqueued).

Post navigation

You might be interested in...

No comments yet, be the first!


Your email address will not be published. Required fields are marked *