Joomla Tutorial for Beginners

When we talk about content management systems, Joomla! is one of the first names that come to mind. Completely open-source (free), Joomla! can be used by anyone who wants to build powerful websites.

Joomla! has been used by many famous brands and organizations including Harvard University, Linux.com, Guggenheim, MTV, and the UNRIC (United Nations Regional Information Centre for Western Europe).

Building a website with Joomla! Is super-easy and super-fun because of the multitude of templates and extensions available. Be it social web or news website, site management or core enhancements, you can find all sorts of pre-built extensions on the official Joomla website.

Joomla templates are also readily available on the internet so getting started is not an uphill task. However, even though using Joomla’s content management system is pretty easy to get your head around, incorporating personalized design without having prior development experience can be hard to do.

Talking about a high-end CMS and eventually drawing its comparison with WordPress is an inevitability. Even though WordPress has 120% more downloads, more free themes and plugins than Joomla, it’s not unsafe to say that Joomla! gives WordPress substantial competition. Here’s a more elaborate breakdown of the differences between 2 of the world’s most famous content management systems.

This Joomla tutorial will focus on showing how to use Joomla! to create a website. From installation to setting the website up, everything will be covered.

Step 1 – Joomla Installation

To install Joomla on your Hostinger shared hosting, all you have to do is make a few clicks and enter your website details. The auto-installer allows you to save time and set Joomla up in minutes. Follow these steps to install Joomla:

1. Go to the control panel.
2. Click on Auto Installer.
3. In the search bar enter Joomla and click on its icon.
4. In the installation wizard, enter your website details and click Install.
5. Allow a few minutes for the CMS to be installed.

Voila! That’s all it takes. Joomla! has now been installed and the required database has been created and configured accordingly.

To access the Joomla administrator panel, add /administrator  at the end of URL (e.g. www.mydomainname.com/administrator) and paste it in the address bar. After entering your username and password, which you have created when setting up Joomla, you will be taken to the administrator page.

Step 2 – Creating a Website With Joomla

With Joomla!, you get a lot of options on how to structure your website and go about content management. In this part of Joomla! tutorial, you will be guided throughout the whole process of making content management easy and efficient.

Step 2.1 – Adding Articles

Let’s start with the basics. From the admin page, click on the Content button, hover over the article manager option, and click on Add new article. A WYSIWYG editor will pop up. It can be used to format and add the text to your article. You can also add images or links to your text here.

Once you are done with your first article, press Save button and your article will be published.

Once the article has been created, it will appear in the Latest Articles section. If you want to link it to your website’s main menu, follow these steps:

1. Click on the Menus tab.
2. Hover over to the Main Menu option and click on Add new menu item.
3. Enter the title for your menu item, e.g My Article.
4. Now you have to select the menu item type; as we are talking about articles, click on the Articles link.
5. In order to make the newly created menu open the just-created article, click on the Single Article option.
6. Select the article you want to link. Click on Select and make your way to the article you just created.
7. Press Save button.

That should be it. Your newly created article will now be accessible from the main menu on your Joomla! website.

Step 2.2 – Adding Joomla Components

With Joomla!, you have the ability to add special functionalities in addition to the standard articles that comprise of text, links, and images. Complex content creation is carried out using components.

The component manager has different options through which complex pages can be added to your website. Joomla has quite a few built-in components that make the creation of specialized page types easy: Contacts, search, smart search, news feeds, web links, etc.

For example, to make a page that includes a news feed from an external site, you have to go to Components, then select News Feeds, then click on New button.

In a new window, fill the required details (name and URL for the news feed you want to display) and press Save button.

Other components (found in the same Components menu) can also be used in a similar way. Setting them up is as easy as making a few clicks.

Step 2.3 – Adding Joomla Categories

Joomla has categories which allow you to categorize your content efficiently. Every time you create any new content, you can assign a category to it. Having the ability to categorize your content helps to keep everything structured and systemized. Categories best come in to play when you have different types of content/articles that you want to put on your website. To add a new category, follow these simple steps:

1. From the admin panel, click on the Content option.
2. Now from the Categories, click on Add New Category.
3. Add the alias, title, description, and hit save. (Note: The alias and the description are optional).
4. Press Save button to create your new category.

Like articles, Joomla components can also be categorized. There is one difference between article and component categories; i.e. when you choose the categories menu for any component, you get taken to the categories manager for the specified component. To add a category, you will have to press the new button presented to you there. Even though the route is different, the page with the options to create the new category is exactly similar.

