Interactive Bash script for managing themes in Magento 2

bash

Do you remember, how many times you did something that was time consuming and/or required certain amount of steps to achieve your goal? After some time you had to repeat the whole process… And again… And again… I am pretty sure you came to an idea, “Wouldn’t it be really useful if I can somehow simplify the process?” Yes, you are correct, the same question troubled me when trying to figure out how the make my life easier when creating a custom theme. Unlike Magento 1, Magento 2 has a different (and more complex) way of setting up themes, so I started developing a Bash script that will make my life easier. Hopefully, yours as well.

I think it will be very easy to follow this tutorial on how to use the script.

Step 1: download the zip or clone it from Github repository into root of your Magento 2 project:

git clone git@github.com:dvrgoc/magento2-theme-manager.git

Step 2: open terminal from the root of your Magento 2 project and run this command to start the script:

bash magento2-theme-manager.sh

 Now that the script is running, you are prompted to enter one of the following numbers:

bash-0

Option 1: Create a new theme

Once selected, user will be prompted to type in the following:

  1. Vendor name,
  2. Theme name,
  3. Theme title (will be visible in Admin area),
  4. Local setting,
  5. Users password in order to set the owner and group of the created files (in my case on OS X, owner will be set to ‘danijelvrgoc’ and group to ‘staff’).

bash-1-1

The script will also generate a small LESS file (inchoo.less) that is going to be compiled into CSS file in the process of deployment of static files. Here is the content of it:

@inchoo-green: #79AD36;
body {
    background-color: @inchoo-green !important;
}

The next step is to open Grunts theme.js file and paste the following code (yes, the comma character as well):

bash-1-2

At this moment, open Admin Dashboard and make sure your theme is visible under Content -> Themes.

bash-1-3

With this taken care of, it is safe to run the following commands to make your theme compileable by Grunt and deployable by Magento:

grunt clean
grunt exec:ParentTheme
php bin/magento cache:clean
php bin/magento setup:static-content:deploy

 Here is an output of ‘grunt exec’ command:

bash-1-4

and of deployment of static content:

bash-1-5

After the deployment, the compiled inchoo.css file can be found in app/design/frontend/YourVendor/YourTheme/YourLocale/css folder:

body{background-color: #79ad36 !important}

 

Option 2: Create a child theme

In order to create a child theme, user has to enter valid MySql credentials in order for the script to read all available themes.

bash-2-1

User will be prompted to enter number of the theme that will become parent theme to your theme. In my case, I entered number 24, after which the process of creating a theme is same as creating a new theme.

bash-2-2

 

Option 3: Delete a theme

Just like when creating a child theme, user has to enter valid MySql credentials, script will connect to database and list all of the registered themes. It is possible to delete only child themes, otherwise you will get an error.

bash-3-1

That’s it, I hope this article helped you understand which steps you have to make to make your theme ready for deployment and that you will start using this script on your very next project.

If you need any extra help, don’t hesitate to drop us a comment or send an inquiry.


About Danijel Vrgoc

Frontend Developer

Danijel is a Frontend Developer who is in charge of breathing in life into design. Besides the world of web development, he loves american football, barbecue and a good stand up comedy.

Read more posts by Danijel / Visit Danijel's profile

7 comments

  1. Hey Danijel! Great tool thank you for sharing, I’ve tested it right now and it works perfectly.
    Congrats for your first post and for this great tool!

  2. Thanks for this tool and documentation!

    I am have trouble deploying my theme. setup:static-content:deploy finishes before it get to my theme most times and when it does get there, it quite with this message….

    === frontend -> netstatus/toughlove -> en_US === <br/>
    Unable to load theme by specified key: 'netstatus/toughlove'>

    further; Can you tell me if i need to setup:static-content:deploy everytime I want to see changes on the frontend.

    1. Hi, Omar,

      I was able to recreate your error message, all you need to do is login to Magento Admin and make sure your theme is visible in Content -> Themes. By doing this, Magento will insert row in table “theme” and Grunt will now be able to deploy your theme.

      The deployment of static files in your theme should be done only if your Magento 2 installation has “Production” mode enabled, that is, only when you have pushed your theme modifications onto live site. Have a look at the official documentation about static view files, you can find a lot of useful information about this topic.

  3. You just gave me an idea. 🙂 I’ll make something similar for Ionic Framework so when creating a new project I do not have to repeat the whole process of adding platforms (Android, iOS), extensions (ngCordova), plugins, etc.

Leave a Reply

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

You may use these HTML tags and attributes: <a href="" title=""> <blockquote cite=""> <code> <del datetime=""> <em> <s> <strike> <strong>. You may use following syntax for source code: <pre><code>$current = "Inchoo";</code></pre>.