Joomla web application development guide part 2

Last updated

Template development is one of the most vital parts of Joomla development because it allows you to change the website look and its user interface. The built-in templates are good enough for general websites. But, if you need a specialized user interface for the application, you have one option – design and develop your website template.

In part 1 of this guide, you learned that you could extend the Joomla framework by creating custom extensions like; module, plugin, component, library, and template. In this part 2, I will describe how you could create a new template for the Joomla framework. 

Every website looks different, and therefore, we could not copy one site template and use it for another site. And when you need a unique look for your website, you have the following two options;

  1. Find the existing template and install it.
  2. Create your template and install it.

You can find professional templates from https://www.joomshaper.com/joomla-templates, https://www.joomlart.com/joomla/templates, and https://themeforest.net/category/cms-themes/joomla.

I have recommended these websites to my clients, and many of them used existing templates for their websites. It saves your development time, and you can start promoting your website at the earliest.

The following sections give you thorough knowledge about Joomla template development. And you could learn how you can start developing your template for the Joomla websites.

Prerequisite knowledge

You should have basic knowledge of the following technology to understand the basics of user interface design. And if you do not have programming knowledge, you can still create the template as it requires less or no programming.

  1. HTML: You can use it to create a document and its formatting. You can not develop the basic layout without HTML.
  2. CSS: You can use it to decorate your Html document. Otherwise, your page looks too bare and boring to like it.
  3. Javascript: You can use it to glue the small user-initiated actions to the Html document. In a simple template, you may not need Javascript. But for creating a professional and interactive template, you need to have Javascript functions.
  4. PHP language: You can use it to put business logic behind template designing. You do not need a deeper understanding of PHP for creating a Joomla template.

Create template directory structure

The Joomla template directory has the following structure;

template_name

css

image

media

js

index.php

html

error.php

template.xml

template_thumbnail.png

You can easily understand the directory structure by looking at it. It is simple and obvious. I will explain each directory in a later section.

Right now, you can start creating these files and folders without any content in them.

Create template detail xml file

Start designing the template layout using any image editor or vector graphic editor. The layout image can be used as a thumbnail later. The idea behind creating the template layout is to identify positions where all the content will go. And the template layout tells another user about the particular user interface design.

For example, my main navigation bar should be on top. And footer should be on the bottom. There would be archive folders on the right side.

These are just examples. But you can decide your template formatting. And do not forget to include the thumbnail of the template layout.

The next step is to create templateDetails.xml file for the Joomla extension. I captured the image of the existing templateDetails.xml file so that you can see all the required information.

The best way to create xml file is to copy from an existing template and then update important information for the corresponding tags.

And the following is the detail of the required tags;

  1. Name: you can give a name to your template.
  2. Author, Copyright, License are self-explanatory tags.
  3. Description: you can describe the template.
  4. Version: you can give the version number of the template design.
  5. Files: You can give all files and folders names here.
  6. Positions: This tag is a required and important one. It gives you the ability to name small user interface components like; main-navigation-bar, main-component, right-side-bottom-interface, and similar. You can see these position names while selecting the module position.

Add template configuration

You don’t want to make your template rigid. The rigid template does not allow any configuration option. And you need to update the source code for changing the configuration. And a non-technical person finds it hard.

But, a flexible template gives many configuration options. And these options allow the template to take a different form depending on the configuration values.

For example, your user wants to change the color of the navigation bar or background color. Should he change it from the source code? No.

The answer is to allow a user to change or configure the background color or navigation color.

The first thing you should list all the configurable options for the template, and then you can start adding them to your templateDetails.xml file.

The following image shows how to create configuration parameters.

Extend another component view template

Joomla configures itself using naming conventions. And if you need to change its inner working, you need to follow the Joomla convention.

For example;

you can create a model – user - in the following convention;

  1. create a model file in the model directory as model > user.php
  2. In the user.php file, the class name should be ComponentNameModelUser

Now, whenever you are creating a user model, Joomla gives the correct model.

In the same way, you can extend another component view in your template.

For example;

If you want to give the article component another look, you can create a template in the following way;

html > com_content > article > default.php

You can copy the existing default.php file from the content component and then modify it for custom design.

Similarly, you can extend any component view to give it a unique look according to your template design.

Custom error page templates

Why should you have boring error pages? The error page gives you opportunities to take care of your user and navigate him to the right page.

Joomla template allows you to create a custom error page for each type of error like; 404, 303, and similar.

You can create error.php file for all generic errors. And if you want to create a specialized error page, you can subscript the error file.

For example;

Generic error file: error.php

Page not found error file: error_404_template.php

Page speed and web vitals

Remember, you are creating a custom template, and therefore, you need to manage the page speed and web vitals.

For example; The page speed detects the render-blocking CSS style sheet and reports negative ranking to Google. And therefore, you should manage the render-blocking CSS and other Javascript files.

Also, you could minimize all other supporting files; Html, CSS, Javascript, Image, and other files.

That is the main benefit of creating a custom template, and you can manage what could be part of the template. And you can control all aspects of it.

At last, if you find any trouble while creating your template, you can contact me without hesitation. I will respond to you at the earliest.