+91 9875642702
+91 8583959528

How to create Magento 2 Custom Theme: Step by step guide to override Luma theme

image
image
image
image
image
image

How to create Magento 2 Custom Theme: Step by step guide to override Luma theme

Creating a new theme in Magento 2.4.7 that inherits from the Luma theme involves several steps. Here’s a detailed guide on how to achieve this:

Step 1: Create the Theme Directory

  1. Navigate to your Magento root directory.
  2. Create directories for your new theme:

app/design/frontend/<Vendor>/<theme_name>

Replace <Vendor> with your vendor name and <theme_name> with your theme name.

Step 2: Create the Theme Configuration File

  1. Inside your theme directory, create a file named theme.xml at app/design/frontend/<Vendor>/<theme_name>/theme.xml.
  2. Add the following content to theme.xml:

 

XML file

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

Step 3: Create the Registration File

  1. In your theme directory, create a file named registration.php at app/design/frontend/<Vendor>/<theme_name>/registration.php.
  2. Add the following content to registration.php:

PHP file

<?php
\Magento\Framework\Component\ComponentRegistrar::register(
\Magento\Framework\Component\ComponentRegistrar::THEME,
'frontend/<Vendor>/<theme_name>',
__DIR__
);

Step 4: Create a Composer Configuration File

  1. In your theme directory, create a file named composer.json at app/design/frontend/<Vendor>/<theme_name>/composer.json.
  2. Add the following content to composer.json:

Json File

{
"name": "vendor/theme-name",
"description": "Magento 2 custom theme",
"require": {
"php": "~7.4.0||~8.1.0",
"magento/framework": "*",
"magento/theme-frontend-luma": "*"
},
"type": "magento2-theme",
"version": "1.0.0",
"license": "OSL-3.0",
"autoload": {
"files": [
"registration.php"
]
}
}

Step 5: Create a Static Files Directory

  1. Create directories for your theme’s static files at app/design/frontend/<Vendor>/<theme_name>/web.

Step 6: Add Theme-Specific Layout and Template Files (Optional)

If you want to customize specific layouts or templates, you can create directories like layout, templates, and Magento_Theme within your theme directory and add your customizations there.

Step 7: Enable Your Theme

  1. Run the following commands to deploy static content and clear the cache:

Run into the command line

bin/magento setup:upgrade

bin/magento setup:static-content:deploy -f

bin/magento cache:clean
  1. Go to the Magento Admin Panel.
  2. Navigate to Content > Design > Configuration.
  3. Find the store view you want to apply your theme to and click Edit.
  4. Under the Applied Theme dropdown, select your new theme, and save the configuration.

Step 8: Override the Header

To override the header, copy the Luma theme’s header files to your custom theme and make your modifications.

  1. Copy the header.phtml file from the Luma theme:
bash

cp vendor/magento/theme-frontend-luma/Magento_Theme/templates/html/header.phtml app/design/frontend/acesoftech/acesoftech_academy/Magento_Theme/templates/html/header.phtml
  1. Modify the header.phtml file in your custom theme as needed.
  2. (Optional) If you need to modify the layout XML, copy the layout file:
bash

cp vendor/magento/theme-frontend-luma/Magento_Theme/layout/default.xml app/design/frontend/acesoftech/acesoftech_academy/Magento_Theme/layout/default.xml
  1. Modify the default.xml file in your custom theme as needed.

Step 9: Deploy Static Content

After creating your custom theme and making the necessary modifications, deploy the static content:

bash
bin/magento setup:upgrade
bin/magento setup:static-content:deploy -f
bin/magento cache:clean

Step 10: Apply the Theme

  1. Go to the Magento admin panel.
  2. Navigate to Content > Design > Themes.
  3. Set your new theme (acesoftech_academy) as the default theme for the store.

By following these steps, you will create a custom theme that inherits from the Luma theme and allows you to override and customize various aspects of the Luma theme.

Get Magento Training in India from a professional trainer. who has industry experience.