Magento – changing the body class by category

Magento updates the body class declaration on almost every page. If you look at the source code, the body class varies according to where you are on the website. This can be very useful if you wish to style different pages.

However, I was asked to produce different body backgrounds depending on the category the user was viewing. By default Magento adds body classes for categories based on the category name. So, you get something like the following for a parent category (caravan-motorhome-lighting):

<body class=” catalog-category-view categorypath-caravan-motorhome-lighting-html category-caravan-motorhome-lighting”>

and the following for a child category (mr16-leds):

<body class=” catalog-category-view categorypath-caravan-motorhome-lighting-mr16-leds-html category-mr16-leds”>

This makes styling a parent category & its child categories very difficult – since the class attributes change every time the user navigates to a child category. What was needed was a way of assigning a single class to a parent category and its children – say, ‘caravan-motorhome-lighting’.

I looked around for a solution but didn’t want to go to the bother of overriding any Mage classes, nor could I figure out how to achieve this using Magento’s layout.xml files. Then I thought about what category parameters or attributes I could add from the Admin ‘Manage Categories’ interface. This is when I lucked on the solution.

Within the Category ‘Custom Design’ is the ability to inherit or override the ‘Parent Category Settings’.  If this is set to ‘No’, you can then apply a ‘Custom Layout Update’ – which is essentially an xml snippet of the kind usually found in Magento’s layout.xml files.

By adding the following:

<reference name=”root”><action method=”addBodyClass”><className>caravan-motorhome-lighting</className></action></reference>

to the parent category, and then making each child category inherit or ‘Use Parent Category Settings’, I get the body class ‘caravan-motorhome-lighting’ added to every category/sub-category page for that category & its children.

magento layout update

Here we have set this parent category not to ‘Use Parent Category Settings’ & have added the layout update.

magento body class layout update

Now we set the sub category to ‘Use Parent Category Settings’, & it therefore gets the same body class attribute as its parent category.

The net result is now that parent and child categories share the same body class & I can then set a common background image for all of them to share. So the parent has this body class declaration:

<body class=” catalog-category-view caravan-motorhome-lighting categorypath-caravan-motorhome-lighting-htmlcaravan-motorhome-lighting”>

while its child categories have the following:

<body class=” catalog-category-view caravan-motorhome-lighting categorypath-caravan-motorhome-lighting-mr16-leds-html category-mr16-leds”>

So that both parent and child categories share a common class attribute of ‘caravan-motorhome-lighting’. Meaning I can style all these categories in the same way, while adding different background images for other categories.

You can see the technique in operation at the Aten Lighting website. If you looking for a Leicestershire magento developer, please get in contact.

22 thoughts on “Magento – changing the body class by category

  1. Thanks Eddie, I was looking for that. Unfortunathely it doesn’t allow to save XML Code there now. It just doesn’t save it 🙁

    Can this be a problem of the newest version 1.6.1.0 ?

  2. Hi Oliver,
    Glad to see that you’ve got it working. XML is very unforgiving regarding mismatched quotes, elements, etc. Sometimes I copy the xml into a code editor (netbeans is good for this), edit there & check the syntax, before pasting it back into the CMS page editor within Magento.
    Season’s Greetings, Eddie

  3. Hi Jay,
    This probably means that you have mismatched tags somewhere in your layout xml.

    1st thing to resolve, however, is exactly what is it that you’re trying to “paste this in”?

    Cheers,
    Eddie

  4. Hello,
    for a reason I dont understand, it is working well on CMS pages, but not in catalog pages.

    Someone has an idea? I’ve been looking for hours 🙁

    Thkx

  5. Hi Sylvain,
    Are you sure that you have set the parent category to “not inherit” & then its children to inherit parent settings?
    Regards

  6. Hello Eddie,
    yes, the settings are good. What I find strange is that is it working great on “pages”, like homepage.

    For ex: on my homepage, the class is: “cms-index-index cms-home mybackground” . On cat pages, the “mybackground” is not added.

    I am starting to think I may have an issue with the code that generates the category pages.. don’t know!? I did try with the default Magento theme and get the same issue. Im using EE 1.9.x.

  7. Hi,
    Sorry, but I have to ask – have you added that class into the category where this background is meant to display?
    Go into the category custom design, custom layout update & ensure that that something like this is there:mybackground
    Please be aware that I’ve only done this on CE – never touched EE before, altho’ I’d doubt they work differently at that level? What does the page class look like on a category page? Could it be a css specificity issue?

    Cheers,
    Eddie

  8. Hello,
    I have place the appropriate settings and code on the category where I want a different background (body) 🙂

    The page class in the category looks like:
    ” catalog-category-view categorypath-summer-html category-summer”

    I have also noticed the same trouble when I use a Custom Layout Update directly on the product page in the Admin. At the opposite, on cms pages the class is:
    ” cms- index-index cms-home mybackground” (working!!). I think the issue is more related to a code problem than a css thing.

    Anyway, I will have to live with it until I upgrade to newer EE version. Thanks for your help! 🙂

  9. Hello again,
    just to let you know my problems were caused by a bug with Enterprise edition in category/product controllers. I dont know if it has been fixed with the recent release, but EE users can get a patch from the Magento Support.

    Thank you so much 🙂

  10. Eddie – you are a star – Thanks.

    Also, if you want it to work all the way down to product level make sure that the option:
    Apply to products is set to Yes…

    Result!

    Thanks, Alistair

  11. Hi Alistair,
    Thanks for dropping by & I’m glad it worked for you. Thanks too for the tip re: apply to all products.
    Cheers,

  12. In case anyone else comes across this and finds it doesn’t work if you copy and paste the code directly, be warned that the double quotes are not the “right ones” for xml. Delete and replace them with “proper” quotes and it’ll work perfectly. Thanks for the simple explanation Eddie.

  13. How do you handle non-category product links?

    In various places (search results, new products, etc) products will be linked by their non-category url (domain.com/product-name) – and then the body category class is not added.

    That gives me a real headache. Any ideas?

  14. Hi Tony,
    Is it not possible to add some layout updates in local.xml? Look at searchresults.xml layout file catalogsearch_result_index – copy that handler into local.xml & that should enable you to add a body class. It should just be a case of repeating for similar scenarios.
    Good luck,
    Eddie

Leave a Reply