Magento 2: How to override Luma Theme Home Page

Question

I'm using Magento 2 CE Version 2.1.0 on WAMP Windows 10

I already referred

Magento 2: How to override mini-cart default template html file?

Would like to override Magento 2 Default Luma Theme

I have below folder structure

magento2
 |_ app
 |_ design
 |_ frontend
 |_ Custom
 |_Theme
 |_Magento_Theme
 |_templates
 |_root.phtml - Copy of Luma
 registration.php
 theme.xml

app\design\frontend\Custom\Theme\Magento_Theme\registration.php

\Magento\Framework\Component\ComponentRegistrar::register(
 \Magento\Framework\Component\ComponentRegistrar::THEME,
 'frontend/Custom/Theme',
 __DIR__
);

app\design\frontend\Custom\Theme\Magento_Theme\theme.xml

<theme xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Config/etc/theme.xsd">
 <title>My Theme</title>
 <parent>Magento/luma</parent>
</theme>

I run php bin/magento setup:static-content:deploy & clear cache as well. It's not displaying my newly created Theme in Admin -> Content -> Design -> Configuration. Edit Dropdown List.

What I'm still missing?

• Jackson: This is also will be helpful devdocs.magento.com/guides/v2.0/frontend-dev-guide/themes/…

Answer 1

When creating any new theme or module you need to define registration.php file at root of your module or theme folder.

Always use theme name in lowercase, Because Magento used this standard for theme name declaration.

You haven't any problem for keep Theme name in camelcase but use standard way is much appreciated.

You have to define registration.php file inside Magento_Theme folder, its in wrong place.

Correct diagram of theme structure will be below,

magento2
 |_ app
 |_ design
 |_ frontend
 |_ Custom
 |_theme
 |_Magento_Theme
 |_templates
 |_root.phtml - Copy of Luma
 |_registration.php
 |_theme.xml

Your path for registration.php is app\design\frontend\Custom\theme\registration.php

registration.php file :

<?php
 \Magento\Framework\Component\ComponentRegistrar::register(
 \Magento\Framework\Component\ComponentRegistrar::THEME,
 'frontend/Custom/theme',
 __DIR__
);

your theme.xml file path will be,

app\design\frontend\Custom\theme\theme.xml

theme.xml file :

<theme xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Config/etc/theme.xsd">
 <title>Custom Theme</title>
 <parent>Magento/luma</parent>
 <media>
 <preview_image>media/preview.jpg</preview_image>
 </media>
</theme>

After all setup is completed, don't forget to run deploy command for the theme,

php bin/magento setup:static-content:deploy

Check inside your admin panel, Content -> Design -> Configuration for set your custom theme.

Remove cache and check in the frontend.

• Jackson: Bijal Usean & SH Patel. Accepting Answer of @Rakesh because previously I'm in discussion with him on this issue.
• Jackson: It's giving error while saving from Admin Cannot read contents from file "D:/wamp/www/magento2/" Warning!file_get_contents(D:/wamp/www/magento2/): failed to open stream: No such file or directory. So unable to save & Enable New Theme
• Rakesh Jesadiya: please run upgrade command, then run deploy command, remove var folder from root and check
• Jackson: Nope. Still Issue
• Jackson: Follow up here magento.stackexchange.com/questions/138381/…

Answer 2

you place theme.xml and registration.php in wrong place, the actual location is

app/design/frontend/<vendor>/<theme>/registration.php

<?php
/**
 * Copyright © 2016 Magento. All rights reserved.
 * See COPYING.txt for license details.
 */
\Magento\Framework\Component\ComponentRegistrar::register(
 \Magento\Framework\Component\ComponentRegistrar::THEME,
 'frontend/<vendor>/<theme>',
 __DIR__
);

app/design/frontend/<vendor>/<theme>/theme.xml

<!--
/**
 * Copyright © 2016 Magento. All rights reserved.
 * See COPYING.txt for license details.
 */
-->
<theme xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Config/etc/theme.xsd">
 <title>Vendor Theme</title>
 <parent>Magento/luma</parent>
 <media>
 <preview_image>media/preview.jpg</preview_image>
 </media>
</theme>

note: place preview.jpg in app/design/frontend/<vendor>/<theme>/media/preview.jpg

these two files enough to getting your theme list in Admin, then apply your theme.

If you would like to override luma templates for example app/code/Magento/Catalog/view/frontend/templates/product/view/addtocart.phtml, you can make the changes of that template in app/design/frontend/<vendor>/<theme>/Magento_Catalog/templates/product/view/addtocart.phtml

• Jackson: It's giving error while saving from Admin Cannot read contents from file "D:/wamp/www/magento2/" Warning!file_get_contents(D:/wamp/www/magento2/): failed to open stream: No such file or directory. So unable to save & Enable New Theme
• Bilal Usean: it seems like file permission issues, have you check do you set right permission as per magento standard.
• Jackson: As mentioned in question I'm using Magento 2 CE Version 2.1.0 on WAMP Windows 10
• Jackson: Follow up here magento.stackexchange.com/questions/138381/…
• Bilal Usean: please check your magento root directory access user and their user group, it should be the web server user and their group, as well as check read/write permission of that directory. refer this two link you can get more idea devdocs.magento.com/guides/v2.0/install-gde/prereq/… magento.stackexchange.com/q/91870/36463

Answer 3

Incorrect path you have used.

Follow bellow instruction for creating new custom theme.

Create theme.xml file in /app/design/frontend/Custom/Theme/theme.xml with below code.

<theme xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Config/etc/theme.xsd">
 <title>Custom Theme</title>
 <parent>Magento/luma</parent>
 <media>
 <preview_image>media/preview.jpg</preview_image>
 </media>
</theme>

Create registration.php file in app/design/frontend/Custom/Theme/registration.php with below code.

\Magento\Framework\Component\ComponentRegistrar::register(
 \Magento\Framework\Component\ComponentRegistrar::THEME,
 'frontend/Custom/theme',
 __DIR__
);

copy preview.jpg from

vendor/magento/theme-frontend-luma/media/preview.jpg 

add to

app/design/frontend/Custom/Theme/media/preview.jpg

Now you can see your custom theme in admin, select custom theme from admin and save it.

• Jackson: It's giving error while saving from Admin Cannot read contents from file "D:/wamp/www/magento2/" Warning!file_get_contents(D:/wamp/www/magento2/): failed to open stream: No such file or directory. So unable to save & Enable New Theme
• Suresh Chikani: Luma theme save work properly ?
• Jackson: Follow up here magento.stackexchange.com/questions/138381/…

Answer 4

The magic your looking for is taught @ https://www.codextblog.com/magento-2/create-a-custom-child-theme-from-luma-theme/

in short what's missing from all answers is copy files _theme.less and _extends.less from magento-theme-luma/web/css/source/ directory to your custom theme directory/web/css/source.

Refer to: https://devdocs.magento.com/guides/v2.4/frontend-dev-guide/css-guide/css_quick_guide_approach.html for specifics on what and how to extend/override