Automating WordPress Theme Development

Automating Theme Development Process
@HardeepAsrani

I’m Hardeep Asrani
➤ Pirate at ThemeIsle.com
➤ WordPress Plugin/Theme Developer
➤ Part of WordPress Theme Review & Support Team
➤ Part of Kanpur FOSS Community
And I’m Wapuu Saa!

Why Automate?
What can it do for me?

➤ Faster and error-free development
➤ More time to focus on development and logic
➤ More time == More money
➤ Cool lagta hai

All the Repetitive Tasks:
➤ Compile SASS, LESS, Stylus, etc.
➤ JSHint/ESLint
➤ Concatenate and Minify Assets
(CSS & JS)
➤ Compress Images
➤ Code Sniﬃng
➤ Visual Regression
➤ Generate Pro/Lite versions from
the same theme
➤ And more…

# Update Advanced Package Tool
$ apt-get update
# Install cURL, if not installed
$ apt-get install curl
# Download nodejs Package
$ curl -sL https://deb.nodesource.com/setup_6.x | bash -
# Install nodejs
$ apt-get install -y nodejs
# Initialize Project
$ npm init

Nesting
.footer {
    text-align: center;
    background: #343434;
}
.footer .icons {
    color: #000000;
    float: left;
}
.footer {
    text-align: center;
    background: #343434;
    &.icons {
        color: #000000;
        float: left;
    }
}

Mixins
.btn-blue {
    color: #3FA2F7;
    width: 100px;
    height: 50px;
    text-align: center;
    text-transform: uppercase;
    font-weight: bold;
}
.btn-black {
    color: #000;
    width: 100px;
    height: 50px;
    text-align: center;
    font-weight: bold;
}
@mixin button {
    width: 100px;
    height: 50px;
    text-align: center;
    font-weight: bold;
}
.btn-blue {
    color: #3FA2F7;
    @include button;
}
.btn-black {
    color: #000;
    @include button;
}

And more, like functions and extend.

Installing SASS
# Install Ruby
$ apt-get install ruby-full
# Install SASS
$ gem install sass
# Check SASS Version
$ sass -v
# Compile SASS
$ sass --watch input.scss output.css

# Install Grunt
$ npm install grunt
# Install Grunt CLI
$ npm install -g grunt-cli
# Install SASS Grunt Task
$ npm install grunt-contrib-sass --save-dev

module.exports = function(grunt) {

    grunt.initConfig({
        sass: {
            dist: {
                files: {
                    'main.css': 'main.scss',
                }
            },
        }
    });

    grunt.loadNpmTasks('grunt-contrib-sass');
    grunt.registerTask('default', [’sass’]);

};
Gruntfile.js

JSHint/ESLint
# Install JSHint
$ npm install grunt-contrib-jshint --save-dev
Write error free JavaScript.


    grunt.initConfig({
        jshint: {
            files: ['Gruntfile.js', 'assets/js/*.js'],
            options: {
                globals: {
                    jQuery: true
                },
                ignores: ['assets/library/*.min.js']
            },
        }
    });

    grunt.loadNpmTasks('grunt-contrib-jshint');
    grunt.registerTask('default', [‘jshint’]);

};
Gruntfile.js

# Install Babel & Babel Grunt Task
$ npm install --save-dev grunt-babel babel-core babel-preset-env
Use next generation JavaScript, today.


    grunt.initConfig({
        babel: {
            options: {
                sourceMap: true,
                presets: ['env']
            },
            dist: {
                files: {
                    'dist/script.js': 'src/script.js'
                }
            }
        }
    });
    grunt.loadNpmTasks('grunt-babel');
    grunt.registerTask('default', 'babel');

};
Gruntfile.js

➤ PHP Code Sniffer: https://github.com/squizlabs/PHP_CodeSniffer
➤ PHP Code Sniffer Grunt Task: https://github.com/SaschaGalley/grunt-phpcs
➤ WordPress PHPCS Standards: https://github.com/WordPress-Coding-Standards/
WordPress-Coding-Standards
➤ PHPUnit: https://github.com/SaschaGalley/grunt-phpunit
➤ PHP Code Beautifier and Fixer: https://github.com/mducharme/grunt-phpcbf
➤ PHP Lint: https://github.com/jgable/grunt-phplint

Make Your CSS Work on all Browsers
# Install PostCSS
$ npm install grunt-postcss --save-dev
# Install WP-CSS
$ npm install grunt-wp-css —save-dev
➤ Add vendor preﬁxes to CSS rules using values from Can I Use.
➤ Enforce consistent conventions and avoid errors in your stylesheets with stylelint.
➤ Write stylesheet according to WordPress CSS coding standards.

Compress Images + Minify CSS/JS
Speed-up your WordPress Theme
# Minify images using imagemin
$ npm install --save-dev grunt-contrib-imagemin
# Minify JS with Uglify
$ npm install grunt-contrib-uglify —save-dev
# Minify CSS
$ npm install grunt-contrib-cssmin —save-dev

And the most boring important task…

Generate Translation (POT) File
Make your theme translatable.
# Check your code for missing or incorrect text-domain in gettext functions
$ npm install grunt-checktextdomain --save-dev
# Geenrate POT File
$ npm install grunt-wp-i18n --save-dev

All these tasks with one command.

Our Grunt Workflow
https://github.com/Codeinwp/grunt-theme-fleet/

Tired of making different Lite/Pro versions?

PHP 5.6 HHVM
PHP 7.1 PHP 5.3
PHP 7.0 PHP 5.2

Overview
➤ Find tasks that can be automated.
➤ Setup a grunt/gulp task to automate it.
➤ Build your workﬂow.
➤ Reuse it.

Resources
➤ nodejs: https://nodejs.org/en/
➤ npm: https://www.npmjs.com/
➤ Grunt: https://gruntjs.com/
➤ Sass: http://sass-lang.com/
➤ Babel: http://babeljs.io/
➤ Grunt Tasks: https://gruntjs.com/plugins
➤ Travis CI: http://travis-ci.com/

Thank you
➤ Twitter: @HardeepAsrani
➤ Github: https://github.com/HardeepAsrani/
➤ Website: http://www.hardeepasrani.com/
You’re welcome.

Automating WordPress Theme Development

More Related Content

What's hot

Similar to Automating WordPress Theme Development

Recently uploaded

Automating WordPress Theme Development