Getting started with theming in Magento 2 – Part 2

Written by - Published on

Part 2 of my ‘Getting Started with Theming Magento 2 Guide’ is finally here. I hope those of you who read the first part followed along and didn’t get stuck along the way. This second part finishes up the tutorial nicely and gives you enough information to get you on your way.

This tutorial carries on from the end of part 1, the last step having just activated the new theme you’ve created. The topics we’re going to look at are:

  • Styling
  • Editing Template files
  • Layout Changes

Styling

So the first thing we’re going to look at is styling, predominantly actually editing the CSS or LESS in this instance. As you’re probably aware by now, Magento 2 is built using LESS so this is what we’re going to use to start editing the website theme. I have heard rumours and rumblings that you can swap out the pre-processor from LESS to SASS, but that’s a topic for another day.

Before we begin styling the website, you should know that there are 3 different methods to style the website, which are:

  1. Server-side compilation
    • Make changes to LESS and then delete files in /pub/static/frontend and /var/view_preprocessed/less – refresh website to see changes.
  2. Server-side compilation using Grunt
    • Install and run Grunt in your theme, make changes and view in your browser.
  3. Client-side compilation
    • Change Workflow type in admin, delete files in /pub/static/frontend and /var/view_preprocessed/less – refresh website to see changes.

For the purposes of this demo, I’m using the Client-side compilation but the final outcome is the same in all 3. The only thing that differs slightly is how to reach the end result. I have tested all 3 methods and they all work well so I may re-visit this at a later date and talk about the other 2 methods.

To start with, I’ve un-commented a line in my .htaccess file which is right at the top of the file which is:

SetEnv MAGE_MODE developer

In the Magento admin, I’ve changed the LESS compilation mode to client-side under Stores > Configuration > Advanced > Developer > Front-end development workflow > Workflow type.

In this mode, you don’t need to have Grunt running to compile your CSS, when you refresh the browser Magento takes care of it all for you. I don’t notice a delay in loading as the time it would take Grunt to compile is about the same as it takes the browser to refresh.

Now we’re ready to make changes to our LESS files and watch the frontend change. In the following directory, you can add a _theme.less file which we can start adding styles to:

  • ~/app/design/frontend/<Vendor_Name>/<Theme>
    • /web
      • /css
        • /source
          • /_theme.less

In this file, you can add your theme specific styles, save the file and then reload your browser. With Client-side compilation on, you’ll notice that when the browser first loads there are no styles – this is because Magento is compiling the LESS. Give it a few seconds and you’ll see the styles kick-in, hopefully with your custom styles.

It’s not just the _theme.less file you can add, you can obviously add the files you want and include them to be compiled. I’d recommend taking a look at the Luna theme so you can get an idea of how others have done this. There’s also this really interesting article on the developer docs which explains the Magento UI library and how to utilise this in your theme.

Editing Template Files

The good news is, overriding template files in your theme is pretty much as easy as it is in Magento 1. You can use the ‘Template Path Hints’ feature in Magento to track down which templates are being used on the frontend.

In your newly created theme, let’s say that you want to edit the header search form. Firstly, we need to know which file this uses so we can find that in one of two ways:

  1. You can dive into app/code/Magento and try to figure it out
  2. Turn on ‘Template Path Hints’ and find it that way

In the case of the mini search form in the header, I know it used the file in this location:

  • app/code/Magento/Search/view/frontend/templates/form.mini.phtml

So to be able to edit this, I need to copy it over to my theme. First of all, I want to create the module within my theme for the file to sit. I’m going to create a Magento_Search folder within my theme – this corresponds to the folder path of the file above.

I’m then going to create a ‘templates’ folder inside of that and in it, copy the form.mini.phtml file.

I can now edit this file, leaving the core template intact and changes are only applied to my theme.

Layout Changes

Layout is the territory of XML. Hopefully you’re familiar with Magento 1 and it’s XML. Although Magento 2 doesn’t have the exact same XML usage, if you know XML in Magento 1 then it’ll make Magento 2 easier to grasp.

All the information you need is on this developer docs guide, which I’d definitely recommend you reading. For me, the best way to learn is by doing – so take a look at another theme and start playing around with the XML.

We’ll look into more detail in another blog post where we’ll cover adding a jQuery library to your theme and also how to move blocks using XML. Magento 2 uses RequireJS so I’d recommend having a little read up on that before hand if you get a chance.

Further Reading

This short theming series just scratches the surface of the power of Magento 2. I’d encourage you to read the developer docs and other resources which the community have been publishing. There’s some great resources out there already, some of which I’ve linked to below.