How to Create Custom, Selectable Blog Layouts in Joomla

How to Create Custom, Selectable Blog Layouts in Joomla

One Joomlashack user wanted to create customised blog layouts that their users could chose from.

The user wanted to keep to choose different layouts in different sitations. They wanted to use the default blog layout in some situations, and use a new design for some blog pages.

In this tutorial, I'm going show you how to create a custom layout and how to control it via your menu links.


Step #1. Copy the category blog files

  • Navigate to components/com_content/views/category/tmpl/
  • Copy these files:
    • blog.php
    • blog.xml
    • blog_children.php
    • blog_item.php
    • blog_links.php
custom category layout joomla
  • Paste the files into this folder: /templates/your-template/html/com_content/category/
custom category layout joomla

Step #2. Rename the layout files

Replace the word "blog" from the filenames with something unique. In my example, I'm using "custom":

  • custom.php
  • custom.xml
  • custom_children.php
  • custom_item.php
  • custom_links.php
custom category layout joomla

Step #3. Edit the xml file

  • Edit your XML file. In my case the file is custom.xml
  • Find the layout tag and set your custom values for the attributes:
    • title
    • option (skip spaces, use underscores instead)
  • Look in the message tag and set a custom description for the new layout

This is my example:

custom category layout joomla

Step #4. Test the new menu item type

The custom layout will generate a new menu item type.

  • Go to Menus > Your menu > Add new menu item
  • Menu item type > Articles > Your custom menu item type; in my example is "Custom Blog"
custom category layout joomla
  • Choose the category, set a title and save.

Step #5. Customise the new layout

The main purpose of a custom layout is to display content with a different design. Depending on your needs, edit the PHP files to generate the result you need:

  • custom.php
  • custom_children.php
  • custom_item.php
  • custom_links.php

Test your customisations by refreshing your frontend. In my custom layout I added a blue area with some dummy text.

custom category layout joomla