The topic is believed to be of a great importance, as it is dedicated to a currently central theme “How to create a theme for Magento 2.”. At the time of writing the recent version is 2.1.7. If we compare the first version with the second one, the latter is considered as the most up-to-date and upgraded. As for theme development, modular code structure has been implemented. Now all static files such as js, CSS, and images located in web folder while skin folder has been removed from Magento home directory. (more…)
At the first stage we create folders for our new theme. We call it my_theme. Then we add a new folder with the name of our new theme.
/app/design/frontend/default/my_theme/ – our new theme
/app/design/frontend/default/my_theme/layout – assign content blocks for each structural block you create.
Layout is available as XML text file. Changing it, you can move blocks around the page and assign templates to content blocks for structural blocks markup creation.
In fact, you can change the visual layout of every page in your store with the help of several separate layout files. The basic layout is defined in page.xml, which is located in /app/design/frontend/base/default/layout/page.xml.
• Each file, used to wrap the basic template view, is placed in the template/page (1column.phtml 2columns-left.phtml 2columns-right.phtml 3columns.phtml one-column.phtml).
• It is the basic framework of our pages in HTML files. Editing these files, we can adjust a new look of the page structure.
• template/page consists of html subfolders, in which the footer, the header and the reference blocks of our template can be changed.
• Each of them uses a simple function calls, for example, getChildHtml (), so we can also define the search block in XML-files.
• Images (/skin/frontend/default/my_theme/images/)
• CSS (/skin/frontend/default/my_theme/css/)
• JS (/skin/frontend/default/my_theme/js/)
Upon creating new files in our theme, consider the following factors:
1. Avoid overlapping of layout file names with layout files in the main theme.
2. Avoid overlapping of css file names with css files in the default cover.
3. No .phtml file templates, except those which are modified to support your new theme.
It is important to remember! Before changing .Phtml file, it must be copied from base (or default) themes to a new theme. When Magento detects one of the files in a new theme, it will ignore .phtml file from a base (or default) theme. Copy only those files that will be changed. It minimizes the number of errors during Magento upgrade.
The new theme is created, and we need to apply this theme to our website/store. Go to Magento admin panel.
• Transfer to System -> Configuration -> Design in the top navigation bar
• Enter my_theme in the text “Default” field
• Press the “Save config” button in the upper right corner
Disable Magento cache to see the changes!