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?

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.

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

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.

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