How to create a new Package/Theme in Magento

When I first started working with Magento I made a mistake that I swore would never happen again, I opened up the base theme and started editing. Why was this a mistake? Well, as you may or may not know Magento overrides this base theme during an upgrade. This means all modifications to this theme are deleted/removed leaving you with the original theme.

 

Luckily for me, that day I had a backup so a disaster was averted but if there ever was a reason to create my own package/theme from then on, that was it.

Before we get into the nitty-gritty of how to create a new Package/Theme, we should talk a little about Magento’s Theme Fall-back logic.

How Magento Theme Fall-back Works.

If you create a new Package/Theme the first place Magento will look for a file is

    • app/design/frontend/Your_Package/Your_theme/
    • skin/frontend/Your_Package/Your_theme

If Magento cannot find the file in Your Package/Your Theme it will look in:

    • app/design/frontend/Your_Package /default
    • skin/frontend/Your_Package/default

If Magento cannot find the file in Your_Package/default it will look in:

    • app/design/frontend/base/default
    • skin/frontend/base/default

Ok enough about Magento Theme Fall-back. Let’s create a new Package/Theme.

How to Create a New Package/Theme

In the instructions below, I am assuming you are basing your theme on Base/Default.

  • Go to app/design/frontend
  • Create a new package folder. I would make this the name of your client e.g “nike”
  • Go to app/design/frontend/nike
  • Create a new theme folder named “master”. This is my preference, this folder can have any name.
  • Copy the default theme folder from base into the folder nike. (This isnt required but again this is my preference for an extra fall back.)

You now should have a folder structure like this:

app/design/frontend/nike/default
app/design/frontend/nike/master

  • Go to skin/frontend/
  • Create a new folder called “nike” this must match your package name
  • Go to skin/frontend/nike
  • Create a new folder named “master”

You now should have a folder structure like this:

skin/frontend/nike/master

There is no need for a default folder here.

  • Copy the contents of skin/frontend/default/default (css folder, images folder) to skin/frontend/nike/master

You now should have a folder structure like this:

skin/frontend/nike/master/css
skin/frontend/nike/master/images

The next steps are to tell Magento it has a new package/theme and to use it.

  • Log into Magento Admin
  • Go to System/Configuration/General/Design
  • Under Package/Current Package Name, enter your package name “nike”
  • Under Themes enter “master” for Translations/Templates/Skin(Images/Css) and Layout
  • Under Default, enter default.
    The Default field tells Magento, if you don’t find the file in nike/master, check nike/default before checking base/default.
  • Click Save Config

And that’s it, simple as that.

At this point it’s important to note that you should ONLY copy the files from app/design/frontend/nike/default into app/design/frontend/nike/master that you want to edit. This is where the excellent fall-back logic kicks in.

I hope this was useful for all you beginners out there, check back for more tutorials on the basics of Magento development/theming.