Mini Tutorial: Magento Pages and Body Classes Part II

In Part 1 of a Mini Tutorial on Magento Pages and Body Classes I gave you a list of all Magento pages and their body classes but I also mentioned that sometimes you need to add some extra custom classes. Here I will show you four different ways to add your own through PHP in the template files, XML in the layout files, and through the options in the admin panel.

PHP in template files and CSS

Let’s say you want a custom design for your level 1 category pages (or parent categories) but you want the design to be different once the customer clicks on any of the filters. One way to make these two look different is by giving them body classes with a PHP if statement.

File: 2columns-left.phtml
(Scroll sideways to see full code)

<?php if ($_category = Mage::registry('current_category')): ?>  //Get current category.
    <?php $_catPath = explode("/", $_category->getPath()); ?>   //Get the URL path string as an array.
    <?php if (count($_catPath) == 3): ?> //Get the parent cat by its level (In this case our parent cat level is 3)
        <?php $_current_url = Mage::helper('core/url')->getCurrentUrl(); ?>
        <?php if(!strstr($_current_url,'cat=')): ?>  // Check to make sure the page isn't being filtered by a category
            <body<?php echo $this->getBodyClass() ? ' class="' . $this->getBodyClass() . ' cat-1"' : '' ?>> //Add 'cat-1' (level 1) body class.
        <?php else: ?>
            <body<?php echo $this->getBodyClass() ? ' class="' . $this->getBodyClass() . '"' : '' ?>> //Else, do not add a body class.
        <?php endif; ?>
    <?php else: ?>
        <body<?php echo $this->getBodyClass() ? ' class="' . $this->getBodyClass() . '"' : '' ?>>
    <?php endif; ?>
<?php else: ?>
    <body<?php echo $this->getBodyClass() ? ' class="' . $this->getBodyClass() . '"' : '' ?>>
<?php endif; ?>

Code snippet courtesy of one of our backend developer Keegan Galea

As you can tell from the comments, we used PHP to get the current category level, check if it was the parent level and add a class called ‘cat-1’ to it. It then checks to see if the page has been filtered and if it is, it will not get any classes added to it. This way you can style all category pages one way with your design for filtered category pages, and then override it by targeting the ‘cat-1’ body class in your CSS and styling it with the design for your parent category pages.

PHP only

Let’s say you want to hide a certain block of code or content on certain pages. You can use PHP to target the body class and hide them accordingly. In the following code we are hiding the ‘topMenu’ block from all of our WordPress Magento pages (After a WordPress integration).

File: header.phtml

<?php
/*Hide something only on wordpress*/
?>
<?php if(strpos($this->getLayout()->getBlock('root')->getData('body_class'),'is-blog') === false): ?>
        <?php  echo $this->getChildHtml('topMenu') ?>
<?php endif; ?>

This code gets the the body class as a string and looks for ‘is-blog’, if it’s not there (false) then it renders the topMenu.

But, let’s be honest, those two methods were a bit hacky. Next I will show you a more proper way to do this, although not as versatile.

XML layout files

This is perfect if you want to target a group of pages and give them all a common body class. The account pages, for example, are definitely in need of this treatment. Here is how you can accomplish it with just a few lines of XML:

File: layout/local.xml

<customer_account>
  <reference name=”root”>
      <action method=”addBodyClass”>
          <className>account-page</className>
      </action>
  </reference>
</customer_account>

With this, all of your account pages defined in <customer_account> will have the new ‘account-page’ body class. But before I am done, I’m going to show you one more way to add body classes.

Admin Panel

This method involves layout updates, which are text area fields that Magento provides.This is where we can include blocks of XML code that overrides or adds actions for a particular page.

For example, if you go to Catalog > Categories > Manage categories and select the category that you want to add a new class to, within the ‘Custom Design’ tab you will find one of these ‘Custom Layout Update’ text areas.

All you have to do is include the same code snippet provided above, but you can skip the first tag and start from <reference name=”root”> because there is no need to specify which page you’re updating.

Custom Layout Update

In the case of category pages, if you want the children categories to have the same body class as their parent category, all you need to do is go to the children category’s ‘Custom Design’ tab and select ‘Yes’ on the ‘Use Parent Category Settings’ option.

Hope you found this blog post helpful! Have nice day and happy coding 🙂 .