January 18, 2017
Magento 2 Theme development and customization can be categorised in different level depending on the different developer’s skills. Different level of customisation are:
Similar to the Magento 1, themes are stored inside app/design/frontend directory. Inside this we need to create Vendor directory with your Vendor_name and inside vendor directory we need to create a new directory which your Theme_name. Both name should not have space between them. So after this the structure will be:
app/design/frontend/Vendor_name/theme_name
Now your structure is in place, you need to declare your theme so that Magento knows it exists and you can set it as an active theme in the admin. Create a theme.xml file within the theme folder, on the root. You can use the code inside of the Blank or Luma theme folders. You can also use the code below. Just insert the name of your theme in the <title> tags. You can also specify a parent theme for fallback purposes.
<theme xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:noNamespaceSchemaLocation="urn:magento:framework:Config/etc/theme.xsd">
<title>INSERT THEME NAME</title>
<parent>Magento/blank</parent>
</theme>
This is the minimum code you need, but you can also declare a theme image. This is a thumbnail image which shows in the admin on your theme page so you can see a preview of what your theme looks like. To add one of these, add the code below in-between the
<media> <preview_image>media/theme-screenshot.jpg </preview_image> </media>
Change the name of the thumbnail image to that of your filename. Place the image in the following location:
/app/design/frontend/Vendor_name/theme_name/media/theme-screenshot.jpg
If you don’t have this file in the correct location when you visit your theme page in the admin, you’ll get an error – so make sure your image is in the right place and named correctly.
The last part in declaring your theme is to add a registration.php file to your theme’s root.
/app/design/frontend/Vendor_name/theme_name/registration.php
Add below code in your registration file:
<?php/** * Copyright © 2015 Magento. All rights reserved. * See COPYING.txt for license details. */MagentoFrameworkComponentComponentRegistrar::register( MagentoFrameworkComponentComponentRegistrar::THEME, 'frontend/vendor_name/theme_name, __DIR__);
In a design, there are many static files such as javascript, css, images and fonts. They are stored in separate directories in web of theme package. In Magneto 2, there is no skin directory as Magento 1. So all this static files are kept in web folder inside theme root directory. Here are the structure
app/design/frontend/Vendor_name/theme_name/├── etc/view.xml├── web/│ ├── css/│ │ ├── source/ │ ├── fonts/│ ├── images/│ ├── js/
The etc/view.xml file is where you can configure the Magento Catalog image sizes and other things. Copy the etc/view.xml file from one of the default theme’s and edit as necessary. The last thing you can do before activating your theme, is to add you logo and declare it. The image file can be added to the web/images folder which you created not long ago. This can be whatever file type you like, in this case I’ve used an svg. So to actually tell the theme to use your logo, you create the Magento_Theme/layout folders and add the following code to a default.xml file. Edit to match your requirements.
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd"> <body> <referenceBlock name="logo"> <arguments> <argument name="logo_file" xsi:type="string">images/logo.svg <argument name="logo_img_width" xsi:type="number">300 <argument name="logo_img_height" xsi:type="number">300 </arguments> </referenceBlock> </body></page>
Composer is a tool for dependency management in PHP. It allows you to declare the libraries your project depends on and it will manage (install/update) them for you.
To distribute your theme as a package, add a composer.json file to the theme directory and register the package on a packaging server. { “name”: “vendor_name/theme_nameultimate”, “description”: “N/A”, “require”: { “php”: “~5.5.0|~5.6.0|~7.0.0”, “magento/theme-frontend-blank”: “100.0.*”, “magento/framework”: “100.0.*” }, “type”: “magento2-theme”, “version”: “100.0.1”, “license”: [ “OSL-3.0”, “AFL-3.0” ], “autoload”: { “files”: [ “registration.php” ] }}
Now everything is in place for you to activate your theme. Browse to the admin of your Magento 2 store, and go to Content > Design > Themes. Make sure your theme appears in this list – if it doesn’t, it hasn’t been declared correctly. When you can see your theme in the path above, browse to Stores > Configuration > Design. Select the right store scope and then change the theme to your newly created theme.
Leave a Reply
You must be logged in to post a comment.