Articles grouped by category can be quickly and easily displayed on your website. This tutorial explores two types of layouts, the Category Blog Layout, and Category List layout. The Category Blog Layout presents articles in a rich layout where each article is displayed with its title, an optional image, article details (such as the author or publication date) and either the full text of the article or an article teaser and Read More link. The Category List layout displays a simple list of article titles that link to the article. 

This tutorial demonstrates how to create both layout types. 

Prerequisites

• Create two or more articles with a common category.
  • 2.1 Creating an article and menu item
  • 2.2 Creating a Category and Sub-Category
• Log into Joomla as an administrator.
• From the administrator home page, open the frontend of your site using the link on the right side of the header.
  • This link will have your site name, and hovering over it will indicate that it opens the frontend.
  • The link will open the frontend in a new tab or window. 
  • Keep both these tabs open as the tutorial will have you switch between them.
• In the frontend, find the main menu and note the menu items. We will be adding two items here.

Creating a Menu Item for a Category of Articles

This tutorial uses standard Joomla test data in which there are three articles in a category called Joomla.  We'll be making a menu item called Joomla Article Blog and Joomla Article List that will display these articles on our website. The tutorial uses the same articles and category to create both layouts (so only one set is required).

You should choose a category and menu item names that make sense for your site. Make sure there are two or more articles in your chosen category so you can see the result, and each article should contain a couple of paragraphs of content (lorem ipsum is fine).

Create a Category Blog Layout

The Category Blog menu item creates a page that displays a list of articles in a blog type layout. Each article includes an image, article details (e.g. author name and publication date), and the text of the article. 

Steps

1. In the left side menu of the administrator homepage, expand Menus and click on Main Menu.
   • A list of menu items is displayed.
2. Click on the New button.
   • A new-menu-item form appears.
3. Enter a title (required).
   • We chose Joomla Article Blog but you should choose a name that makes sense for your site.
4. In the Menu Item Type field click the Select button.
   • A popup form appears.
   • Expand Articles then click on Category Blog.
   • The popup disappears.
5. In the Choose a Category field select your chosen category from the popup form.
   • We Chose the Joomla category but you should choose the category that makes sense for your site.
6. Click Save & Close.
   • The form closes and your new menu item appears in the list of main menu items. 
7. Switch to the frontend.
8. Refresh the page then find the new link in the Main Menu. Click to follow it to view a blog layout of the articles in your chosen category.
   • Clicking on the title of any article will take you to the full article.

Adding Read-More Links

Displaying the entire article in the blog layout often isn't practical; what's usually wanted here is the first part of the article, a teaser or taster, and then a Read More link that can be clicked to view the full article. Here's how to do that.

Steps

1. Return to the backend.
2. Edit one of your articles by clicking on Articles under Content and then clicking on one of your articles.
3. Insert your cursor below the text you want to appear in your teaser taster (and above the remaining text in the article).
   • Add a new line between paragraphs if necessary.
4. In the editor toolbar, pick Read More from the CMS Content dropdown.
   • Note that a red dotted line appears.
5. Click the Save & Close button to save the article.
6. Return to the frontend and refresh your page. Note that a Read more button appears under the teaser taster text.
   • Clicking on the link will take you to the full article. 

Creating a Category List Layout

The Category List menu item creates a page that displays a list of articles in a simple list. Clicking on the title of an article takes you to the full article. 

Steps

1. Return to the backend.
2. In the left side menu, expand Menus and click on Main Menu. A list of menu items is displayed.
3. Click on the New button. A new-menu-item form appears.
4. Enter a title (required).
   • We chose Joomla Article List but you should choose a name that makes sense for your site.
5. In the Menu Item Type field click the Select button.
   • A popup form appears.
   • Expand Articles then click on Category List.
   • The popup disappears.
6. In the Choose a Category field select your chosen category from the popup form. We chose the Joomla category but you should choose the category that makes sense for your site.
7. Click Save & Close.
   • Your new menu item appears in the list of main menu items. 
8. Return to the frontend and refresh the page.
9. Find the new link in the Main Menu and follow it to view a list layout of the articles in your chosen category.
   • Clicking on the title of any article will take you to the full article.

Concepts 

• This tutorial demonstrates a powerful capability of Joomla. By organizing your articles by category you can easily and quickly make lists of those articles available in either a blog format or as a simple list.
• The nature of the menu link determined the layout; the same articles and category were used for both.