14

Child Templates

In the previous chapter, we explored overrides, understanding how to customize the look of a website, as well as how to override language strings.

We’ll now discover child templates, a brand-new feature introduced in Joomla 4.1 that allows you to create derived styles from a template.

After reading this chapter, you will be able to do the following:

• Understand what child templates are
• Understand the differences between child templates and overrides
• Understand the differences between child templates and duplicated templates
• Create a child template

What is a child template?

Child template management is a new feature of Joomla that allows you to create derived templates from your installed templates.

A child template is a template that uses all PHP, JavaScript, and CSS code of its parent template, inheriting all the parent template functionalities and characteristics.

The main purpose of using child templates is to prevent losing changes to the template while updating the original parent template. With a child template, you can customize the code of your template operating on the child’s files, ensuring smooth updates to the parent templates.

It is also possible to amend the number and type of module positions in the child template differently from the parent template.

Does every template support child templates?

Not all Joomla templates support child templates yet. It is an optional characteristic for templates. You can check whether a template supports the creation of child templates by checking the templateDetails.xml manifest file, ensuring that it has the following code in it: <inheritable>1</inheritable>. If this string is present in the manifest file, then you can create child templates. It’s also important that the template uses the /media folder for all static assets (images, CSS, SCSS, and JavaScript files).

A child template can be used as a normal template, but it inherits all the code from the parent template. Every part can be modified as needed using overrides. As usual, overrides take precedence over inherited code, even in child templates.

When created, a child template has only one file, called templateDetails.xml, which includes a reference to the parent template – for example, <parent>cassiopeia</parent> – indicating the parent template to which it’s connected to the system. Additional files may be added through overrides as needed.

Child templates help you keep the original template files untouched. A template that supports this feature can have unlimited child templates.

Child templates are a great resource to be used when you want to do the following:

• Massively apply overrides to your template
• Differentiate your template between languages

Child templates also allow you to avoid duplicating templates when you just want to edit some files of the template, reducing the number of files to maintain.

In the next section, we’ll see how to create a child template in your Joomla installation.

Creating a child template

To create a child template, open System Dashboard and click on Site Templates.

You can see whether your template supports child templates thanks to the Parent label next to the name of the template, as in Figure 14.1.

Figure 14.1 – Child templates | Support for child templates

From the list of templates, open your current frontend template. In our example, we’ll use Cassiopeia, which supports child templates.

Click on the Create Child Template button in the toolbar, as highlighted in Figure 14.2.

Figure 14.2 – Child templates | Create Child Template

In the pop-up window, you are requested to insert the name of the child template and to select one or more styles to be included in your child, as in Figure 14.3.

Figure 14.3 – Child templates | Create Child Template | Name and styles

Click on the Create Child Template button in the pop-up window to complete the procedure.

A message is displayed to confirm the creation of the new child template. To check the child template just created, you need to close the current template through the Close button in the toolbar. The list of available templates, including child templates, is displayed in Figure 14.4.

Figure 14.4 – Child templates | A child template

As you can see in the previous figure, the child template includes the name of the parent template in its name – in our example, where the child is called mychild, the child template is called Cassiopeia_mychild. Furthermore, under the name of the template, you can see that there is a label that marks it as Child of Cassiopeia, highlighting the fact that it’s a child template derived from Cassiopeia.

By clicking on the name of the child template, we can explore the options and the file structure of our child template, as shown in Figure 14.5.

Figure 14.5 – Child templates | Manage a child template

The structure of files and folders of the child template is much simpler than the one of the parent template. In fact, it only contains templateDetails.xml in the /templates/cassiopeia_mychild folder. There is also a media folder to contain all the static assets: /media/templates/site/cassiopeia_mychild. This folder and its subfolders are empty – this will make our child template inherit original files from the parent template.

What are assets?

With assets are intended all static files: CSS, images, JavaScript, and SCSS. From Joomla 4.1 onward, assets are saved under the media folder. Older templates, which don’t support child templates, have static assets saved under the main template folder.

We can add files and assets to our child template, as well as operate changes to the child definition file, by simply editing the templateDetails.xml file.

For example, if you want to add a new module position in your child template, just open the templateDetails.xml file and define your desired position, simply adding the <position>my-position-name</position> string in the position definition block, as highlighted in Figure 14.6:

Figure 14.6 – Child templates | Adding a module position to a child template