Step 2.4 – Creating Featured Articles

With Joomla, you can make pages that combine content depending on the similarity of properties.

The first step is to mark the articles as featured. This is easy to do, as are most things with Joomla. Just go to Content and then click on Articles. The list of articles on your website will be displayed here. You will notice that there is a star next to every article on the list. All you have to do to make an article featured is click on the star adjacent to the relevant article. The star should turn yellow, rendering your article as featured.

In order to show featured articles on a page linked in the menu, follow these steps:

1. Create a new menu item first. Go to Menus, then Main Menu.
2. Now click on Add New Menu item. (This can also be done with any existing menu).
3. Select the menu type next. Press the Select button to do so.
4. From the menu types, click on the articles section and then make featured articles your selection.
5. Enter title for your menu e.g. Featured Articles.
6. Hit the Save button.

Step 2.5 – Creating a Contact us page:

Receiving feedback from your visitors/customers/potential clients is often relevant for website owners. For this purpose, having a contact us page is vital. In a few clicks, Joomla can help you do that:

1. First things first, you need to create the actual contact page component. To do so go to Components and then click on Contacts. Click on the New button.
2. Add the name for the page and contact details for your form. If you want to add a description, use Miscellaneous Information tab.
3. Once you are done click Save button.

To enable this contact form and make it viewable, simply add a newly created component in Menus. The process is as simple as adding a new article to the menu.

Step 2.6 – Using Banners

Banners component can be used to manage image or HTML banners. Here’s how we go about this:

1. Firstly, we need to create a banner. To do this, make your way to the banners tab by clicking on Components, then Banners and then again Banners.
2. Now click on the New button present at the top left.
3. Now you have to select a name for your banner. It’s recommended to use meaningful, specific names that can be easily organized later on.
4. Upload your image and enter optional details such as width and hight.
5. Once you are done press Save button.
6. Now in order to display your new banner, you need to publish a new module. Go to the module manager under extensions.
7. Click on the New button.
8. A list of modules will now appear. Click on banners.
9. Select a title and position for the module. Once done, hit save and you are done.

As an example, we have added an image banner with kittens to the footer of our Joomla! website.

Step 3 – Installing Joomla Extensions

The official Joomla extensions library provides all the extensions that you can use. From security and maps to communication and e-commerce, you can find it all up there.

Extensions can be installed and managed on Extensions -> Manage section. Joomla! will ask if you want to enable Install from Web tab. We recommend enabling this tab since it will allow you to search and install Joomla! extensions without the need to leave Joomla! administrator panel.

Alternatively, you can install Joomla! extensions manually:

1. Download the .zip package from the Joomla! extensions directory.
2. Click on Upload Package File tab in Extensions section.
3. Upload the archive.

That’s pretty much all it takes.

Here are a few must-have extensions on your Joomla! website:

1. ProFiles is a handy file manager and is way more useful and convenient than the default FTP.
2. Google Maps by Reumer: Use this plugin to display maps on your website.
3. AllVideos: With AllVideos, you can embed videos (hosted locally or on any external video hosting sites like YouTube etc.) in the content of your site.
4. Akeeba backup: Widely regarded as the most frequently used Joomla extension, Akeeba backup takes care of all of your backup needs.

Step 4 – Installing Joomla Templates

Themes and templates are what makes websites aesthetically pleasing and user-friendly…and there’s nothing more important from a visitor’s perspective, now is there? Choosing the right theme, template or web design solution is pivotal to the function and look of your website so don’t mind sparing a few extra thoughts to the decision.

Joomla also has plenty of free and paid templates available online, but the number is considerably less when compared to WordPress or Drupal.

Installing Joomla templates is also really easy. The process is almost identical to installing extensions:

1. Click on Extensions -> Manage.
2. Now click on the Upload Package File tab.
3. Click on choose file and select the .zip file you downloaded.
4. Once the upload is complete, navigate to Extensions -> Templates section.
5. Click on start icon next to template you want to enable.

Step 5 – Backing up Joomla

Your Hostinger hosting account is perpetually backed up automatically and this includes all your files and databases. You can access and download these backups in Hostinger control panel -> Backups section. 

However, there are few more ways to backup up Joomla! files and database.

Step 5.1 – Backing Up Joomla Manually

To create a backup copy, you need to archive all the Joomla files and the database. In order to create a file backup, the best way is to create a .zip file using Hostinger file manager tool. This can be done by moving to the main Joomla installation folder, selecting all the files and pressing the compress button at the top of the page. After that, press the compress file(s) button and an archive of all of your files will be generated. Once the .zip file has been created, you can just navigate to the file using your browser and download it.

Another way to download Joomla files is to use an FTP client. The process is straightforward – all you need to do is navigate to Joomla folder, select all files and press Download button.

To create MySQL database backup, we recommend using phpMyAdmin tool. On Hostinger, you can access it from your control panel by pressing on phpMyAdmin icon and clicking on Manage button next to appropriate Joomla! database.

Once inside phpMyAdmin, click on Export tab and then hit Go button to download .sql file.

Step 5.2 – Using Akeeba to Backup Joomla

Akeeba backup is probably the most popular Joomla plugin. In this section of Joomla guide, you will learn how to use Akeeba to backup Joomla.

Akeeba Backup cannot be found in the official Joomla directory, thus you will need to download the plugin from Akeeba website. Once the download is completed, install the plugin via Upload Package File tab.

Now go to Components -> Akeeba Backup.

When accessing Akeeba component for the first time you will go through automated benchmarking wizard which will set up your component for optimal backup performance. When finished you will receive a confirmation message.

1. Click Backup Now to backup your Joomla website.
2. If you want to change settings that benchmarking wizard has selected, you can click Configuration option.
3. To automate your backups select Schedule Automatic Backups.

Once the backup is generated click Manage Backups. It is advised to keep a local copy of your backup. To download the backup to your computer click Download button.

Step 6 – Updating Joomla

Note: It’s recommended to create a backup before you begin the update.

Keeping Joomla up to date is very important. When you log in to http://mydomain.com/administrator, Joomla will automatically run a check to see if any new versions are available. If there is a new version present in the official repository, you will see a new notification. The notification will contain the name of the update along with an Update Now Button. Click on the button to proceed with the installation.

Once you have clicked on the link, you will be taken to the Joomla update page. The information regarding your current version and the one you will be updated to will be listed here. Click on the install button to proceed. The installation will take a few moments and once it has been completed, you will be taken to a screen, confirming the successful installation of the update.

Step 7 – Speeding Up Joomla

Fast website loading speed is a vital part of a good user experience. In this section of our Joomla tutorial we will see how to improve performance and loading speed for Joomla website.

Step 7.1 — Enabling Gzip Compression

Compression helps you decrease the total size of your website that visitors have to download, therefore – it takes less time for a website to load.

Firstly access your Joomla admin dashboard and go to System > Global Configuration.

You will be forwarded to a Global Configuration window. Now follow these steps to enable Gzip compression on Joomla:

1. Click on Server.
2. Select Yes in the Gzip Page Compression section.
3. Save your changes.

If all changes were saved successfully you will receive a confirmation message:

That is it, Gzip compression is now enabled for your Joomla website.

Step 7.2 — Enabling Joomla Cache

By enabling cache you store your website content that is pulled from a database on the server, so when a visitor comes to your website, the response time of your website is faster.

Go back to the same Global Configuration section click on System tab and follow these steps to enable caching:

1. You can select which Cache Handler you want to use. On most shared hosting providers, File cache handler should be used.
2. Leave Path to Cache Folder empty unless you want to save cache files in a custom directory.
3. Cache Time determines how long cached content stays the same before updating. A default value is 15 minutes. If you update your website very frequently then you can shorten the cache time value. If you rarely update the website then you can increase this value.
4. Leave Platform specific caching as No, unless you provide different HTML content on mobile devices.
5. Turn on System Cache by selecting one of the two options:
   • Conservative caching – select this option if you have an extremely large website.
   • Progressive caching – this is a default caching option and is best suited for most Joomla sites.
6. Save your changes.

If all changes were saved successfully you will receive a confirmation message:

Another way to cache your Joomla pages is to turn on Cache plugin. Go to Extensions > Plugins in your Joomla admin dashboard.

Now all you need to do is find the Page Cache plugin and enable it.

To find the plugin easier, enter cache in in the search field. Once you find the required plugin click the button in the status column in order to enable it. If the plugin has been enabled you will receive a message and button will appear with a green check mark.

Now caching is enabled and your website loading speed should be improved. For further optimisation, it is also advised to serve scaled images. Tutorial on this topic can be found here.

Conclusion

This Joomla tutorial focused on introducing Joomla for beginners along with giving a complete overview of how a complete website can be managed using the state-of-the-art CMS. More information that might have transcended the scope of the article can be retrieved from the official Joomla documentation.