Add Joomla’s Article Layout as a Body Class

Posted in Joomla
Joomla Logo

If you are using Joomla's alternative layouts for certain pages, you might want to target those pages with a css class.

You could add a class directly into the layout file, but since the layout file is inserted into the main component area this only lets you target that specific area and not the page as a whole.

We can get the page layout information in the index file of the template by loading the article attributes.

  • First, check the 'view' to make sure the page loading is an article.
  • Load the article details by the id.
  • Check if the attributes have 'article_layout' set.
  • Replace : with - as the layout is stored as template_name:layout_name.
  • Store the value in a variable and then output the contents in the body class.


You can also add the view details as a class and other information like option, layout, task nd menu item id.