With this XML code, we added a module position called my-position-name in our child template. The position can be then used for modules of our website.

With child templates, you can also override the original template’s index.php file or CSS files. Just copy them from the parent template to the child’s folder and customize them as per your needs.

While creating a child template, the system also creates one or more template styles connected to the child template, according to the number of styles selected during the creation of the child, as in Figure 14.7.

Figure 14.7 – Child templates | Child template style

Template styles can be customized through the available options, as can be done with the parent template style, as well as set as the default template style for the website or assigned to one or more menu items, as with normal template styles.

Child templates for the backend

Child templates can also be created for backend templates that support them. Atum, the default Joomla 4 backend template, supports child templates. You can create a child template for your backend in case you want to operate massive changes and overrides so that you can benefit from the other advantages of child templates. With the child template, you create a new template style for Atum that is connected to your child template, and you can set it up as the default template for the backend of your website. Remember that in the backend, you can only assign a default template style for the whole backend interface, unlike with the frontend – you cannot assign a specific template style on a menu item basis.

In the next section, we’ll talk about child templates and overrides.

Child templates and overrides

Child templates are the greatest example of overrides, and they are even more powerful than them. This is because many third-party templates include already overrides of some standard parts in the template’s /html folder, and these overrides may be modified by template updates. Overrides made in child templates, instead, are safe from template and system updates, as they are in a separate position and are not altered.

In a child template, you can make all the desired overrides with all the features that we discovered in Chapter 13, Customize Everything with Overrides. Also, in this case, we can create overrides for Modules, Components, Plugins, and Layouts.

When you create an override in a child template, the /html folder is created automatically in the child’s folder structure and, as usual, it contains all the overrides created for the child template, as in Figure 14.8.

Figure 14.8 – Child templates | Overriding a child template

Overrides can be modified directly in the template manager, as we expect.

Also, in this case, you can override everything, creating a unique template for your website, and, if you don’t need an override anymore, just remove the override folder. For each file that is not present in the child template, the parent template’s corresponding one will be used as a fallback.

In the next section, we will explore a comparison between child templates and the option to duplicate templates.

Child templates or duplicated templates

Prior to the availability of the child templates in Joomla 4, it was a common practice to duplicate a template when you needed to heavily edit it.

Duplicating a template means creating a new template, simply copying files, folders, and assets from a template. This, however, makes the duplicated template stop receiving updates.

Furthermore, duplicating a template means having all the template files twice on the filesystem: one copy for the original template and the other copy for the duplicated template. This approach makes maintenance more difficult and time-consuming, as well as increasing the risks of leaving duplicated templates without updates applied due to fear of losing all the changes made.

Child templates, instead, host just the needed files, those files that are changed from the parent template, re-using all the other files. This is a great plus for maintenance, ensuring your website is more up-to-date and secure.

With this comparison of child templates and duplicated templates, we have completed our exploration of the child template feature. Put into practice what you have discovered with the proposed exercises.

Exercises

It’s time to apply the knowledge about child templates acquired in this chapter.

Exercise 1 – creating a child template

In this exercise, you are required to create a child template in your Joomla 4 installation, using Cassiopeia as the default frontend template.

1. Open System Dashboard in your backend.
2. Click on Site Templates, and then on Cassiopeia Details and Files.
3. Click on Create Child Template, set the name to MyChild, and then click on Create Child Template in the popup.
4. The child template has been created. Click on the Close button to go back to the list of templates, and then click on Cassiopeia_MyChild Details and Files to open it.
5. Create a file called custom.css in the /media/templates/site/cassiopeia_mychild/css/ folder.
6. In the file, type the following CSS code (we’re going to change the color of the footer that we set in Exercise 1 of Chapter 13):

   .myfooter {

     font-size: 13px;

       font-weight: 600;

     color: #FF4500;

   }
7. Click on Save & Close to save the changes. Then, click on Close.
8. From the list of templates, click on the Styles button to move to the Site Template Styles page.
9. Set Cassiopeia_mychild – Default as the default template style for your website.
10. Open the website preview to check the changes. The footer text should be red.

Summary

In this chapter, we explored the Child Templates functionality included in Joomla. We compared child templates to template overrides and copies of the same templates.

In the next chapter, we’ll explore template frameworks and their options.

Further reading

A deep dive into Joomla child templates – https://magazine.joomla.org/all-issues/may-2022/a-deep-dive-into-joomla-child-templates