The first thing you should know about Magento is the documentation sucks. About a year and a half ago when I built my first Magento site, I swore I’d write better documentation on exactly what I had to do to get the job done. It was a total nightmare. After much laboring, confusion, and Googling the hell out of it, things finally started coming together. 18 months later, well, of course I haven’t written anything to help anyone.
Installing Magento isn’t too hard. I’m not going to give an in-depth guide to this but simply visit their website, download the sucker, and follow the steps here to getting it set up. Permissions can be a bear so if you run into issues, that’s usually the problem. Their documentation isn’t so bad here.
My Files and Permissions
drwxr-xr-x 4 admin admin config
-rwxr-xr-x 1 admin admin cron.php
-rwxr-xr-x 1 admin admin cron.sh
drwxr-xr-x 16 admin admin downloader
drwxr-xr-x 10 admin admin errors
drwxr-xr-x 4 admin admin includes
-rwxr-xr-x 1 admin admin index.php
-rwxr-xr-x 1 admin admin index.php.sample
-rwxr-xr-x 1 admin admin install.php
drwxr-xr-x 20 admin admin js
drwxr-xr-x 12 admin admin lib
-rwxr-xr-x 1 admin admin mage
-rwxr-xr-x 1 admin admin php.ini.sample
drwxr-xr-x 5 admin admin pkginfo
-rwxr-xr-x 1 admin admin robots.txt
-rwxr-xr-x 1 admin admin select
drwxr-xr-x 14 admin admin shell
drwxr-xr-x 6 admin admin skin
drwxr-xr-x 3 admin admin var
Getting Started With a Theme
Ok. So hopefully you’ve got it installed. In order to get started you will want to create two new folders. Under “app/design/frontend/default/your_new_project” and under “skin/frontend/default/your_new_project”. In the case of the 4walls Retailer’s site, my folder’s looked like this:
Under the SKIN folder (my new skin is called 4walls) you will probably want to copy and paste the CSS and images folders from another theme. I used the “Blank” skin because it was the most bare. It’s easiest to use someone else’s CSS since all the resets and things are already listed.
Now – go to the backend of your Magento installation. You will find this under yourwebsitedomain.com/admin. Once inside choose System -> Design and click the default. If nothing is there create a new one.
Then be sure to choose your new folder name (4walls here) from the dropdown. You will see “blank” and “modern”, etc. there by default. Then go to System -> Configuration in the admin. On the left you will find “Design”. Under “Themes” type your new project in Skin (Images / CSS) type your new project folder name.
How Magento Routing Works
By default, Magento looks in app/design/frontend/base/default for all of its files. This tells it what to do. It looks as the complementing skin, skin/frontend/base/default as well. Here we are basically telling it to override this. If your new skin is empty, nothing will show up, as this is hard override set on the backend. However, if you don’t have any new navigation set up under app/design/frontend/default/4walls/template/catalog/navigation, it will reference the base for the navigation.
NEVER update your files in the BASE directory. If you have ever used WordPress you know that when you run an update on the system, the core files get blown out, updated and all that remains is your ‘wp-content’ folder. Same situation here. When you upgrade Magento, your ‘base’ folder gets blown out and overwritten by the new updates. If you’re thinking you won’t be updating so no worries, you’re wrong. You never know who is going to be behind you and how bad you may make the process for you or someone else in the future. This is very simple to set up a new store, so do it properly.
I think it is very important to browse around the base folder and see what’s included. This will tell you a lot about where your items are. Instead of blindly jumping in and coding, you should know what is what. Take a look around the demo store and you will notice several pages and folders that you can find in the app directory. Navigate down to app/design/frontend/base/default/template.
Most of your time will probably be spent in catalog, catalogsearch, checkout and page. Page is where all the templates and goodies are. page/html -> header, footer, etc.