When it comes to Magento, I’m mostly a frontend developer. I’ve written some modules – some of which I’m working on sharing with you, public –  but for the most part I stick with it’s core functionalities and just edit the template HTML & CSS files.

As such, I found myself wondering how I could add a new class name to the body tag in the HTML. I at first checked the skeleton template files in the page/ directory of the template; and it just referenced a function. After a little hunting, I found out the correct way to add a new class in Magento – via the layout files.

If you don’t get the layout file concept of Magento, you really ought to look into it. I’m not here to enlighten you about that.

Anyway – you can add new body classes on a per module basis. So let’s say we want to give all the “my account” pages a body class of… account-control. This can be very useful to add a generic style across the board to each account page that is separate from the styling of the rest of the site.

You’d need to find the appropriate module block (I believe it is customer_account) and paste the following code in

That’s it! Make sure you refresh your cache if necessary, and refresh the account pages after logging into a user account. Check the source – an additional body class of “account-control” has been added!

I wasn’t as specific as I could have been about things in this article; let me know if you have any troubles and I’ll update as necessary for all you n00bs.

Cheers

For me, one of the most annoying things about Magento is the fact that the home page needs to be written in the Admin’s CMS. For that matter, any “custom” page you wanna build in Magento has to be done through the CMS.

I heart my text editors, and I hate writing HTML code into a CMS. It’s just not friendly. Tab indenting is impossible; if you hit tab your browser thinks you wanna select the next button! Think a textarea is gonna give you code hinting? Forget it!

Futhermore; I’m not a big fan of hosting files whose code I must edit regularly within the database. It’s just not practical.

Brad Frost recently blogged about the power of using Magento’s CMS blocks. I’m gonna take it one step further – let’s use the short code Brad Frost shows us in his blog to create custom pages that we can control through PHTML files in our theme; not code that is stored in the database. All you have to do is follow these steps:

1. In the backend, create a new CMS page. Make sure to choose the appropriate layout (in the sidebar, click “custom design”) and enter in the page’s title, as well as it’s URL reference.
2. Instead of writing your code in the textarea, stick this guy in there:
   {{block type=”core/template” name=”yourPageTitle” template=”cms/custom/your-file.phtml”}}
3. In the above line, replace “yourPageTitle” with your page’s title – this isn’t terribly necessary, but good practice.
4. More importantly, replace “cms/custom/your-file.phtml” with the directory that your PHTML file will be stored within the template folder of the theme you’re using. I store all my files in the “cms” folder under the template folder, and I created a folder called “custom” to store all my custom PHTML files. You can do the same or choose your own path; whatevs.

And that’s it! Save the page within the CMS, write some code into the PHTML file, and you should now be able to visit the URL you specified and see the code you wrote OUTSIDE of the CMS!