Joomla CCK Layouts: Complete Guide to Creating Custom Joomla Pages and Forms

• Add layout
• Show layout
• Show all instances layout
• Show category
• Show all category
• Show Calendar
• Show/Add Review layout
• Add Request form
• Add/Buy Request form
• CCK add Rent Request Form
• Search layout

What Is a Joomla CCK Layout?

A Joomla CCK Layout is a flexible page or form structure that allows you to create custom content displays, forms, listings, and website pages in Joomla. With OrdaSoft Joomla CCK, you can create almost any type of Joomla page or form you need. For example, you can build:

• Application forms;
• Booking forms;
• Contact forms;
• Product listings;
• Product catalogs;
• Real estate listings;
• Office locations on a map;
• Search forms;
• Review and comment forms;
• Rental and booking forms;
• Custom content pages.

The Joomla CCK Layout Manager gives you a visual way to build these pages using Drag & Drop, Joomla modules, custom fields, and the MCE editor. You can arrange your content into rows and columns and create responsive Joomla pages that work across desktop, tablet, and mobile devices. Once you create a layout, you can save it as a template or mock-up for creating additional pages with a similar structure. You can also display your Joomla CCK layouts through Joomla menu items and modules.

How Joomla CCK Layouts Work

A layout is an important part of the Joomla CCK content structure. It determines how your Instances (such as products, properties, cars, events, or other custom content) are added and displayed on your website. In simple terms:

Instance = your content.

Layout = how the content is added or displayed.

For example, if you are building a real estate website:

• An Entity can represent a property.
• An Instance can represent one particular house or apartment.
• An Add Layout can be used to add a new property.
• A Show Layout can display the property details.
• An All Instances Layout can display multiple properties.
• A Category Layout can display properties from a specific category.
• A Search Layout can allow visitors to search for properties.

Different Joomla CCK layouts are designed for different tasks.

Add Layout #

The Add Layout is one of the most important Joomla CCK layouts. Without an Add Layout, you or your users cannot create new Instances on the website. This layout is used to create forms for adding new content, such as: A new house, A new car, A new product, A new event, A new directory listing, Any other custom Instance.

You can configure the Add Layout to work from both the Joomla administrator area and the frontend of your website.

The Send Button field is especially important when creating an Add Layout. It allows the information entered by a user to be submitted and saved in the database. For frontend Add Layouts, the Send Button is required to submit the completed form.

Show Layout #

The Show Layout is used to display Instances that have already been created. Without a Show Layout, your Joomla CCK content cannot be properly displayed on the frontend. An Add Layout and Show Layout work together:

Add Layout → Create Instance → Show Layout → Display Instance.

You can create as many Show Layouts as you need for different parts of your Joomla website. Two types of Show Instance layouts are especially useful.

Show All Instances Layout #

The Show Instance Full Details Layout displays all the information available for an Instance. For example, on a real estate website, it could display:

• Property title;
• Main image;
• Description;
• Price;
• Address;
• Number of rooms;
• Property area;
• Additional custom fields;
• Other property information.

Use this layout when you want visitors to see the complete details of an individual item.

Show Instance - Short Details Layout

The Show Instance Short Details Layout displays only the most important information about an Instance. For example:

• Image;
• Title;
• Price;
• Address.

This layout is useful when you need to display many Instances at the same time. You can use the short layout in:

• Category layouts;
• All Instances layouts;
• User Instance layouts;
• Parent-Child layouts;
• Search results;
• Featured item sections.

The short layout keeps listing pages compact while allowing visitors to open the full details page when they want more information.

Show All Instances Layout

The Show All Instances Layout allows you to display multiple Joomla CCK Instances on one page. For example, you can use it to create: Product catalogs, Real estate listings, Car listings, Business directories, Event listings, Property search results. Usually, the All Instances Layout displays a short version of each item. For this reason, you should connect the Show Instance Short Details Layout to the All Instances Layout.

Recommended Structure

For a typical Joomla CCK listing, use the following structure:

1. Create a Full Details Show Instance Layout. Create a Show Instance layout containing all the fields and information you want to display on an individual item's details page.

2. Create a Short Details Show Instance Layout. Create another Show Instance layout containing only the most important information, such as: Photo, Title, Price, Address. Connect this short layout to the Full Details Show Instance Layout.

3. Create the All Instances Layout. Create an All Instances Layout and attach the Short Details Show Instance Layout to it. This creates a structure similar to: All Instances → Short Details → Full Details. This approach allows you to display many items in a compact grid or list while giving visitors access to the complete item description.

When configuring an All Instances Layout, you can choose how your Instances should be displayed. Depending on your layout settings, you can create: Grid layouts - useful for visual content such as products, properties, cars, and images. List layouts - can be more suitable for directories, search results, or content with longer descriptions.

Important Fields in the All Instances Layout. The All Instances Layout provides several useful features for organizing and navigating your content.

