Adding new themes to Magento 2 without changing core files

Creating a new theme for Magento 2 can be a challenge even if you have a lot of experience with Magento. For example, our developers here at Vortex would not change core Magento files, but create ‘wrappers’ instead, so in the future when you install patches and updates, you will not find yourself in the situation where all of your changes override previous changes or merge incorrectly. 

Extend Gruntfile.js and themes.js files

Let’s say you created a new theme and as we know from documentation Magento 2 docs you will need to change file dev/tools/grunt/configs/themes.js adding your theme in to the list, so Grunt could compile/symlink/copy css/less files in to pub/static folder.

Step1: Create /dev/tools/grunt/configs/themes.yourthemename.js file which extends default themes.js file as

'use strict';

var defaultThemes   = require('./themes'),
    _               = require('underscore');

var yourTheme = {
    yourthemename: {
        area: 'frontend',
        name: '<vendor>/<yourthemename>',
        locale: 'en_US',
        files: [
            'css/main',
        ],
        dsl: 'less'
    }
};

module.exports = _.extend(defaultThemes, yourTheme);

Step2: Extend Gruntfile.js with file Gruntfile.yourthemename.js

'use strict';

var defaultGruntfile    = require('./Gruntfile'),
    _                   = require('underscore');

var yourthemeGruntfile = {};
    yourthemeGruntfile.themes = require('./dev/tools/grunt/configs/themes.yourthemename');

module.exports = _.extend(defaultGruntfile, yourthemeGruntfile);

Step3: Now you can run Grunt tasks for your theme like:

grunt --gruntfile=Gruntfile.yourthemename.js clean:yourthemename
grunt --gruntfile=Gruntfile.yourthemename.js exec:yourthemename
grunt --gruntfile=Gruntfile.yourthemename.js less:yourthemename
grunt --gruntfile=Gruntfile.yourthemename.js watch:yourthemename

LATEST POSTS

How to Have Your Best Black Friday as an eCommerce RetailerHow to Have Your Best Black Friday as an...

1 week ago READ

Life at Vortex: Drew’s First WeekLife at Vortex: Drew’s First Week

3 weeks ago READ

GDPR is Coming…Is Your Business Ready?GDPR is Coming…Is Your Business Ready?

1 month ago READ
all posts