Responsive Joomla Templates Tutorial

Let’s Learn How To Create And Setup Responsive Templates In Joomla.

Build highly professional and responsive layouts with Joomla which offers a bunch of features such as multilingual, fully customizable and rich color schemes.

Open Source Responsive Joomla CMS Templates

A well-designed business website plays a vital part to bring and retain the visitors by giving them ease of navigation. Full featured Joomla facilitates its users with a number of templates that control the aesthetic of a business website.

During the development phase, the placement of design elements are very critical to obtain:

  • Consistency
  • Easy Navigation
  • Simplicity
  • Mobile Compatibility
  • Readability

Here comes the Joomla templates. This open source software gives provision to develop or use predefined templates for all the web pages rather than writing code for each page separately.

In this blog post, we will learn the following things on how to create and setup a user friendly template in Joomla.

What is a Joomla template?

Joomla provides templates for the front end as well as for the back end. It comes with many ready made templates and it does offer developers to build custom templates according to their use cases. There are two types of templates in Joomla.

Front-end Templates: Related to the user facing part of a business website.

Back-end Templates: These templates are linked to the business logic of a site.

How to create a simple responsive Joomla template?

Before jump into this section, make sure you have an understanding of the following:

  • HTML
  • CSS
  • Javascript
  • PHP

So, creating custom templates in Joomla has never been so hard and complex. However, let’s start to create our first Joomla template.

Setup directory structure

First of all, create a folder named “mytemplate” inside “templates” folder.

Create following files inside “mytemplate” folder :

  • index.php : This is the core file that contains HTML and PHP code for the whole template pages.
  • templateDetails.xml : This file contains the meta data of the template and is compulsory for being noticed by Joomla.

Now, create three folders inside “mytemplate” folder with the following names:

  • js : This folder will contain all the Javascript files needed for the template
  • css : All CSS files for styling will come into this folder
  • images : Images used by the template will reside in this folder

Create a css file named “ template.css ” inside “css” folder.

* mytemplate/
** css/
*** template.css
** images/
** js/
** index.php
** templateDetails.xml

Eventually, this is how the directory structure will look like.

Lets put some code

Put this code in the templateDetails.xml file.


<?xml version="1.0" encoding="utf-8"?>
<extension version="2.5" type="template">
	<name>mytemplate</name>
	<creationDate>2020-08-26</creationDate>
	<author>Mustafa</author>
	<authorEmail>Mustafa@example.com</authorEmail>
	<authorUrl>http://www.example.com</authorUrl>
	<copyright>Mustafa 2020</copyright>
	<license>GNU/GPL</license>
	<version>1.0.2</version>
	<description>My New Template</description>
	<files>
		<filename>index.php</filename>
		<filename>templateDetails.xml</filename>
		<folder>images</folder>
		<folder>css</folder>
                <folder>js</folder>
	</files>
	<positions>
		<position>breadcrumb</position>
		<position>left</position>
		<position>right</position>
		<position>top</position>
		<position>user1</position>
		<position>user2</position>
		<position>user3</position>
		<position>user4</position>
		<position>footer</position>
	</positions>
</extension>

As mentioned earlier, this file contains the metadata about the template which is defined between markup tags. However, you can change the general information like name, author and description.

This file also contains information about the other files and folders that are used by the template.

Now, open the index.php file and start putting the following code:

<?php defined( '_JEXEC' ) or die( 'Restricted access' );?>

This file will start with this line which prevents others to read your PHP code.

<!DOCTYPE html>

This is to let browser know about the document type.

<html xmlns="http://www.w3.org/1999/xhtml" 
   xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" >

HTML documents starts with this line and the xmlns attribute tells the xml namespace for the document.

<head>
    <jdoc:include type="head" />
    <link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/template.css" type="text/css" />
    ?php%20echo%20$this-baseurl%20?/templates/?php%20echo%20$this-template%20?/js/index.js

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" type="text/css" />

    https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js
    https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js
</head>

First line after the <head> tag tells Joomla to put header information like metadata information and page title.

There is a link to the external style sheet in the second line and the third line links the external Javascript file.

The rest of files enable the Bootstrap into the template.

<body>

    <!-- main container -->
    <div class='main_container'>
    
        <!-- header -->
        <div class='header'>Header</div>
    
        <!-- mid container - includes main content area and right sidebar -->
        <div class='mid_container'>
    
            <!-- main content area -->
            <div class='main_content_area'>
    
            </div>
    
            <!-- right sidebar -->
            <div class='right_sidebar'>
                <jdoc:include type="modules" name="position-7" style="well" />
            </div>
    
            <div style='clear:both;'></div>
    
        </div>
    
        <!-- footer -->
        <div class='footer'>
            Footer
        </div>
    
    </div>
</body>

The body section starts after the head section contains all the data which will be reflected at the template for the user to view and navigate.

<jdoc:include type="modules" name="position-7" style="well" />

This statement is called jdoc statement which is used to instruct Joomla to add a module named “position-7”. There are several jdoc statements that are frequently being used while creating Joomla website templates.

This is the final complete index.php file with all the code required for a basic Joomla template.

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" >
    <head>
        <jdoc:include type="head" />
        <link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/template.css" type="text/css" />
        ?php%20echo%20$this-baseurl%20?/templates/?php%20echo%20$this-template%20?/js/index.js
    
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" type="text/css" />
    
        https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js
        https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js
    </head>

    <body>
    
        <!-- main container -->
        <div class='main_container'>
        
            <div class='header'>Header</div>
        
            <!-- mid container - includes main content area and right sidebar -->
            <div class='mid_container'>
        
                <!-- main content area -->
                <div class='main_content_area'>
        
                </div>
        
                <!-- right sidebar -->
                <div class='right_sidebar'>
                    <jdoc:include type="modules" name="position-7" style="well" />
                </div>
        
                <div style='clear:both;'></div>
        
            </div>
        
            <!-- footer -->
            <div class='footer'>
                Footer
            </div>
        
        </div>
    </body>
</html>

Everything is in place for a very basic template. Now, it is time to install it on the Joomla server and see how it goes on.

How to install Joomla Template?

Joomla template installation process is quite straight and easy. There are the following steps to install:

Go to “Extensions -> Manage – > Install

Joomla install setup image

Here you can see your newly developed Joomla template in the list as shown in the image below.

Joomla templates list

Now, select the template, hit “Install” and a success message will appear about the successful installation.

After the template is installed, you can access and modify the template files within the control panel of Joomla and preview the changes from “Template Preview” option.

Joomla

Now, you can view your first Joomla template in to the browser!

To sum up 

A good and responsive template is the foundation for overall site modeling. Templates at Joomla are multifunctional and can be used for various projects. From writing code to the installation of the template becomes very simple with the help of an intuitive admin dashboard. Joomla provides complete control over the template development to meet the user desires.

As CMS software category is under consistent improvements and more tutorials about other content management systems will be added to the list, please stay in touch with the Content Management System section for regular updates.