All Instances Map. If your Instances contain a CCK Location field, you can display your Instances on a map. This is especially useful for Real estate websites, Business directories, Hotel listings, Restaurant directories, Office locations, Local services, Property listings.

To use this feature, add the CCK Location field to the appropriate Show Instance layout used by your All Instances Layout.

Order By. The Order By option allows you to control the order in which Instances are displayed. You can also allow users to change the sorting order when browsing your listings.

Paginator. The Paginator divides a large number of Instances into multiple pages. For example, instead of displaying 100 properties on one page, you could display 20 properties per page.

Alphabetical Paginator The Alphabetical Paginator allows users to browse Instances by letter. This can be particularly useful for directories containing businesses, companies, people, or other alphabetically organized information.

Featured Layout. The Featured Layout allows you to display selected Instances using the Joomla CCK Layout Show Module. You can mark important Instances as featured and display them separately from your regular listings. Joomla CCK provides two Featured fields: Featured Click, Featured Show. These fields control how featured Instances are displayed and how many times they remain featured. When an item's Featured value reaches zero, the item is removed from the Featured Layout. These fields can be managed by the administrator.

Number of Displayed Instances. The Number of Displayed Instances setting determines how many items should be displayed when the layout is used as a module. For example, you can use this setting to create modules such as:

• Featured Properties;
• Latest Products;
• Recently Added Cars;
• Latest Listings;
• Popular Items.

The How Many Items Per Page setting controls the number of Instances displayed on each page when pagination is enabled.

Link Short Details to Full Details. When you display multiple Short Details layouts, visitors need a way to open the complete information for an Instance. You can configure fields such as the image or title to link to the Full Details Show Instance Layout. In newer versions of Joomla CCK, this option is configured through the field settings. Open the Show Instance layout that you attached to your All Instances Layout. For the field you want to make clickable, configure the layout that should open when the visitor clicks it. For example: Property Image → Full Property Details or Product Title → Full Product Details. This creates a natural navigation path from a listing page to an individual item page.

Show Category #

The Show Category Layout is used to display one category and the Instances belonging to that category. For example, on a real estate website you could have: Real Estate, Apartments, Houses, Villas, Commercial Properties.

A Show Category Layout could display all properties assigned to the selected category.

Category Field RequiredFor the Show Category Layout to work correctly, your Instance needs to have a Category field. When creating an Instance, assign it to the appropriate category. The category information can then be used to organize, filter, and display your Instances. The Show Category Layout works similarly to the All Instances Layout, so the same principles for displaying Short Details and Full Details can be applied.

Show All Category #

The Show All Categories Layout displays all categories created in Joomla CCK. This is useful when you want visitors to first select a category and then browse the Instances belonging to that category. For example Vehicle Directory: Cars, Motorcycles, Trucks, Buses. As with the Show Category Layout, Instances need to contain the appropriate Category field so that they can be organized and displayed correctly. You should also create a layout for displaying an individual category. This layout can then be used repeatedly when the All Categories Layout displays multiple categories.

Show Calendar #

The Show Calendar Layout allows you to display Joomla CCK Instances in a calendar format. It is particularly useful for websites that contain events, appointments, schedules, or other date-based information. The Calendar Layout works similarly to the Show All Instances Layout but adds calendar-specific functionality. One useful feature is the ability to export calendar information to Google Calendar.

How to Set Up a Joomla CCK Calendar

For the Calendar Layout to work correctly, you should first create an Add Layout and then a Show Layout. Both layouts need to contain a Date field, because the calendar functionality is based on the date information stored in the Instance. Next, create the Joomla CCK Calendar Layout and add the appropriate Calendar field. Depending on your requirements, you can also add:

• Navigation;
• Date search;
• Other calendar controls.

If you plan to add multiple events, we also recommend creating a Show All Instances Layout to display the events.

Calendar With TimeIf your Joomla CCK calendar needs to include time information, make sure the appropriate Rent type with time option is enabled in Joomla CCK settings.

Show / Add Review Layout #

The Show / Add Review Layout allows you to create a review and comments system for your Joomla CCK content. It can be used to let visitors leave reviews or comments about an Instance, such as:

• Products;
• Properties;
• Cars;
• Hotels;
• Services;
• Other listings.

This layout must be connected to an existing Show Layout. It works as an auxiliary or dependent layout associated with the Instance being reviewed.

Add Request Form #

The Add Request Form is a flexible Joomla CCK form layout for collecting and submitting information. You can use it to create:

• Contact forms;
• Application forms;
• Request forms;
• Inquiry forms;
• Registration-related forms;
• Other custom forms.

The Add Request Form can work as an independent form or be attached to another layout. You can also display it:

• In Joomla menu items;
• Inside modules;
• With other CCK layouts;
• Alongside articles;
• On custom Joomla pages.

