19 Quick Joomla Tutorials for Beginners and Pros (2021)

Index of Joomla Tutorials

Contents[Show]

Joomla Administration Tutorials

How to add Google Analytics to your Joomla site or template

Since we first stumbled upon Google Analytics to track website visitor statistics, we make it a point to install it on each and every site. Analytics is a great visitors statistics tool for everyone, from newbies to the more advanced designers wishing to fully optimize the content of their websites so adding to Joomla Google Analytics codes should (and usually is) one of the very first steps you do when launching a new website.

Using Google Analytics with Joomla is something which can be achieved very simply.

Joomla Google Analytics Plugin

Of course, for those who don’t like messing around with code, there is the option of using a Joomla Google Analytics plugin which automatically inserts the code in each page.

As with most Joomla plugins, you just need to install it, set the Google Analytics code which you fetch from Google Analytics, enable it and you’re good to go!

Joomla Google Analytics

Joomla Google Analytics – The manual method

To make sure that the analytics code is available in all pages, you’ll need to add the script code to the index.php file of the default template you are using. To do this, simply go to the /templates//index.php and paste the code you get from Google Analytics just before the closing tag:


This will generate the tracking code on each Joomla page, and thus Analytics will be logging each hit on each page, which is exactly the result you want to achieve 😉

How to create a Joomla Favicon

Since a few years ago, favicons which had lost much of their relevance have been resurrected since more and more browsers now support them, and infact make them a very visual part of their user’s experience. Tablets and smartphone browsers also make use of these icons. This has led to an increased importance to having a good favicon. However, the ways these icons are presented vary according to the client browsing the website. Desktops require a certain icon, Apple devices require something different, different sizes also complicate matters.

A simple solution – Free Online Icon Generator for Apple and Favicon icons

Iconifier.net is a simple solution which given a square JPG, GIF or PNG will generate an icon set of various sizes so that you can use and choose the ones you want to support on your website. You just then need to download the generated icons and embed into your website’s code

Embed the favicons icon(s) in your Joomla template

After having created the favicon.ico icon using Iconifier.net above, and placing it in the root of your website add the following code between the and of your website’s Joomla template

The following is the easiest way to create a favicon in your Joomla website:

  • Create a 16 * 16 pixel ICON image, name it favicon.ico
  • Using the Media Manager (Site > Media Manager), upload and replace the default icon with your own icon

The Favicon Maker is a site which allows you to upload your image (most major formats) and converts it to stylish 16 * 16 icon image. So if you don’t have a way of creating the .ico but have an image (such as your logo) that you want to convert to the favicon – you can use one of the free favicon image generators found online.
Favicon maker- Create a favicon from any image

If you’re not happy with Favicon maker there are plenty of others you can use:

Copy the file to the /joomla/templates/ directory and make sure you’ve named it favicon.ico.

How to create Favicons for Apple Devices

After having created the various icons using the above website, you will also have to include a slightly different code for Apple (and possibly Android) devices. Again upload the icon files generated to the root of your website and place the following code in between the HEAD tags.

iOS Devices will automatically handle this in their browser and resize and add some effects accordingly for it to match the styling of the device they are being seen on

How to create FavIcons for Android Devices

Android has built upon the Apple touch icons but expect the icons to be in their final version already. This final version is “PRECOMPOSED”, and Android devices expect this tag to be in place. So upload new versions, with slightly different names (such as adding pre-composed in the name) and then add the following markup. The all important part is the rel=apple-touch-icon-precomposed. Put the files in the root of your website and add this code between the and tags of your html

More details on Favicons can be found on Wikipedia: https://en.wikipedia.org/wiki/Favicon

Joomla SMTP Settings – How to send emails using SMTP in Joomla

The default Joomla installation uses the php mail function to send emails. If you would like to use Joomla SMTP rather than phpmail, maybe because your hosting server does not support it, this is a fairly easy procedure.

The phpmail also might give you an error in Joomla:

“Could not instantiate mail function error” – using SMTP will avoid this error.

Joomla SMTP Settings

Please note that to use SMTP, you must have a valid email address to send the emails from – this is obviously good practice in general, so make sure you have created an email address. The typical address would be This email address is being protected from spambots. You need JavaScript enabled to view it., however if you don’t want to read these often, you can use a generic email such as bounce or no-reply…

The steps to configure Joomla 3 to use STMP follow

1. Logon to the Joomla administrator

2. Click on System > Global Configuration

3. Click on the Server tab

Joomla Mail Settings

4. Under the Mail Settings, enter the following details

SMTP Settings in Joomla

Set SMTP to Yes

Set SMTP Authentication to Yes

(You’ll need to get these details from your hosting server) Check if your SMTP server uses SSL/TLS or nothing, and then chose the appropriate option from SMTP Security. If you are going to use SSL or TLS you’ll need to enter the port required for your SMTP server.

Enter your SMTP username – this is usually your full email address

Enter your SMTP password – this is the password you created when you were setting up the email address

The SMTP Host is either localhost, if the SMTP server is same as your server, or else the SMTP server which is defined by your hosting service. (You’ll need to check these details with your hosting service).

That should be it! Check whether it is working correctly, by either registering a new user, or maybe sending an email using your newsletter component. If it doesn’t work, double check to make sure that the username/password and SMTP Host details are correct. However, under most conditions this is all you need to do to get Joomla SMTP setup and should get this working.

[How to] Improve authoring with Content versioning in Joomla 3

Content version control is one of the new great features of Joomla 3.2 – this is a great feature for many Joomla webmasters particularly either for those webmasters who forget what they change (like myself), or websites where there are multiple users administering the content.

This is also really good for users who want to revert to previous versions of articles, maybe articles which for some reason or other require a lot of complex code from various sources and which might break in the process of adding something new. Essentially this is like a backup at article level which is supported natively by the CMS.

How does Content Version Control Work?

When you create a new or an existing article, you will find a new button in the toolbar – Versions. When you press this you will see the version history of the article in a pop up window. There are a number of things to note about the Item Version HistoryJoomla Versions Button

  • The STAR which indicates the current version of the article
  • You can choose to “Keep Forever” on one or more of the versions. Since the versioning keeps a limited amount of versions, the “Keep Forever” setting will ensure that those specific articles which are locked will never get overwritten or removed from the history (you can still opt to delete this version though)
  • The RESTORE obviously allows you to restore a different version from the current article. Note that when you restore an article – this does not remove the currently published article. It is up to you to decide whether you want to publish the newly restored version or not.Joomla Article Version Listing

Comparing Versions of a Joomla article

A nice feature of version control is the Compare function. Basically, this allows you to see the differences between two versions of an article so that you can see what has been changed. Take a look at the screenshot below. The columns on the left shows the current article (including new text). The image in the middle shows the original article, whilst the column on the right shows the actual highlighted differences between one Joomla article and the other.

Joomla compare article versions

Another feature of the version control is that you can choose the see the article in various modes

  1. View only the changes in HTML
  2. View only the changes in text
  3. View all the values in HTML
  4. View all values in text

By all values, it means that’s its not just the content of the article which is shown, but other meta changes such as switching the article from one category to another, or what article options where changed from one article to the other.

The HTML change view is also great when you have been tweaking a lot of HTML for a particular article, especially if you have been using a Content Editor which likes to strip away some of the HTML.

Versioning is another great Joomla 3.2 feature, which makes the CMS more mature for those people who want to use Joomla in a “busy” environment. It also catches up on this feature when compared to WordPress.

Like this article? Sharing is caring 🙂

Disabling Joomla Extensions via PhpMyadmin

Have you ever had that moment, when you enable a module, plugin or component in Joomla, nd suddenly it starts giving such a severe error that it takes down your whole site – even the administrator part so you can’t disable it? When this happens, there is no way to disable the problem module or plugin from the “Administrator” panel.

Luckily, there is quite an easy way to fix this problem – disabling the Joomla plugin, module, or other extension via PhpMyAdmin. If you are not really sure which plugin may have created the problem in the first place, it would be best to start disabling 3rd party plugins and components one by one in the following way – until the problem goes away.

This is how to disable Joomla plugins or modules via PhpmyAdmin in various flavours of Joomla, including Joomla 3

  • Log in to your PHPmyadmin and find the database of the Joomla website you want to fix
  • Find the table which ends with ‘_extensions’ (the first few digits/letters are randomly generated and vary by installation)
  • Find the problematic plugin, component or module and edit it’s row. Change its ‘enabled’ field from status ‘1’ to ‘0’ and click save!
  • This will disable that specific plugin

See below the field you’ll need to find and change to 0 instead of 1

Disable Joomla Plugin PhpMyAdmin

Changing the Joomla offline message and offline image

When you are performing drastic changes to your website, it is advisable to turn switch your Joomla website to Offline mode (Site > Global Configuration > Site Offline > Yes). Of course, the default offline message is ok – however, many times it’s much better to create a specific message which is tailored for the needs of your specific Joomla website and audience.

The offline image can also be changed so that rather than having a Joomla logo – you can create a custom image of your own. We recommend putting up something amusing, so at least after the users get annoyed with the website being offline, at least they know you have a good sense of humour and hopefully come to check again later 🙂

  • Change the Offline message in the Site Settings of the Global Configuration, and insert your custom message. This is the basic configuration Change Joomla offline message image

One of the very first things most people need to do with Joomla, is change the footer to create their own links. Typically one adds stuff like privacy policy, a sitemap, terms and conditions and other generic links.

You can add as many more tds as you need to add as many links as you require.

As with Joomla 2.5 before it, Joomla 3’s default installation runs on a template (Protostar), which like most modern templates, allows you to edit the files directly via the Template Manager. Therefore, to change the footer go to Extensions > Templates > click on Templates then click on “Protostar” Details and Files. If you are using a different template, of course you’ll need to select the name of the template you are using instead of “Protostar”.

Change link in joomla footer extensions templates

Click on index.php and at the very bottom of the file you will find the following code:


©

code to add link in joomla footer

This is the code which generates Copyright and the name of the site. So go ahead and remove, add or edit and do all the changes which you require for your footer. For example, you can add a backlink to your site for Joomla SEO purposes as follows.


© Designed and developed by CollectiveRay.com

The footer now often comes as part of the template. For the Beez template you can remove it or change it by changing the actual code in the template. For example, you want to have such text as “Designed by CollectiveRay.com” Go to

Extensions > Template Manager and click on Templates

Click on your current default template and click on