Magento 1.9 CE – How to create a child theme with default RWD theme

 

With Magento 1.9 Community Edition (CE) we can customize the theme look & feel and other logic without really impacting the core code. It’s a bad idea to make changes directly to core files , since all changes will be wiped out with any upgrade.

For the purpose of this discussion, below are some names I will be using:

  1. mageroot – your Magento install directory. Make changes accordingly. For Ubuntu this might be public_html or public_html/magento. This is usually where all files for installation are present e.g. index.php , app, skin etc.
  2. ytp – Your custom theme package. Change it as per your needs.
  3. yt – Your Custom Theme Name. Change it as per your needs.

Below are actual steps in this short tutorial:

  1. Disable all Cache from Magento Admin. This will prevent you from purging the cache again and again. You can enable it back after new theme is setup.
  2. Create directories needed to copy the files. We’ll follow above names.
    • Create mageroot/app/design/frontend/ytp/yt and mageroot/skin/frontend/ytp/yt using an ftp program such as FileZilla or using your terminal. On linux follow this:
      cd mageroot
      mkdir -p app/design/frontend/ytp/yt
      mkdir -p skin/frontend/ytp/yt

       

    • Create another directory mageroot/app/design/frontend/ytp/yt/etc for theme’s configuration files and change to that directory: On linux follow this:
      mkdir app/design/frontend/ytp/yt/etc
      cd app/design/frontend/ytp/yt/etc

       

    • Use nano , vim or your ftp file editor to create a theme.xml file. This is the primary file which ensures that your new theme falls back to default RWD theme if something is not correct or does not exist, so make sure name and contents are same.
      nano theme.xml

      Contents as below for community edition:

      <?xml version="1.0"?>
      <theme>
          <parent>rwd/default</parent>
      </theme>

      Ensure contents are exactly the same. This provides instructions for parent theme for fallback.

  3. Now the important step of copying files to your new theme. Using your ftp program or terminal , copy the images and scss files from your rwd/default to ytp/yt directory. Follow below on linux:
    cd mageroot
    cp -R skin/frontend/rwd/default/images skin/frontend/ytp/yt
    cp -R skin/frontend/rwd/default/scss skin/frontend/ytp/yt

    Copying image directory is very important because when image paths are relative and they need to be present in the new directory structure. If you plan to modify the CSS files (e.g. styles.css) , you can create css folder as well and copy corresponding css files from the rwd/default/css folder. Magento recommends using Compass/SCSS (see this) , but I prefer modifying css files, so I am not going to follow Compass watcher setup step as above. At this time, your new directory structure should look like below(image taken from above magento link for illustration only): 

  4. Next step is to configure new theme to load:
    1. As an admin, go to Magento admin backend , Click System > Configuration > GENERAL > Design.
    2. Expand package area and in the Current Package Name field, enter yth (replace with your custom package).
    3. Expand Themes area and in the Default field(last field in Themes), enter yt (Replace with your custom theme name).
    4. Click Save Config on top to save the settings.
    5. Clear Magento Cache : System > Configuration > Cache Management > Flush Magento Cache.
    6. At this time, if you do not face any errors while saving, you have successfully configured your new custom theme. If you face error like your new package does not exist, verify the names of directories and what you have entered in admin are same.
  5. Now go to magento front end website and load your home page, check the html source, you should see the reference of of your new theme in the css fies or image files.
  6. congratulations !!! Happy Customization.

Troubleshooting if your custom theme is not loading:

  1. Make sure theme.xml is named and created with exactly same contents as shown above. For enterprise edition, follow this tutorial.
  2. Make sure you home page, category pages etc are not using a custom layout. Similarly, for multi stores check if the specific store is not using any other theme/layout.
  3. Clear Cache on Magento and on the browser as well.

 

I followed this tutorial from magento while setting up my custom theme. It has a lot of other resources, feel free to refer to it.

 

Leave a Reply

Technology Central © 2014 - 2018 | Privacy Policy | Website Terms & Conditions