Hosting Tutorial & Guide

How to Use Multiple Templates for the Frontend of a Joomla 3 Website?

updated on Apr 09, 2015
How to Use Multiple Templates for the Frontend of a Joomla 3 Website? Joomla users can create a variety of styles and looks for different pages, and we're going to explain how to install and assign multiple templates to achieve this outcome. Note that, this tutorial assumes you're running a Joomla 3 site, starting with a short introduction to the templating system as below.

Short Introduction to Joomla Templates

In short, template is such a powerful tool that takes control of the overall layout and outlook of a Joomla website. In the further, it brings together common modules, components and elements as well as cascading style sheet for your website. Pay attention that, both the frontend and backend of a website have templates. To maximize the amount of control you may have, it is particularly important to look for each template before downloading and installing it.

By default, Joomla is included with several templates that include Beez3, Hathor, isis and protostar. As a matter of fact, there are many providers and developers available throughout the Joomla community, and you can also find and use a wider range of Joomla templates, be commercial or non-commercial, from the third-party vendors. Of course, it is possible to make a custom template provided that you have been quite skilled in Joomla already.

Download & Install a Template

As you may suspect, the first thing you need to do is download and install the templates that will display for the frontend of a Joomla site. Keep in mind, the chosen templates should be compatible with the version of Joomla that you are using now. Once you've settled down, you can log onto the administrator panel and go to "Extension" > "Extension Manager" as follows.

Joomla Multiple Templates - Extension Manager Section

From the "Install" tab, there are multiple ways to get your template installed as is listed in below. Note that, all those approaches require your webserver have the write access to the web space.
  1. Install from Web – that allows you to make a selection of an extension that is available from the Joomla Extension Directory (JED).
  2. Upload Package File – that allows you to upload an extension package from your local computer by clicking this "Choose File" button.
  3. Install from Directory – that allows you to type in the "Install Directory" where the unzipped package is located on your own web server.
  4. Install from URL – that allows you to fill in the URL to the package, and it requires your environment to be properly configured ahead of time.

Joomla Multiple Templates - Upload & Install Templates

At this place, we would like to choose the "Upload Package File" option to select the .zip package from the local folder. Once uploaded, make a hit on this "Upload & Install" button and you will be notified with a success message if nothing goes wrong. For more details about the installation of a Joomla 3 template, you can refer to this post.

Joomla Multiple Templates - Installation Success Message

Change the Default Templates

Having installed each template, you should navigate to "Extensions" > "Template Manager" so as to tell your Joomla to utilize that specific template. From the following snapshot, you will see all of the default and newly-installed templates. In the meantime, there are two golden star icons – one is meant for the backend or "Administrator", and one is meant for the frontend or "Site". To change the default style to your preferred one, you can hit the correspondent shadow of a template's default star in this "Default" column.

Joomla Multiple Templates - Change Default Template

Assign Multiple Templates for the Frontend

Now that you've re-defined the outlook of a Joomla site, it's time to assign more than one template for your site's frontend. To do that, there are two different ways for your reference:

Template Manager Method
From the same "Template Manager" page, you have the ability to assign multiple templates to different pages. As for details, choose a template that is not set as the default one and move your mouse over its name. Just click on this name and you will be taken to a new "Edit Style" page as is shown.

Joomla Multiple Templates - Template Manager Method

From here, you can go to the "Menus Assignment" tab and select the pages/menu items that you would like to feature the template. Note that, any pages that you finally leave unselected from this "Toggle Section" area will display the "default" template you've specified in the last step. Do remember to click the top-right "Save & Install" button to take effect.

Menu Manager Method
Alternatively, you can also use menu manager method to achieve the same goal. To be precise, go to "Menus" > "Menu Manager" and open up the "Menu Items" as follows. From the below "Edit Menu Item" page, select out the template that you want to use exclusively for this menu item from the drop-down "Template Style" list. At the same time, you can specify the "Menu Item Type" as you like.

Joomla Multiple Templates - Menu Manager Method

Once done, you only need to click on the same "Save & Close" button to save changes. Having done with all settings, return to the frontend of your Joomla website and you will notice a difference which is almost like the following picture.

Joomla Multiple Templates - Sample Joomla Template