Creating Your Own Joomla Custom Category Page

Creating a new layout override for a category/categories page is much simpler than you would think! Let's get started using the 'Joomla! Tips & Tricks' category as the example:

Copying / Creating Your Base Files

• We are using the core 'Blog Layout' as the starting point
• Copy all the files that contain 'blog' in the name (5 files) from the 'components > com_content > category' directory
• Replace 'blog' in each filename with 'news' (or whatever name you prefer)
• Copy the 'news_item.php' file and name the new file 'news_introitem.php' (we will discuss this later)
• Paste all six (6) newly named files (ie: news.xml, news_children, etc) into the 'templates > mytemplate > html > com_content > category' directory
• If you have your own template replace the 'mytemplate' name with your template name
• If you don't see 'html > com_content > category' in your template, then create those folders before pasting the files.
• After pasting those six (6) newly named files in the 'category' directory, open the 'news.xml' file

Look for a the following code (around line 3):

<layout title="COM_CONTENT_CATEGORY_VIEW_BLOG_TITLE" option="COM_CONTENT_CATEGORY_VIEW_BLOG_OPTION">
<help key = "Menu_Item:_Category_Blog" />
<message>
<![CDATA[COM_CONTENT_CATEGORY_VIEW_BLOG_DESC]]>
</message>
</layout>

Change to:

<layout title="My Template News Articles" option="category_news">
<help key = "Menu_Item:_Category_Blog" />
<message>
<![CDATA[COM_CONTENT_CATEGORY_VIEW_BLOG_DESC]]>
</message>
</layout>

It is recommended that you create your own custom language strings instead of hard-coding the two changes, but for the sake of simplicity, we will name them in the file. The 'layout title' is what you would see when selecting the category page type when creating a new menu link for an article category page, while the 'option' is the name of the layout file that you can later use to assign custom css (if you display the page $option, $view, $task, $layout, and other page values in the body of your template).

Understand what each file does

There are six (6) files that we are working with. All should have been renamed and the .xml file should now have the changes saved from the last section. Let's dig into what each file does.

1. news.xml - This file contains the new name and settings page you view when creating a new menu item for your custom category page. Don't change any of the other values (other than the two shown in the previous section) in this file as it should be the most recent and updated copy of the original blog category layout file that comes with Joomla 5.
2. news.php - This is the "parent" file that sets the parent html structure that also defines and calls the other four (4) files listed below.
3. news_item.php - This file displays only the 'Leading Articles' that you designate under the 'Blog Layout' tab of the menu settings for this page.
4. news_links.php - This file displays only the 'Links' that you designate under the 'Blog Layout' tab of the menu settings page.
5. news_introitem.php - This file will eventually display only the 'Intro Articles' that you designate under the 'Blog Layout' tab of the menu settings page. (We will add this into the 'news.php' file later.)
6. news_children.php - This file displays any sub-category (children) of your current category. If you don't have any sub-categories, this file won't display anything.

Create Your Category & Menu Link

For this website, used the following steps to set-up our new custom category page:

1. Create a new 'Category' titled 'Joomla! Tips'
2. Create seven (7) new articles under the 'Joomla Tips!' category.
3. Create a new menu link Titled 'Joomla! Tips' and select 'My Template News Articles' (or whatever you named it in the 'news.xml' file) from the 'Articles' menu type
4. Select the 'Joomla Tips' category
5. Click the 'Blog Layout' tab and enter the following settings:
   
   1. '# Leading Articles' - '1'
   2. '# Intro Articles' - '3'
   3. '# Links' - '3'
   4. Leave everything else as 'Use Global'