Here at Pixafy, I’m proud to say that I’ve completed a fair share of WordPress sites and have went from being, well, a noob, to a master. One can never master anything because life is always a learning experience, right?
I’d like to think that I know WordPress enough by now that I can look at a design for a site and already have an idea of how I’m going to integrate it into the CMS (of course,this varies project by project). And because life is always a learning experience, I’d been given the opportunity to get my hands dirty with a Magento site all of my own.
Structure Differences
One thing I’ve realized very early on going from my comfort zone of WordPress into the seemingly scary Magento was that they are not very alike – or at least, not right off the bat. When I first worked in WordPress, it took time for me to understand that WordPress isn’t just one gigantic HTML file, but rather it calls pieces from other files (more about this in an earlier post of mine.)
Magento, it turns out, is the same way, except it’s a lot larger and broken into much deeper pieces. Unlike WordPress, where there is only one header.php or one sidebar.php and the name is obvious, Magento has several folders and files with the same names, but it’s their paths that determine which pieces are shown on your site.
When I was first learning WordPress, I would use my computer’s search to find snippets I inspected from the browser so that I can find where things were coming from. This method with Magento can take forever due to files/folders having the same names and content can be repeated in multiple places. And so it’s recommended to turn on Template Path Hints.
Template Hierarchy Differences
In WordPress, if you want to use a custom file that overwrites the default one, it’s done by one of two ways. One, re-naming the file in such a way that WordPress will know to go to that file first rather than its default – like category templates. Or two, naming your own file and knowing where/how to call your custom file, like having more than one sidebar.php. In WordPress, a theme is contained to one folder with everything necessary for that theme to function in that little package.
In Magento, a theme is at least two nested folders that contain many other directories inside. Unlike WordPress, where themes aren’t dependent on each other, Magento relies on its default theme so it’s not recommended to edit the default core files. This is incredibly important when it comes to upgrades, as default files will get updated, and changes made to them will go away.
Creating a theme in Magento
So, how do we make a theme in Magento? Where WordPress will find a file and know to overwrite the default, Magento will go down a path instead. In this case, we’re using Magento Enterprise Edition to demonstrate, but a similar setup exists for Community Edition.
How to create my theme’s images/styles:
- In your Magento’s root folder, look for a folder called Skin.
- In skin, navigate to frontend -> enterprise. Now here you will see a Default folder, this is where Magento goes to get its styles and images by Default. Inside the default folder you’ll see folders for css, images and js. This folder and path that we’ve followed up to this point will be what we’re going to copy to make our own images/css/js folders.
- On the same level as the Default folder, make a new folder and name it whatever you’d like, preferably what you’re going to call your theme. Let’s call ours, “mytheme”.
- Go to the Default folder and inside of it, copy everything. Go back to your now custom folder, ours is “mytheme” and paste the contents that were copied from default. You should now have a css, images, and js folder in “mytheme”
From this point, I would begin styling, working off of the existing styles on Magento. There’s no need to write styles from scratch and unnecessary images can get deleted from your custom folder. The purpose of working this way is to prevent accidents and to provide a way to troubleshoot when things aren’t as they should be.
If anything should behave strangely in your theme folder, just by re-naming the css folder in “mytheme”, Magento will have no choice but to revert back to the css in the Default folder because it can’t find something called css in our theme. This works in other places as well so you can see if the problem is so deep, that it affects the site even in it’s default settings.
Now that we have a place to put styles and images, what about changes to actual files? This is where it gets tricky. Unlike the folder we just made, where we’re going next, we don’t want to copy absolutely everything in the Default folder and paste it into a folder of our own. There are a lot more files and folders in this place and it saves time to just copy only the paths and files that need to be edited.
How to create my theme’s file directory:
- Back in your Magento’s root folder, there should be a folder called App.
- In App, navigate to design -> frontend and you will see two folders. Base and Enterprise. Magento grabs files from each of these folders at times so please keep this in mind.
- Inside Enterprise, you will see another Default folder. On this level, make your custom theme folder, ideally using the same name as the one you named earlier. In our case, it’s “mytheme.”
Now this is where hints continuously remain handy. Let’s say you’re inspecting a default Magento page in your browser, like the list of products, and realize that the page you want to edit is following this path:
frontend/enterprise/default/template/catalog/product/list.phtml
You can check this file to see if it has what you need and if it does, then it’s time to make a copy of it rather than edit this directly. So then we can go to the “mytheme” folder next to default and mimic the same path, making and naming your folders and files exactly like it is in Default. The new path will be:
frontend/enterprise/mytheme/template/catalog/product/list.phtml
If you refresh your page with hints on, you should see that the path has changed and it is now safe to edit this file. If you continue this way, you will have a custom site in no time and a fallback theme should anything ever happen in your custom theme.
In Conclusion
To summarize, these are the things I’ve learned so far.
- Magento and WordPress both get their files/content in pieces.
- WordPress will replace a file by naming conventions or specifically calling a custom file. Magento replaces files using paths.
- WordPress’ theme is contained to one folder. Magento has at least two theme folders, one for your styling, another for edits in files.
- WordPress’ theme files can be edited directly. Never edit Magento’s Default/Core files. Always make copies of the paths/files within your custom theme folder.
- Hints are the best way to find things and troubleshoot.
I’m still learning and taking notes. And because of my WordPress experience, discovering where Magento has equivalents to things I am familiar with and where Magento differs drastically. Magento may seem intimidating at first, but once these first few concepts are understood, it gets a lot easier.
For those new to Magento front-end development, their Design Guide is a very handy tool for beginning to understand the concepts.
Coming soon: Thinking like WordPress in Magento: keeping content editor friendly and how. Do you have tips for theming Magento? Share with us in the comments!
Questions or comments? Share them below, or tweet us @Pixafy!
