{"id":973,"date":"2023-01-06T05:38:07","date_gmt":"2023-01-06T05:38:07","guid":{"rendered":"https:\/\/risecommerce.com\/blog\/?p=973"},"modified":"2023-12-19T12:00:41","modified_gmt":"2023-12-19T12:00:41","slug":"magento-2-how-to-make-a-custom-theme-computable-with-magento-2-4-x","status":"publish","type":"post","link":"https:\/\/risecommerce.com\/blog\/magento-2-how-to-make-a-custom-theme-computable-with-magento-2-4-x\/","title":{"rendered":"Magento 2: How to make a custom theme computable with Magento 2.4.x"},"content":{"rendered":"\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

Here is an example of how you can create a custom theme in Magento 2:<\/p>\n

    \n
  1. Create a directory for your theme under app\/design\/frontend\/[Vendor]\/[Theme]<\/code><\/li>\n
  2. Create a theme.xml<\/code> file in your theme directory with the following content:<\/li>\n<\/ol>\n
     

    <\/div>\n
    \n
    [code]<\/div>\n
    <theme xmlns:xsi=”http:\/\/www.w3.org\/2001\/XMLSchema-instance” xsi:noNamespaceSchemaLocation=”urn:magento:framework:Config\/etc\/theme.xsd”>
    <title>My Custom Theme<\/title>
    <parent>Magento\/blank<\/parent>
    <\/theme><\/div>\n<\/div>\n
    [\/code]
    <\/div>


    <\/p>\n

    \n
      \n
    1. Create a composer.json<\/code> file in your theme directory with the following content:<\/li>\n<\/ol>

      <\/div>\n
      \n
      [code]<\/div>\n
      {
      “name”: “vendor\/theme”,
      “description”: “My Custom Theme”,
      “require”: {
      “php”: “~7.1.3||~7.2.0||~7.3.0”,
      “magento\/theme-frontend-blank”: “100.2.*”,
      “magento\/framework”: “100.2.*”
      },
      “type”: “magento2-theme”,
      “version”: “1.0.0”,
      “license”: [
      “OSL-3.0”,
      “AFL-3.0”
      ],
      “autoload”: {
      “files”: [
      “registration.php”
      ]
      }
      }<\/div>\n<\/div>\n
      [\/code]<\/div>\n<\/div>\n
       
      <\/div>


      <\/p>\n

      \n
        \n
      1. Create a registration.php<\/code> file in your theme directory with the following content:<\/li>\n<\/ol>\n
        \n
        [code]<\/div>\n
        <?php
        \\Magento\\Framework\\Component\\ComponentRegistrar::register(
        \\Magento\\Framework\\Component\\ComponentRegistrar::THEME,
        ‘frontend\/Vendor\/theme’,
        __DIR__
        );<\/div>\n<\/div>\n
        [\/code]<\/div>

        <\/div>

        <\/div>\n<\/div>\n
        \n
          \n
        1. Run the following command from the Magento root directory to register your theme:<\/li>\n<\/ol>

          <\/div>\n
          \n
          [code]<\/div>\n<\/div>\n<\/div>\n
          php bin\/magento setup:upgrade<\/div>\n
          php bin\/magento setup:deploy -f<\/div>\n
          [\/code]<\/div>\n
           <\/div>\n
          \n
            \n
          1. Log in to the Magento Admin and navigate to Content > Design > Configuration<\/code><\/li>\n
          2. Click the Edit<\/code> button for the store view you want to apply your custom theme to<\/li>\n
          3. In the Design Configuration<\/code> page, select your custom theme in the Applied Theme<\/code> dropdown<\/li>\n
          4. Click the Save Configuration<\/code> button<\/li>\n<\/ol>

            <\/div>\n

            Your custom theme should now be active for the specified store view.<\/p>\n

            You can now start creating custom templates, layouts, and styles for your theme. For more information, you can refer to the Magento 2 documentation on creating a custom theme: https:\/\/devdocs.magento.com\/guides\/v2.4\/frontend-dev-guide\/themes\/theme-create.html<\/a><\/p>\n<\/div>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"

            Here is an example of how you can create a custom theme in Magento 2: Create a directory for your theme under\u00a0app\/design\/frontend\/[Vendor]\/[Theme] Create a\u00a0theme.xml\u00a0file in your theme directory with the following content: [code] <theme xmlns:xsi=”http:\/\/www.w3.org\/2001\/XMLSchema-instance” xsi:noNamespaceSchemaLocation=”urn:magento:framework:Config\/etc\/theme.xsd”> <title>My Custom Theme<\/title> <parent>Magento\/blank<\/parent> <\/theme> [\/code]   Create a\u00a0composer.json\u00a0file in your theme directory with the following content: [code] { […]<\/p>\n","protected":false},"author":1,"featured_media":1134,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"om_disable_all_campaigns":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"categories":[8,24],"tags":[],"class_list":["post-973","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-magento","category-tutorial"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/risecommerce.com\/blog\/wp-json\/wp\/v2\/posts\/973","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/risecommerce.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/risecommerce.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/risecommerce.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/risecommerce.com\/blog\/wp-json\/wp\/v2\/comments?post=973"}],"version-history":[{"count":0,"href":"https:\/\/risecommerce.com\/blog\/wp-json\/wp\/v2\/posts\/973\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/risecommerce.com\/blog\/wp-json\/wp\/v2\/media\/1134"}],"wp:attachment":[{"href":"https:\/\/risecommerce.com\/blog\/wp-json\/wp\/v2\/media?parent=973"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/risecommerce.com\/blog\/wp-json\/wp\/v2\/categories?post=973"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/risecommerce.com\/blog\/wp-json\/wp\/v2\/tags?post=973"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}