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 or 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 personalised 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 downloads are around 120 percent more than that of Joomla, and even though there are 300 percent more free WordPress themes out there (also 45K+ free WordPress plugins compared to Joomla’s 7K), 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 a website up, everything will be covered.

Step 1 – Joomla Installation

To install on your Hostinger shared hosting, all you have to do is make a few clicks and enter a your website details. The auto-installer allows you to save time and set Joomla up in no time. 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 it’s 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 your domain name (e.g. www.mydomainname.com/administrator) and paste in the address bar. After entering your username and password (the ones you entered while 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 will guide you 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 menu, hover over the article manager option and click on Add new article. A WYSIWYG editor will pop up. It can be used to add your article text and formatting it. You can also add images or links to it 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 Latest Articles widget. If want to link it in your website’s main menu, follow these steps:

1. Click on the Menus tab.
2. Hover 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 via which complex page kinds can be added to your website. Joomla has quite a few built-in components that make the creation of specialised page types easy: Contacts, search, smart search, news feeds, web links, etc.

For example, to make a page that includes a news feed from 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 and 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 in keeping 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, the title and the 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 but 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 in 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 pertinent 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, from the administrative area, 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 Miscelllaneous Information tab.
3. Once you are done click Save button.

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

Step 2.6 – Using Banners

This component can be used to manage banners. You can use it to add banners, categorize them and make them viewable at various places. 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 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 fall in need of. From security, 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; your extension is ready to make things happen.

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

1. ProFiles is a handy file manager and is way more usable 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 or 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 and Drupal.

Installing a 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 upload is compete, 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 on 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

For creation of 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 MySLQ database backup, we recommend using phpMyAdmin tool. On Hostinger, you can access it from you 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 download the plugin from Akeeba website. Once 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 setup 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 login 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 updating 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 would store your website content that is pulled from a database on the server so when a visitor comes to your website the response with your website content would be sent 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 whole 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.