05 - Magento learning – Day 5/30 - How to Create Custom theme in Magento?

Create Theme Directory: Inside your Magento installation, navigate to the app/design/frontend directory. Create a directory for your theme. For example, VendorName/theme.

Create Theme Configuration: Inside your theme directory, create a theme.xml file. This file defines the theme configuration. Here’s an example of a theme.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>
    <parent>Magento/blank</parent>
    <media>
        <preview_image>media/preview.jpg</preview_image>
    </media>
</theme

Modify the <title> element with your theme’s title and update the <parent> element to specify the parent theme. In this example, we are using the Magento/blank theme as the parent.

Create Theme Directories: Inside your theme directory, create the following directories:
- web/css: For custom CSS files.
- web/js: For custom JavaScript files.
- web/images: For custom images.
- Magento_Theme/layout: For layout XML files.
- Magento_Theme/templates: For template files

Create Stylesheets and JavaScript Files: Inside the web/css directory, create your custom CSS files (e.g., styles.css). Inside the web/js directory, create your custom JavaScript files (e.g., script.js).

Create Layout XML Files:
Inside the Magento_Theme/layout directory, create XML files to modify the layout of different pages. For example, you can create default.xml to modify the layout of all pages, catalog_category_view.xml to modify the category page layout, etc.

Create Template Files:
Inside the Magento_Theme/templates directory, create template files (e.g., header.phtml, footer.phtml, etc.) to override or customize the existing templates.

Configure Theme:
To configure your theme, create or modify the etc/view.xml file in your theme directory. This file allows you to configure various image-related settings, such as image resizing, quality, and product image dimensions.

Set Your Theme as Active:
In your Magento admin panel, go to Content -> Configuration. Select the store view for which you want to set your custom theme. In the Applied Theme column, select your custom theme and save the configuration.

Deploy Static Content:
Run the following command in your Magento installation root directory to deploy the static content:

php bin/magento setup:static-content:deploy

Clear Cache:
Clear the Magento cache to ensure your changes take effect:
php bin/magento cache:flush