Complete Magento2 Theme Development ( HTML to Magento2 Theme )
Magento 2.0 Has a different theme structure than Magento 1.x.
Like Magento Module ,Magento 2.0 it must have a Namespace/Vendor name to create a theme. You can also download this magento 2 theme for learning purpose from here .
Lets take a look app/design/frontend in the folder we will find a folder Name Magento which is the vendor name.
Now we will create our theme in our Vendor Name.
Lets create a directory name ‘United’ which is our vendor name under ‘app/design/frontend’.
under the ‘United’ directory create the theme that you want .
lets create our theme name ‘mytheme’.
So, we will create our theme ‘mytheme’ under ‘United’ directory.
Under ‘mytheme’ directory we will create
theme.xml,
registration.php,
comopser.json,
web and
media directory.
So, our theme folder structure will same as following.
app/design/frontend/United/mytheme/ —-theme.xml —-web —-etc —-registration.php —-composer.json —-media
Lets describe the theme structure. If you see the root directory there is no ‘skin’ folder.
so the web directory will work as ‘skin’ where we will place css,js,images folders.
Lets describe the code . ‘title’ tag is the title of our new theme and the parent them will play as base them in magento 1.x.
Our parents theme located under vendor/magento/theme-frontend-blank.
The new feature of Magento 2.0 is we can use any theme as our parents theme.
after complete the theme mytheme we can create our another them mytheme2 using mytheme as a parents.
add a preview.jpg image in media directory for theme preview.
Now in the composer.json file we will add the following code.
{
"name": "united/mytheme",
"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.2",
"license": [
"OSL-3.0",
"AFL-3.0"
],
"autoload": {
"files": [
"registration.php"
]
}
}
Now in the registration.php file we will add the following code.
<?php
/**
* Copyright © 2015 Magento. All rights reserved.
* See COPYING.txt for license details.
*/
\Magento\Framework\Component\ComponentRegistrar::register(
\Magento\Framework\Component\ComponentRegistrar::THEME,
'frontend/United/mytheme',
__DIR__
);
?>
This will register your theme in the system. so the theme.xml and registration.php will be the main file of your theme.
In etc forder you can add a view.xml
Copy form vendor/magento/theme-frontend-blank/etc folder
Product image sizes and other properties used on the storefront are configured in a view.xml configuration file.
It is required for a theme, but is optional if exists in the parent theme.
Now create ‘images’ folder inside ‘web’ folder
Example: /app/design/frontend/United/mytheme/web/images/
In the Magento application, the default format and name of a logo image is logo.svg.
When you put a logo.svg image in the conventional location, which is
it is automatically recognized as theme logo. It is displayed in your store page header once the theme is applied.
In your custom theme, you can use a logo file with a different name and format, but you might need to declare it.
Declaring theme logo
To declare a theme logo, add an extending
For example, if your logo file is logo.png sized 300x300px, you need to declare it as follows:
<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.png</argument>
<argument name="logo_img_width" xsi:type="number">300</argument>
<argument name="logo_img_height" xsi:type="number">300</argument>
</arguments>
</referenceBlock>
</body>
</page>
Declaring the logo size is optional.
Clear the cache from magneto admin panel.
Then From Content->Configuration->
Edit ‘Default Store View’
Select it from dropdown and save the settings.
If any issue with static content deply , follow below steps
Command to deploy static files :
php -f magento setup:static-content:deploy
note : right click
Now you are with your new theme mytheme !!!!.
Add our custom css file
(ref. include css : http://devdocs.magento.com/guides/v2.0/frontend-dev-guide/css-topics/css-themes.html)
Copy folder ‘Magento_Theme’ from ‘vendor\magento\theme-frontend-blank\’ to your theme folder
example path :app\design\frontend\United\mytheme\Magento_Theme
Remove ‘web’ folder from ‘Magento_Theme’ folder .
Now open ‘default_head_blocks.xml’ found under app\design\frontend\United\mytheme\Magento_Theme\layout
and add below code to
So after adding it looks like
<head>
<css src="css/customtheme.css" />
<css src="css/styles-m.css" />
<css src="css/styles-l.css" media="screen and (min-width: 768px)"/>
<css src="css/print.css" media="print" />
</head>
Now, Create ‘css’ folder inside
After create a file ‘customtheme.css’ in the ‘css’ folder
example path :
then put required css
ex:
.page-wrapper {
background-color: #333;
}
Now, Refresh your cache from admin->config ( ir required deply static content from command line as described above .)
Now , it will show new background color .
note :
If you want to edit your css example inside
Magento load css from deployed contents resides under
pub\static\frontend\
So, first make changes in this deployed folder then
after finalizing it copy this css to original theme location’s css (under app/design/frontend/
Understand how magento templates,layout loads
1st default template file is vendor\magento\module-theme\view\base\templates\root.phtml
magento 2 builds html structure from xml files
next important file to build page-wrapper, columns is
vendor\magento\module-theme\view\base\page_layout\empty.xml
Then it loads files from below folder according to page request
vendor\magento\module-theme\view\frontend\page_layout
Customizing layout for our theme
Copy folder ‘page_layout’
from vendor\magento\module-theme\view\frontend
to app\design\frontend\United\mytheme\Magento_Theme
Now, if you need to add our own div with class or id ,we have to declare inside files as container or block
inside
app\design\frontend\United\mytheme\Magento_Theme\layout or
app\design\frontend\United\mytheme\Magento_Theme\page_layout
example inside these files :
default.xml ( for global layout) 1column.xml ( for full page layout ) 2columns-left.xml ( for page with left sidebar layout ) 2columns-right.xml ( for page with right sidebar layout ) 3columns.xml ( forpage with left and right sidebar layout )
ref. http://devdocs.magento.com/guides/v2.0/frontend-dev-guide/layouts/layout-extend.html
( Note : you must clear your cache , put some block inside containers from admin Content->widget .
Consider if you editing previously created widget ,it does not work because it created for another theme .
So do create new widget by selecting our current theme . )
customize global containers/blocks of our theme inside default.xml
located under app\design\frontend\United\mytheme\Magento_Theme\layout\
create global container (for all pages ) ex:
So, files looks quite similar below
......
<referenceContainer name="page.top">
<container name="banner" as="banner" htmlClass="banner" htmlTag="div" label="banner" />
</referenceContainer>
......
Hide some block
You can hide some block given by magento ex:
<referenceBlock name="top.links" remove="true"/>
Move block from one container to another
Sometimes we need to move from one container to another ,So follow below ex:
<move element="navigation.sections" destination="header.panel"/>
HTML to Magento Theme
- Copy your css files code to the file created in previous step i.e customtheme.css in our example
inside app\design\frontend\United\mytheme\web\css - Copy your HTML template’s images to app\design\frontend\United\mytheme\web\images
- Start customizing files located under app\design\frontend\United\mytheme\Magento_Theme
according to our HTML’s template div, class requirements .
Here we have to add,alter containers or blocks in these files .
Explained in above steps of ‘Customizing layout for our theme’ .
To call a custom phtml file (in xml layout , CMS block , phtml file )
In xml layout file
<block class="Magento\Framework\View\Element\Template" name="banner_file" template="Magento_Theme::html/banner_file.phtml"/>
If block called in another block as shown below
<block class="Magento\Theme\Block\Html\Header" name="header.content" template="html/header.phtml" before="page.top" > <block class="Magento\Framework\View\Element\Template" name="test_file" template="Magento_Theme::html/test.phtml"/> </block>
then you have to call it in header.phtml file ex:
<?php echo $block->getChildHtml('test_file'); ?>
In cms blocks and cms pages
{{block class="Magento\Framework\View\Element\Template" name="test_file" template="Magento_Theme::html/test.phtml"}}
In a phtml file
<?php include ($block->getTemplateFile('Magento_Theme::html/test.phtml')) ?>
or
<?php echo $block->getLayout()->createBlock('Magento\Framework\View\Element\Template')->setTemplate('Magento_Theme::html/test.phtml')->toHtml(); ?>
In above all conditions test.phtml should located in path
[Package Name]\[Theme Name]/Magento_Theme/templates/html/test.phtml
Call Magento CMS block (of admin blocks) to phtml file
<?php echo $this->getLayout()->createBlock('Magento\Cms\Block\Block')->setBlockId('homepage-banner')->toHtml();?>
Above ‘homepage-banner’ is the block ‘identifies’ name .
Call Magento inbuilt blocks
Put below in default.xml layout file
ex:
...
<block class="Magento\Theme\Block\Html\Footer" name="footer.content" template="html/footer.phtml">
<block class="Magento\Newsletter\Block\Subscribe" name="form.subscribe" as="subscribe" before="-" template="subscribe.phtml"/>
</block>
....
Then call below in footer.phtml
<?php echo $this->getChildHtml('subscribe'); ?>
note : check our magento themes for reference
Add a static image on PHTML file and CMS Blocks
in phtml file
<img src='<?php echo $this->getViewFileUrl('images/header_r_banner.jpg'); ?>' >
in CMS block
<img src="{{view url="images/header_r_banner.jpg"}}" alt="test" />
You have to take care for header_r_banner.jpg is exist in
pub/static/frontend/Magento/[your theme]/en_US/images directory.
For example my default.xml file looks like below within body tag
<referenceBlock name="top.links" remove="true"/>
<referenceBlock name="top.search" remove="true"/>
<referenceBlock name="minicart" remove="true"/>
<!-- to move block to another container <move element="navigation.sections" destination="header.panel"/>-->
<referenceContainer name="page.top">
<container name="banner" as="banner" htmlClass="banner" htmlTag="div" label="banner" />
</referenceContainer>
<referenceContainer name="header-wrapper">
<container name="header_banner" after="logo" as="header_banner" htmlClass="header_top_right" htmlTag="div" label="Header Banner" />
</referenceContainer>
That’s it initially it took long steps but just for the first time.
If you want to create another theme having some experience , it doesn’t take too much time .
Feel free to put below any comments ,I will try to reply soon .
){kind=link}
About Author
admin
Hi, I am Pawan Kumar a webmaster from New Delhi, India. I am developer and trainer at www.unitedwebsoft.in and www.w3-learn.com . I have 8 years working experience in PHP, Drupal, Wordpress, Magento, Jquery, Ajax, HTML 5, CSS3 etc. I have my proven quality records in web Development and Training. I have completed more than 200 of web projects and trained more than 1000 of trainee .You can contact me through my email: webmaster.delhi1@gmail.com . visit for my details Profile link
-
Shwe Hlaing
-
Prakash
-
Prakash
-
Kunal Nath
-
Luiz Paulo Franz