Creating a custom theme in Magento 2 involves a process of registering your theme. In this post we will describe how to do it. All the awesome theme customizations are up to you.
When developing custom themes, tools like Luma Bridge can be incredibly useful for streamlining the integration between your theme and Magento’s default Luma functionalities, allowing for faster and more efficient customization.
Creating a new theme is similar to creating an extension in Magento 2.
First of all, let’s create a registration.php :
<?php /** * * Location app/design/frontend/Atwix/custom/registration.php * * @author Atwix Team * @copyright Copyright (c) 2016 Atwix (https://www.atwix.com/) * @package Atwix_Customtheme */ \Magento\Framework\Component\ComponentRegistrar::register( \Magento\Framework\Component\ComponentRegistrar::THEME, 'frontend/Atwix/custom', __DIR__ );
Next, we will need to add an app/design/frontend/Atwix/custom/composer.json :
{ "name": "atwix/theme-frontend-custom", "description": "N/A", "require": { "php": "~5.6.5|7.0.2|7.0.4|~7.0.6", "magento/framework": "100.1.*" }, "type": "magento2-theme", "version": "100.1.1", "license": [ "OSL-3.0", "AFL-3.0" ], "autoload": { "files": [ "registration.php" ] } }
Instead of the module.xml we will need a theme.xml, which will define the theme name and the dependency from the other theme:
<?xml version="1.0"?> <!-- /** * * Location app/design/frontend/Atwix/custom/theme.xml * * @author Atwix Team * @copyright Copyright (c) 2016 Atwix (https://www.atwix.com/) * @package Atwix_Customtheme */ --> <theme xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Config/etc/theme.xsd"> <title>Atwix Custom</title> <parent>Magento/blank</parent> </theme>
Don’t forget to flush cache running the following command from Magento 2 installation root directory:
bin/magento cache:flush
That’s it! You should now see your theme listed under “Content > Themes”.
![2016-11-16_1910 | Atwix 2016-11-16_1910](https://www.atwix.com/wp-content/uploads/2016/11/2016-11-16_1910.png)
This code was tested on Magento 2.0.10 and 2.1.2 versions.
You may also want to read: