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.