This makes it useful for creating customized forms without being limited to a standard contact form.

Add Buy Request Form #

The Add Buy Request Form is designed for websites where users can request to purchase an Instance, such as a product. It is attached to a Show Layout and contains fields and functions specifically designed for purchase requests. For the purchase workflow to work correctly, the parent Instance must have a Price field. This allows the system to associate the request with the price of the selected Instance. In the Joomla administrator area, Joomla CCK provides a Buy Request Manager, where administrators can view and manage purchase requests. This layout can be useful for:

• Product catalogs
• Vehicle listings
• Real estate websites
• Service directories
• Custom marketplaces

Add Rent Request Form #

The Add Rent Request Form is designed for rental and booking functionality in Joomla CCK. You can use it when visitors need to select the beginning and end of a rental period for an Instance. For example, it can be used for:

• Apartment booking
• Car rental
• Equipment rental
• Property rental
• Other reservation systems

The Add Rent Request Form is attached to a Show Layout and is designed specifically for rental requests.

If you want to charge users for a rental or booking, the parent Instance must contain a Price field.

The Add Rent Request Layout should contain two date fields: Rent From, Rent To. These fields are essential for defining the beginning and end of the rental period. The rental information can then be used as part of your booking workflow. In the Joomla administrator area, Joomla CCK provides a Rent Request Manager, where administrators can view and manage rental requests.

Search Layout #

The CCK Search Layout allows visitors to search and filter Joomla CCK Instances. It can be used as:

• An independent search form
• Part of another layout
• A Joomla menu item
• A module
• A search form attached to a listing page

A Joomla CCK Search Layout is especially useful for websites with many listings, such as: Real estate websites, Car directories, Product catalogs, Business directories, Rental websites, Classified websites

How to Create a Joomla CCK Search Layout

To create a Search Layout, open the CCK Layout Manager and click New. Select: Search Layout. You can then use the Drag & Drop interface to move fields from the fields area into the layout. After adding a field, configure its search options according to your requirements.

Create a Number Search Slider

A number field can be used to create a convenient slider for searching by numerical values. For example, on a real estate website you could create: Price: $50,000 - $500,000 Or: Area: 50 m² - 250 m².

To create this type of search:

• 1. Add a Number field to the Search Layout.
• 2. Drag and drop the field into the layout.
• 3. Open the field settings.
• 4. Configure the appropriate options for the number range or slider.

This allows visitors to filter your Instances using numerical values.

Text Search in Joomla CCK

The Search field is important when you want to create a text-based search. Visitors can enter text into the search field to find matching Instances. For example: Search: New York. The search can then be performed against your text fields. For text fields, Joomla CCK provides settings such as:

Show. When enabled, the field is displayed to the visitor and can be used as part of the search interface.

Search. When enabled, the field can be searched by Joomla CCK even if the field itself is not displayed to the visitor.

This allows you to create flexible searches that can work across multiple fields.

Rent From and Rent To Search Fields

The Rent From and Rent To field types are particularly useful when creating a Joomla booking or rental system. They can be used to search for available Instances based on a selected rental period. For example, visitors could search for:

• Available apartments;
• Available cars;
• Available houses;
• Available equipment;
• Other rentable Instances.

To use this functionality, configure the appropriate Rent From and Rent To fields when creating your Rent Request or booking layout. The system can then use the rental dates as part of the availability search.

The Search Button is an important field for frontend Search Layouts. It allows visitors to submit their search criteria and start the search. When creating a Joomla CCK search form, make sure the Search Button is included in the layout. Without it, visitors may have no way to submit their selected search parameters.

Joomla CCK Layouts: Putting Everything Together

Joomla CCK layouts give you the flexibility to build highly customized Joomla websites without relying only on Joomla's standard article structure. Different layouts can work together to create a complete content management and listing system. For example, a real estate website could use:

Add Layout → Create a property Show Instance - Full Details → Display the complete property information Show Instance - Short Details → Display a property preview Show All Instances → Display multiple properties Show Category → Display properties from one category Show All Categories → Display all property categories Search Layout → Allow visitors to find properties Add Rent Request Form → Allow visitors to request a rental Show Calendar → Display bookings or events by date.

This combination makes Joomla CCK a powerful solution for creating custom Joomla directories, catalogs, booking websites, real estate websites, product listings, and other structured-content websites.

The Joomla CCK Layout Manager provides the tools needed to create custom pages, forms, listings, searches, calendars, reviews, and booking functionality. With the Drag & Drop layout builder and custom fields, you can create responsive Joomla pages tailored to the exact requirements of your website. Whether you are building a real estate directory, product catalog, car listing website, booking system, business directory, or custom Joomla website, understanding how Add, Show, Category, Search, Calendar, Request, Buy, and Rent layouts work together will help you build a much more flexible Joomla website.

Other documentations of Joomla CCK - website builder: