Joomla extensions

Joomla extensions are add-ons or plugins that enhance the functionality of a

Joomla website. They allow you to extend the core features of Joomla and
customize your website according to your specific needs. Joomla extensions are
available in various categories, including components, modules, plugins,
templates, and languages. Here's a brief explanation of each category:

Components: Components are the major functional units in Joomla. They are
more complex extensions that provide specific features and functionality to your
website, such as e-commerce, forums, event management, or blogging.
Components typically have their own menu items in the Joomla administrator
area and can be highly customizable.

Modules: Modules are smaller extensions that display content or features in

specific areas of your Joomla website, such as the sidebar, header, or footer. They
are often used to show menus, login forms, search boxes, social media icons, or
other interactive elements. Modules can be assigned to specific pages or positions
within your template.

Plugins: Plugins are extensions that work behind the scenes to extend the
functionality of Joomla. They can modify or extend Joomla's behavior, add new
content types, integrate with third-party services, or enhance security measures.
Plugins can be event-driven, meaning they are triggered by specific events or
actions within Joomla.

Templates: Templates are extensions that control the overall design and layout of
your Joomla website. They determine how your content is displayed to visitors,
including the colors, typography, navigation menus, and overall style. Templates
can be customized to match your branding or website requirements.
Languages: Joomla supports multilingual websites, and language extensions allow
you to translate your website's content into different languages. Language
extensions include language packs that provide translations for Joomla's core
features, as well as language switchers that allow users to switch between
different language versions of your site.

Joomla's extension ecosystem is vast and diverse, with thousands of extensions

available in the Joomla Extensions Directory (JED). These extensions can be free
or paid, developed by both the Joomla community and third-party developers.
Before installing any extension, it's important to review user ratings, reviews, and
compatibility with your Joomla version to ensure its quality and compatibility with
your website.

Access the Joomla! Extension Manager

To access the Joomla! Extension Manager access your Joomla! administrative
dashboard, then click on System -> Manage -> Extensions.
Once you open the Extension Manager, click Install Extensions.

You have four options to chose from to install your extension. In most cases, you
should go for the first option but it’s good to know that there are alternatives.
Option 1 – Upload Package File
This is one of the most convenient options available. All you need to do is press Or
browse for file to browse to the location of your extension’s archive on your local
computer and select it.
Option 2 – Install from Directory
This option is suitable for large extensions, that exceed in size the server PHP
Upload Filesize limitation and cannot be uploaded through the previous method.
Such components, modules or plugins can be uploaded via FTP to a folder in your
hosting account since FTP can transfer much bigger files. For more information on
how to use FTP to upload your extension check out our FTP Tutorial.
Once you have uploaded the extension directory to your hosting account, go to
the Extensions Manager and select the Install from Folder tab. Specify the path to
that folder. Finally, press Check and Install. Joomla! will check the folder you’ve
specified and install the extension if it is uploaded correctly.
Option 3 – Install from URL
The third available option for Joomla! extensions installation is directly through an
URL. All you need to do is to enter the direct address of the zip archive with the
extension you want to install and press Check and Install. Joomla! 4 will
download, extract and make the necessary installations for you.
Option 4 – Install from Web
This option will load the official Joomla! Extensions Directory and allow you to
choose from the many extensions uploaded there. Once you pick the desired
extension you can use the Install button to add them to your website.

Joomla! 3
Access the Joomla! 3.x Extension Manager
The first thing you need to do is to log in to the administrative area of your
Joomla! 3.x website. Once you do that, access the Joomla! 3.x Extension Manager
by going to Extensions > Manage > Install.
Once you open the Extension Manager, you have three options to chose from to
install your extension. In most cases, you should go for the first option but it’s
good to know that there are alternatives.
Option 1 – Upload Package File
This is one of the most convenient options available. All you need to do is press Or
browse for file to browse to the location of your extension’s archive on your local
computer and select it.

Option 2 – Install from Directory

This option is suitable for large extensions, that exceed in size the server PHP
Upload Filesize limitation and cannot be uploaded through the previous method.
Such components, modules or plugins must be uploaded via FTP to a folder in
your hosting account since FTP can transfer much bigger files. For more
information on how to use FTP to upload your extension check out our FTP
Tutorial.
Once you have uploaded the extension directory to your hosting account, go to
the Extensions Manager and select the Install from Folder tab. Specify the path to
that folder. Finally, press Check and Install. Joomla! 3 will check the folder you’ve
specified and install the extension if it is uploaded correctly.

Option 3 – Install from URL

The third available option for Joomla! 3.x extensions installation is directly
through an URL. All you need to do is to enter the direct address of the zip archive
with the extension you want to install and press Check and Install. Joomla! 3 will
download, extract and make the necessary installations for you.
Developing a Joomla 4 Site Template

In this extensive guide, you will learn how to create your own custom Joomla 4
template. You must already know the basics of Joomla, HTML, and CSS. I'll explain
just about everything else.
Prerequisites: You must have Joomla 4 set up on a test server (ideally, a local test
server or your own PC). You must have a basic to mid-level understanding of
HTML and CSS. Knowledge of PHP, JavaScript, and Bootstrap 5 is a plus, but not a
direct requirement.
If you're not familiar with Bootstrap, it's a CSS/JS framework that allows you to
easily add things like dropdowns, grid systems, containers, accordions, tabs, and
more to your website. It's used by most of the core Joomla 4 extensions and many
third party extensions. I'd highly recommend you familiarize yourself with it if you
haven't done so already. You can learn more and see specific examples at
getbootstrap.com.

Getting Started

Before you begin, set up Joomla 4 in a local test environment using XAMPP or
similar software.
Next, download and install the J4Starter template on your test server using
Joomla's extension installer.
I assume you already have a code editor installed. You may use whichever one
you prefer, so long as it supports HTML/CSS/PHP. Visual Studio Code is my first
suggestion, and the one that will be referenced in this guide.

Installing NodeJS and Sass

Sass is a program which adds additional functionality to stylesheets. We need it to
combine our Bootstrap and Template stylesheets together.
Before you can install Sass, you must first install NodeJS. If you don't know what
NodeJS is - it's basically a JavaScript library that lets us execute JavaScript on our
PCs (outside the browser). There are alternative ways of installing Sass without
NodeJS, but NodeJS is a very standard web development tool. So you should
probably have it installed anyways, as you'll likely need it for something else down
the road.
So to begin, download and install NodeJS if you don't already have it. The easiest
way is from the NodeJS.org website.
Once you install NodeJS, open a command prompt window (terminal, powershell,
whatever). Execute this command (type and hit enter)
npm install -g sass

NPM stands for Node Package Manager, it's a tool that allows us to easily install
the apps (or dependencies) we need (like Sass) to develop our software with. The
"install" part just means - install this, the -g means install it globally (so it can be
run from anywhere), and finally "sass" is sass. Wait for it to finish.
Close the terminal/command prompt window when complete. That is all for now.
Finally, make sure you have Sass ready to go. If you do not know what Sass is, it's
a CSS preprocessor that we'll need to compile the multiple stylesheets our
template uses into one. It's free and relatively easy to use.

What's j4starter
J4starter is a sample template I created to provide you with a base to build your
template off of. It includes all the files needed for a basic template.
Download and install j4Starter in Joomla using the extension installer, if you have
not done so already.
Next, set j4starter as your default template style from the Joomla template style
manager.
As you can see, there's not much to this template to begin with. You must style it
using HTML and CSS.
Examining The Files
Next, it's time to look at the template files themselves, so you know what you're
dealing with.

The Templates Folder

The files used by j4starter have been scattered across your Joomla directory, in a
few different locations. Some of the most important template files may be found
in the templates folder at site_root/templates/j4starter

Each of these files/folders serves a specific purpose.

 index.php
o Very important. It's the file containing the core HTML/PHP code of
your template.
 templateDetails.xml
o Very important. It's the file containing your website's details (title,
description, folder structure, and more) that Joomla looks at when
installing the template.
 joomla.asset.json
o This is where we're supposed to tell Joomla where important web
assets are stored, such as the template CSS and JavaScript files.
 language folder
o This is where Joomla loads language-specific information from. The
title of your template in English, and its basic description, for
example. Note that this is where Joomla gets its copy of the language
files from. The language files in active use are stored
under site_root/language/lang-code/tpl_j4starter.ini
  html folder
o This contains the HTML template overrides to be used with j4starter.
Joomla has default templates/layouts for every module and
component on the website. You can change how they are displayed
using overrides placed in this directory.
The Media Folder
All important media files (CSS, JavaScript, images, etc.) are stored in the media
folder at site_root/media/templates/site/j4starter
The media folder for your template contains 4 additional folders. One for the CSS
files, one for JavaScript files, one for images, and one for SCSS (Sass) files.

Examine index.php
The index.php file under site_root/templates/j4starter contains all the PHP and
HTML used to generate your template. As mentioned earlier, you do not need to
know any PHP to complete this guide, but you will need to learn a few basic
things about it. I'm writing this guide with the assumption that you don't know
any PHP. If you do, you may gloss over some things.

The Beginning (Comments and Info)

Open index.php using your favorite editor and look at it.
<?php
/**
* @package Joomla.Site
* @subpackage Templates.j4starter
* @copyright (C) YEAR Your Name
* @license GNU General Public License version 2 or later; see LICENSE.txt
 * This is a heavily stripped down/modified version of the default Cassiopeia
template, designed to build new templates off of.
*/

The first few lines at the top are all commented out. This is just general
information about the template. It's your choice if you'd like to replace what is
here with your own name, copyright, etc. It does not affect the functionality of
the template.
The <?php shows that this is the start of the PHP code. Do not change this line. It
is required. The asterisks with the forward slashes /** ... */ show the start and
end of a PHP comment. PHP comments are ignored by the program.

Using Other Classes

The next few lines look like this. You do not need to change anything here.
defined('_JEXEC') or die;
use Joomla\CMS\Factory;
use Joomla\CMS\HTML\HTMLHelper;
use Joomla\CMS\Language\Text;
/** @var Joomla\CMS\Document\HtmlDocument $this */
The first line defined('_JEXEC') or die; is a security measure. Essentially, it means
only Joomla can execute this file. Users cannot directly open the
templates/j4starter/index.php file in their browser and see anything.
The following lines with the use keywords tell Joomla to use some other class files
that are built into Joomla. These are other files the template needs to work. The
last line was commented out, I think it's a depreciated class from Joomla 3. You
may delete it or ignore it.
Loading WebAssetManager
The next two lines have to do with the WebAssetManager.
$app = Factory::getApplication();
$wa = $this->getWebAssetManager();
The WebAssetManager does what its name says it does - manages assets. We can
use the WebAssetManager to add JavaScript and CSS assets to our template with
more code.

Add Favicon
The next line deals with the site's favicon. The little icon shown in the tab at the
top of the screen, or when people bookmark your page on their computers or
phones.

$this->addHeadLink(HTMLHelper::_('image', 'favicon.ico', '', [], true, 1), 'icon',

'rel', ['type' => 'image/x-icon']);

This is telling Joomla to add a link to the favicon.ico file in the page heading. The
icon is sourced from site_root/media/templates/site/j4starter/images
You do not need to change anything with this line either, unless you rename your
favicon file. You should be fine just editing the favicon file in the template's media
folder.

Active Variables
The active variables will change to represent information from the page the user
is currently on.
// Detecting Active Variables
$option = $app->input->getCmd('option', '');
$view = $app->input->getCmd('view', '');
$layout = $app->input->getCmd('layout', '');
$task = $app->input->getCmd('task', '');
$itemid = $app->input->getCmd('Itemid', '');
$sitename = htmlspecialchars($app->get('sitename'), ENT_QUOTES, 'UTF-8');
$menu = $app->getMenu()->getActive();
$pageclass = $menu !== null ? $menu->getParams()->get('pageclass_sfx', '') : '';

For example, the $itemid variable contains the value of the page's item id from
the database. The $sitename is the name of the site set in the Global
Configuration. The $pageclass is the CSS class of the page set in the menu item
options. Do not make any changes here.

Test Parameter
Joomla allows us to easily add parameters to our template if we want to make
them customizable by the users installing them. For example, if you want your
template to have a green and a red style, you could add multiple stylesheets and
styling options. Then the user can pick what style they want to use in the
template style options. We will discuss this in more detail later. The j4starter
template comes with one "test" parameter that I have included. This line loads
that test parameter and does nothing with it.

//Get params from template styling

//If you want to add your own parameters you may do so in
templateDetails.xml
$testparam = $this->params->get('testparam');

Template Path
This line gets the path of the current template, relative to the site root.
// Get this template's path
$templatePath = 'templates/' . $this->template;
It may be useful down the road.

Load Bootstrap Component

The next line loads a single Bootstrap component. Specifically, the javascript for
the collapse component. This is required to use the Bootstrap menu layouts I
provided with j4starter. If you plan on using the included menu system, leave this
alone.
HTMLHelper::_('bootstrap.collapse');

Register WebAssets
The next three lines load the WebAssets defined in the joomla.asset.json file. By
default, these are "template.min.css" and "template.js" from the CSS and scripts
folder under the template's directory in the media folder. Leave these alone,
unless you need to add additional asset files down the road.

//Register our web assets (CSS/JS)

$wa->useStyle('template.j4starter.mainstyles');
$wa->userStyle('template.j4starter.user');
$wa->useScript('template.j4starter.scripts');
Note: As of version 1.17, I have added a "user.css" file which you may edit without
knowledge of SASS/SCSS. You can just overwrite existing styles in this file. It's
located at media/templates/site/j4starter/css/user.css

If you're curious about how the WebAssetManager found the files, or you want to
add additional files, review the above code and the joomla.asset.json file.
The joomla.asset.json file contains the actual relative link to the file.

The above code came from the joomla.asset.json file. This is giving this asset the
name "template.j4starter.user", informing Joomla that it's a "style" and telling it
the filename is "user.css"
When we call...
$wa->userStyle('template.j4starter.user');
On line 54 of index.php, it's telling Joomla to go to joomla.asset.json, find the
asset named "template.j4starter.user" and load it. Since
"template.j4starter.user" links to "user.css" the user.css file is loaded.
Set Viewport
The template sets a default viewport using the standard arguments. You should
be familiar with what viewports are. If you need to change anything here, you
may do so. The parameters I set are pretty standard.
//Set viewport
$this->setMetaData('viewport', 'width=device-width, initial-scale=1');

The Template's HTML Begins

After the last line, there is a closing statement for PHP. ?> Leave that as is. That
means it's the end of the main PHP block in our code. The code coming below
that is the start of the template's HTML. The start of the template's HTML begins
with a standard declaration of the document type, along with the head element.

<!DOCTYPE html>
<html lang="<?php echo $this->language; ?>" dir="<?php echo $this-
>direction; ?>">
<head>
<jdoc:include type="metas" />
<jdoc:include type="styles" />
<jdoc:include type="scripts" />

</head>

You should leave this section alone too, unless you know what you're doing. The
jdoc:include sections within the head element load all the scripts, styles, and
metadata defined in the PHP above. Anywhere you see the php tags with an echo
statement means that the template is using PHP to insert something here. <php
echo $variableName; ?> In this scenario, it's adding the language code of the
template (en-GB or en-US, for example) and the direction of the text (left to right
or right to left) as defined in the site settings.
The Body
Finally, we get to the body of the HTML. This is where you can write your own
HTML to define the template's layout and place elements within the page.

The j4starter template includes a very primitive layout using a Bootstrap 5

container and grid. It's up to you if you'd like to delete this all and make your own
layout, or build off the one I provided to you. I will explain the process of creating
a sample layout from scratch after we cover how the CSS works.

Basic Template Example

Now that you understand how Sass works, we can return to working on the
template's HTML in index.php. I'm going to show you how to create a basic layout
and display modules/components on the template. So open the index.php file for
the j4starter template under site_root/templates/j4starter if you closed it.
The Wireframe
For demonstration, I'm going to be creating a very simple template with a
Bootstrap Grid. Here's a basic wireframe of the layout I'm going for. Nothing
fancy. It will not look pretty, but it will work.
I'm going to go back and forth between the index.php file and the template.scss
file. Remember to save your changes, and check that any changes you make to
the stylesheet are being watched with the sass --watch command explained
previously.
Remove The Body
First, delete the contents of the body section of the index.php file, we're going to
start our new layout from scratch.

<!DOCTYPE html>
<html lang="<?php echo $this->language; ?>" dir="<?php echo $this-
>direction; ?>">
<head>
<jdoc:include type="metas" />
 <jdoc:include type="styles" />
<jdoc:include type="scripts" />
</head>
<body class="site">
</body>
</html>

Create The Container/Title

The first thing I'm going to add to my website is a container. A container class
contains a grid in Bootstrap. I will not describe every detail of how Bootstrap grids
work here, but I will explain the basics to help if you're new.

The next thing at the top of my template wireframe is the name of the site. To
add this to my template, I'm going to display the site name in a centered span
with a font size of 2 rem. I'm giving it the id of site-title so I can easily target it
from my stylesheet.

The PHP code <?php echo $sitename ?> was added to display the site name
variable within the span element.
Now, I've added this code to my template.scss file to style the title

After saving my files, waiting for Sass to update the CSS, and reloading my
webpage, this is what it looks like. Your website should display the site title saved
in your global configuration.

Add The Menu Module

The next item in my template is the menu module. This will span the entire width
of the container.
The menu code was added below the title. The line <?php if ($this-
>countModules('menu')) : ?> checks if the menu module is filled. If it's filled, it
outputs the following html. Make sure you have a menu module published to the
"menu" position in order to test this.

The next line starts the menu div, <div class="navbar navbar-expand" id="top-
menu">

My template already has some layout overrides for the menu module to work a
little better with Bootstrap's navbar. You can learn more about Bootstrap Nabvar
options in their docs. I've used the classes navbar and navbar-expand from
Bootstrap. This means this is going to be a navigation bar, and it's expanded (full
width of container). I've given it the id of top-menu so I can easily add additional
customizations within my template's scss file.

The line <jdoc:include type="modules" name="menu" style="none" /> is what

adds the module in the "menu" position to the page. Additional module positions
may be defined in the templateDetails.xml file, if you'd like. Note that the style
attribute has to deal with mod_chromes (the styling templates for modules). To
learn more about mod_chrome and add styles/headings to your modules, see the
module chromes guide.

The <?php endif; ?> line ends the condition from before, where we checked if the
menu module exists. This is the end of the menu module placement code. Any
HTML after this line will be displayed, regardless of whether the menu module is
filled.

I've added the following code to my template.scss file:

All this does is make the background of the menu the color I chose in the
wireframe. After saving both files, letting Sass watch the changes, and refreshing
my browser, I now see a page that looks like this: So now we have the site title
and the menu down. We still have to do the left sidebar, the breadcrumbs, the
main component area, and the footer.

The Grid
The easiest way to implement the layout with a left sidebar, breadcrumbs, and
main content area will be to use the Bootstrap grid with columns.
By default, Bootstrap uses a 12 column/row layout. We can create columns in
1/12 increments. Each column belongs in a row. We can create columns in any
increment of 1/12, so long as they add up to 12. For example, we could have a
layout with two equal-width 6/12 columns in a row, or one smaller 4/12 column
and one larger 8/12 column in a row, or three equal 4/12 columns in a row.
Hopefully, you get the point.

Since I have a left sidebar, and it's smaller in width than the main
component/breadcrumbs area, I'm going to put the left sidebar in a smaller
column on the left, and the remaining two areas in a larger column on the right.
The body of my index.php file now looks like this for the basic grid layout:
If you look at the code, I created a div with the "row" class functioning as the row.
Within that row, I've created two separate divs. One is the left sidebar, with a
width of 3 columns out of 12. The other is a larger column, with a width of 9
columns wide. So this will be a 1:3 layout with the left sidebar taking up 1/4 of the
space and the remaining area taking up 3/4 of the space.

I've also added the ids left-sidebar and main-area for each column so we can
easily target them with CSS.

To load the left sidebar, I'm going to use the same php snippet I used to insert the
menu module. The difference is that this time, I'm going to use the position of
"sidebar" instead of "menu". The sidebar position is already defined in j4starter's
templateDetails.xml file. I've skipped checking if the sidebar position is populated,
for this example. So the <?php if ($this->countModules('sidebar')) : ?> is omitted.
You don't have to check if a module position is populated, if you know
something's going to be.
Finally, I added some CSS styling to template.scss for the left sidebar.

I published the login form in the "sidebar" position. Make sure anything you
publish here is published to the "sidebar" position, not the "sidebar-right" or
"sidebar-left" positions from the Cassiopeia template.

I set the style for the siderbar to the superBasicMod "module chrome" - this
means it will load the module chrome/theme from this
template/html/layouts/chromes/superBasicMod.php - this is what allows the
title to be toggled on and off, along with other module-specific settings. This is
what my site looks like after everything's saved and refreshed:

Wow! It's almost looking like a real template.

Moving on, let's add the breadcrumbs module and the component view to the
right column. This would also be a good place to add the "message" section.
Joomla displays important messages here regarding user registration, errors, and
so on.
I've loaded the breadcrumbs module using the same method I loaded the menu
and the sidebar module. The breadcrumbs module should be published to the
breadcrumbs position by default, but set it to be there if it's somewhere else.

The line <jdoc:include type="component" /> is what loads the component view.
This is where the bulk of your page's content should come from. It's where
articles get displayed, categories get displayed, the registration page is displayed,
etc. It's the main part of the page, which is why I put it in a <main> element.

The line <jdoc:include type="message" /> displays the message area.

I added two test articles to my website and featured them. Now, this is what my
home page looks like:

The next area I have to make is the footer. I'm just going to make a basic footer. If
you wanted to make a more complex footer, you could load a "footer" module
down here. That is up to you. I've decided to just code the footer directly into the
template, so it's simple and appears on all pages the same.
I've added this code at the end of my other row, within the same container.

All it does is add another row below the last row for the footer. It displays the
site's title along with a short copyright notice within a span element.

My added CSS looks like this:

Hooray! My template's just about done. This is what it looks like with the footer.
The last thing I'd like to fix is the navbar at the top. It's part of the container, but
because of the way Bootstrap styles things, its width doesn't match the width of
the other elements. I'm going to fix this by putting it in its own div row.

Desktop Template Complete

The template's nearly done. Any additional style customizations are up to you.
If you want to do more Visit given link
Developing a Joomla 4 Template

Artisteer 4 and Joomla 3.2

Artisteer is a desktop program you can use to easily create templates for software
such as Joomla, Drupal, and WordPress. I’ve known of the software for a few
years now, but have never used it. Today, I’ve decided to test out the software,
and this article is a brief summary of my experience.

Heads up! The opinions in this review are based upon the 15 minutes I took to
test out the software. The purpose of this article is to find out how easy and
intuitive the software is out of the box, not to provide an in depth tutorial on use
or operations.
Download & Install Artisteer
The first thing you’ll need to do is download a copy of the Artisteer trial. Like most
users on the web, I scan content on pages rather than reading the entire thing. I
tell you this because I didn’t read everything on the download page. I missed the
fact that the trial version cannot be used for creating a Joomla 3 template, as it
says:
When in trial mode Artisteer does not support saving your web design project, but you can still
create and export your web design as HTML, theme, template or skin.
NOTE: Starting with Artisteer 4.2 it is not possible, to export Joomla, WordPress and Drupal
themes in trial mode.

The installation process was very easy – it’s just like installing any other program
on your desktop.

Using Artisteer
Artisteer 4.2 supports Joomla 3.2

Creating a Template
In the screenshot below, Artisteer is on the left and Microsoft Paint is to the right.
Both seem to have a similar look and feel – such as the way the tools are laid out
and organized in the top menu of the software. If you look at the two icons in
your Windows taskbar, the icons look very similar as well.
I didn’t invest any time in learning the software, and this is not meant to be a
tutorial on how to use Artisteer either. I just wanted to choose a provided
template example, export it as a Joomla 3 template, and install the template in
Joomla 3.

Exporting a template
The steps for exporting a template are quite easy. All you need to do is go to File
>> Export >> Joomla Template.
While the popup message said Joomla 3.2 was supported, Joomla 3.2 is not an
option when choosing which version of Joomla to export the template as. Joomla
3.1 is listed, so that should be just fine.