skip to Main Content
Illustration Of People Working On A Website Design

How to create a website with Joomla

Updated on August 25th, 2018

Do you have a cool website idea?

Thinking about creating that website with Joomla? Great!

This guide will show you exactly what you need to get started.

As you probably already know, Joomla is among the most popular content management system in the world. Some of reasons for that is:

  • It has a slightly better content structure flexibility than WordPress
  • It comes with a good user registration system and access control capabilities out-of-the-box
  • It’s good at managing complex navigation structures and large amount of content

If you’re just making a basic blog or a portfolio, Joomla might be a bit too much. Its strengths are more about managing content complexity combined with its user access capabilities.

As Robert Jacobi – president of Open Source Matters – says on his blog:

It’s sweet spot as a CMS is as a community platform, offering strong social networking features that make it ideal for ecommerce and social networking sites

If you need a more in-depth explanation of when to choose Joomla, have a read in the Joomla section of the Content Management System article.

Now let’s get started with what this is all about, creating a Joomla site

STEP 1: Get a domain name

Before you can start building your website, you need a domain name.

A domain name is what uniquely identifies your site, like thewebsiteroad.com.

It basically becomes your brand on the internet, so I would recommend spending some time on finding a good one.

Here are some pointers to get you started

  • Keep it short and memorable – Keeping it short will reduce the risk of mistyping and misspelling. If you can find one that is catchy and easy to remember as well, then you have a winner!
  • Avoid hyphens – It doesn’t look good and will be harder to remember. It also takes away the uniqueness, so people that want to visit Your-Site.com ends up visiting YourSite.com, which is not your site…
  • Avoid numbers – Numbers are easily misunderstood. Especially if people hear your site name, they wouldn’t know if it’s numerical (2) or spelled out (Two)

I use NameCheap as my Domain Registrar – they have good customer support and are easy to use.

Here’s how to register a domain name.

STEP 2: Get website hosting

Once you’ve secured your domain name, you’ll need someone that will host your website.

A Web host is basically a company that allows you to store your website on their servers for a small fee. In return, they will display your website to the public when someone types in your domain name.

There are a few things you should keep in mind when selecting your host:

  • Uptime – When you’ve first spent time and money on creating your website, you’ll want a web host that actually keeps it online for people to see. Aim for a web host with uptime scores at 99,9% and above.
  • Loading speed – If your site spends ages on loading, people will just leave before they’ve seen the content.
  • Support – As always, having a friendly support team that is actually available when you need it is worth quite a bit.
  • Cost – Don’t get blinded by a small startup cost, some hosts bump up their prices quite significantly when it’s time for the renewal of your hosting plan.

I recommend using SiteGround – Good uptime, great speed, and really great support. The cost might be a bit higher than some other hosts, but in my opinion, it’s worth it.

Here’s how to setup hosting

STEP 3: Install Joomla

Once your domain and hosting are in place, it’s time for installing Joomla.

For Joomla, this is where you have to make your first important decision.

Default or quickstart package installation

You have two options

  1. Do a normal Joomla installation, where you’ll get to choose among six default quickstart packages.
  2. Find a professional looking quickstart package that comes with a predefined layout and example content.

In order to elaborate, I need to explain the difference between a quickstart package and a template.

Quickstart package is a Joomla installation, layout, example content, and extensions all bundled together into one installation. It is not possible to install a quickstart package inside an existing Joomla installation.

Template is an extension that can be installed after you have installed Joomla. A Template will control the overall look and layout options of a site. The major difference from quickstart packages is that templates do not come with the example content and extensions/modules required to make the site look like the demo site you might have seen.

Here’s an example:

The Quickstart package of the Purity lll template looks exactly as it does in the demo when it’s installed.

Frontpage With Joomla Purity Quickstart Package Installed

However, if I first install Joomla the traditional way and then install just the Purity lll template, my site looks like this.

Frontpage With Joomla Purity Template Installed

Quite a big difference, right?

This is the reason a lot of people get a bit disappointed when they try to install templates in Joomla, only to realize they look nothing like the demo.

That being said, when starting with a clean template you don’t have to spend time on deleting example content, which might be a good option if you have some experience with Joomla from before.

Where do I find quickstart packages and templates?

You have to make a choice, but in order to do that, you have to see what you can choose from.

As mentioned earlier, the default installation offers six different quickstart packages that you are free to choose from.

If you would like something a bit more interesting, you could start out by checking this list of 10 free responsive templates.

If you’re struggling to find something you like, it could also be worth checking out some of the premium templates offered by ThemeForest. Premium templates usually come with a quickstart package included.

Installing Joomla

Throughout this guide, I will continue as if I installed the default Joomla.

If you decide to go for a Joomla quickstart package, unless specified otherwise, it’s usually installed the same way as a manual installation of default Joomla.

Default installation

Most well-established hosting companies provide one-click installations for popular Content Management Systems like Joomla.

So, if you signed up with SiteGround or any similar company, there should be a one-click installation button in your control panel.

All you have to do is to follow these steps:

  1. Log into your hosting account
  2. Go to cPanel
SiteGround Go To CPanel Button

3. Click the Joomla! button under Autoinstallers.

SiteGround CPanel Joomla Autoinstaller

4. Click the Install tab

How To Install Joomla On SiteGround

5. Fill in Site name, Description and choose one of the six sample data installations.

6. Fill in Username, password, and Click Install

That’s it, the installation is complete.

STEP 4: Configure your Joomla site

If you now visit YourDomain.com you’ll see that your site is up and running.

Now it’s time for some minor configurations that I recommend you do before you start adding content.

Log in to Joomla admin panel

First, you’ll have to log in to the admin panel. That’s done by typing YourDomain.com/administrator

In the login window that appears you should enter the username and password you created during the installation.

Once you’re logged in, you’ll see an admin panel that looks something like this

The Joomla Control Panel

I know that it might look a bit overwhelming, I did for me at least, but I’ll guide you through the essentials.

If you at any point during this guide would like to see how your site looks like, you can just go to YourDomain.com or click the preview button in the top right corner of the admin panel.

Button For Previewing Website From Joomla Control Panel

Enable Search Engine Friendly URLs

It’s basically about making the URLs to your site as understandable as possible, both for search engines and visitors browsing your site.

To give you an idea of what I’m talking about, here’s how Joomla will display your “About us” URL by default

YourDomain.com/index.php/about-us

But if you follow this short guide, you can make it look like this

YourDomain.com/about-us

Looks a lot better, right? Trust me, it’s worth the effort

Moz has written an extensive guide on the subject of URL best practice that you can check out if you want more information.

Convinced?

First, go to Systems->Global Configuration, make sure that “Search Engine Friendly URLs” and “Use URL Rewriting” are set to Yes, and click “Save”.

Example Of Joomla Seo Settings

That was the easy part…

Now you have to log in to your SiteGround user area and navigate to cPanel.

Scroll down until you come to the Files section and click File Manager.

File Manager In SiteGround CPanel

When you get the “File Manager Directory Selection” make sure that Web Root and Show Hidden Files are checked and click Go.

SiteGround File Manager Directory Selection

This should open a file manager. Scroll down until you find a file called .htaccess, mark it, and click Delete. (If you don’t have this file, just skip to the next step)

Deleting Htaccess In SiteGround File Manager

Once that’s done, scroll even further down until you find a file called htaccess.txt, click Rename, change the name to .htaccess, and click Rename File.

Rename Htaccess File In SiteGround File Manager

That’s it!

Setup Joomla to use SSL and HTTPS

I’ll try to give a short explanation of SSL here, but if you want more information you can read my post about SSL-certificates.

SSL stands for Secure Sockets Layer and is an encryption protocol that ensures secure communication between a web server (your website) and a user’s web browser (e.g. Chrome) by encrypting the information sent.

That could be credit card details for an e-commerce website, or simply the password you use to login to your WordPress admin panel. Regardless of what it is, you don’t want hackers to get ahold of it, and that’s what an SSL-certificate helps you with.

HTTPS stands for Hypertext Transport Protocol Secure, and you’ve probably seen it many URL’s already, just look at the website you’re on now.

TheWebsiteRoad.com With Https And Secure Mark

The link between HTTPS and SSL is simply that https replaces http in the URL when a site is secured by an SSL-certificate.

Phew, that’s some heavy stuff!

How do I add an SSL-certificate to my site?

Well, it depends on your host. If you’ve signed up with SiteGround, a free SSL-certificate can easily be installed on your domain.

If you did not sign up with SiteGround, try asking your host if they support the free SSL-certificate Let’s Encrypt, and how to set it up for your site.

If you now have an SSL-certificate in place, all you have to do is to navigate to System->Global Configuration or Configuration->Global (They will take you to the same place).

How To Find Joomla Global Configurations

Select the Server tab and set “Force HTTPS” to “Entire Site”.

How To Force Https In Joomla

Important! If you want to change from http to https for an existing site that has existed for a while, you might be looking at a larger clean-up job. Check out the checklist written in this blog post by Moz for some tips on moving from http to https.

Adding permanent redirect

Once you have made the change in Joomla, the next step is to ensure that everyone visiting your site ends up at the https URL you want to choose.

This is done by editing the .htaccess file you renamed in the section above.

Navigate back to the Siteground cPanel, find the file manager and scroll down until you find the .htaccess file.

Mark the file and click edit and edit.

How To Edit The Htaccess File

www or non-www

When editing the .htaccess file you have two options when you decide on your website URL. You can choose to have a URL with or without www, just like these two examples:

https://yourwebsite.com

https://www.yourwebsite.com

Personally, I always choose the ones without www., simply because I think it looks better. But it all comes down to personal preference.

If you want https://yourwebsite.com you should add the following lines to the file:

<IfModule mod_rewrite.c>
RewriteEngine On
RewriteCond %{HTTPS} off [OR]
RewriteCond %{HTTP_HOST} ^www\. [NC]
RewriteRule ^(.*)$ https://yourwebsite.com%{REQUEST_URI} [L,R=301]
</IfModule>

If you want https://www.yourwebsite.com you should add these lines:

<IfModule mod_rewrite.c>
RewriteEngine On
RewriteCond %{HTTPS} off [OR]
RewriteCond %{HTTP_HOST} !^www\. [NC]
RewriteRule ^(.*)$ https://www.yourwebsite.com%{REQUEST_URI} [L,R=301]
</IfModule>

Remember to replace yourwebsite.com with the website URL you prefer.

Once you’ve made your choice and saved the .htaccess file, you’re done with establishing the permanent redirect.

If you want to check if it got set up correctly, just go to this great redirect mapper and input your URL.

The goal is to have all the different URL versions ending up at the same URL. In my case that is https://thewebsiteroad.com

Overview Of Redirects For Thewebsiteroad.com

STEP 5: Customize your website

Depending on the selection you did when installing Joomla, it might look very basic or it could already by looking like a professional website.

But before you start creating content for your page, I want to explain two important parts of Joomla, Components and Modules, and the concept of module maps.

A Component is the main part of any page of your website. There are many component types to choose from, but all menu item on your page will have a component attached to it. It could an Article component, a newsfeed component and many others.

A Module is more lightweight and flexible compared to a component. Modules are typically known as the boxes that surround the component. It could be a login module, a footer module, a slideshow module and lots of other things. Regardless of what it is, the core idea is that they can be placed at various locations of the website. These locations can be seen from module maps.

What is a module map?

Glad you asked

A module map is a visual representation of the different locations where it’s possible to place modules. It’s essential for speeding up the website development.

Most template providers should have such an overview for you, and if you can’t find it, just ask them. If that doesn’t work out, here’s how you check it directly in Joomla.

Go to Extensions->Templates and click Options.

How To Access Joomla Template Options

Make sure “Preview Module Positions” is Enabled.

Button For Enabling Preview Of Module Positions In Joomla

Go to your YourDomain.com and add ?tp=1 or &tp=1 at the end, like YourDomain.com?tp=1.

If done correctly, you will see the different module positions marked on your page.

Example Of A Joomla Module Map

Creating a category and adding Articles

Finally, let’s get started adding some actual content.

First, create a category (optional)

Categories are just an optional way of organizing your articles. Categories can contain Articles and subcategories.

Go to Content->Cateogries->Add New Category

How To Add A New Category In Joomla

Enter a title and click “Save & Close”

Create your first article by going to Content->Articles->Add New Article

How To Add A New Article In Joomla

Here you’ll see a pretty basic text editor, that still has quite a few options.

Give the article a title, add some content, assign the article to a category (If you made one) and click the “Save & Close” button.

Editing A Article In Joomla

Congratulations, you’ve just created your first article/blog post, let’s see if we can make it appear on your website.

Joomla Menus

The Menu concept in Joomla might be a bit tricky to grasp at first, but give it some time and you’ll be amazed by the flexibility it provides.

A Menu in Joomla is a set of Menu Items and is a core part of the website navigation. What makes Joomla a bit different is that it’s the Menu Items that defines the URL to a page on your site.

So, if you want a new page for your site, you need to create a Menu Item for it, and then attach whatever content you might require to that Menu Item.

Clear as mud?

Let’s try an example

Let’s move to the manage menu section by going to Menus->Manage

Here you’ll see that you have one menu, Main Menu.

How To Manage Joomla Menus

If you click on Main Menu, it will take you to the “Menu Items” tab where you’ll see one Menu Item, Home. Notice that the Home menu item has a yellow star in the “Home” column, that means that this menu item is the frontpage/homepage of your website.

How To Set Home Menu Item In Joomla

If you edit the content of this item it should show up on your front page.

Click the Home menu item and you’ll end up in a window offers quite a lot of editing possibilities.

I’ll try to explain the most important ones.

How To Edit A Menu Item In Joomla

Menu Title – every menu item needs one, and it can be shown on the website if you like. The important part is to give it a name that makes sense, that way you’ll be able to understand what it is when the number of menu items are increasing.

Menu Item Type – This is where you decide what the main content of your page should be. Currently, it’s set to Featured Articles, so every article that is set to featured will show up on the Home page.

Example Of Menu Module Assignment In Joomla

Module Assignment – This is where you can add on building blocks surrounding the main content. If you click on either of the modules, you get the options to adjust settings specifically for that module, which pages it should show on, and where it should appear on the page.

Adding article to menu

Let’s try to add the article we created to the front page.

Go to the Home menu item as described above, and click “Select” on the Menu Item Type.

How To Define Menu Item Type In Joomla

You’ll get a list of available types, expand the Articles section.

Since you only want one article to be displayed, select Single Article.

There’s a lot of other types that you can explore on your own.

Selection Of Single Article Menu Item Type In Joomla

You then select My first article which you created earlier and click Save & Close.

Example Of Article Assigned To A Single Article Menu Item In Joomla

If you now go back to your homepage, YourDomain.com, you should see the article.

Adding modules to your site

New modules can be added by going to Extensions->Modules and clicking “New”.

How To Add A New Module In Joomla

You’ll then see a list of all available modules. Let’s create a Custom module.

Selecting A Custom Module Type In Joomla

The Custom module looks very similar to the Article editor. The difference is that the modules have a lot more flexibility with regards to where they can be placed on the page.

Give the module a describing title, populate it with some content, select position, assign it to the relevant menus and click Save & Close.

Creating A Custom Module In Joomla

Go back to YourDomain.com to verify that the module appeared at the right pages and in the right position.

Templates

Templates will control the overall look and layout options of a site, but it’s important to note that they don’t come with example content like the quickstart packages do.

A new template will typically contribute with the following:

  • New Menu Item Types
  • New positions

If you’ve chosen a good template, that leaves you with a lot more content flexibility than you had before.

If you’ve ever tried WordPress, you are probably used to installing one template and then all your pages will be using that one template.

Joomla, on the other hand, gives you the ability to have different templates on different pages, pretty nice, right?

It’s all configured on the Menu Item.

Selecting Template Style For A Specific Menu Item In Joomla

To set a default template for your entire website, you’ll have to go to Extensions->Templates and click the default star on the preferred template.

I’ll show you have to install a new template in just a bit.

Joomla extensions

Extension covers basically everything that is about extending the functionality of Joomla. There are five types of extensions: Components, Modules, Plugins, Templates, and Languages.

Overview Of The Different Joomla Extensions

So far, I’ve covered all of them except Plugins and Languages, so let’s give them a quick introduction.

Plugins – Plugins do their things more “behind the scenes”, and are typically used to add some extra functionality to a module or component. To get a bit technical, plugins are basically event handlers.

If You go to Extensions->Plugins you can activate, deactivate or various plugins options.

Still a bit confused about what plugins do? I had the same feeling when I tried Joomla for the first time

Let’s have a look at an example, the AllVideos plugin, which is designed to ease the process of adding videos into your articles.

With the plugin installed and activated, you can add the last part of a YouTube video in between {youtube} tags, and the video will then be displayed in the article.

What happens is that the plugin discovers that there is an article with a {youtube} tag, and finds the video on YouTube and display it on your website.

How To Use The Allvideos Joomla Plugin

Languages –  Is exactly what it sounds like, it gives you the possibility to select default language and install new languages. This makes Joomla able to easily create a multilingual site without adding tons of extensions and plugins.

If you would like to install new languages, just go to Extensions->Languages and click Install Languages.

How Install A New Language In Joomla

If you need a detailed guide on how to create a multilingual site, check out this article written by JoomShaper.

Installing extensions

I guess it’s about time I tell you where you can find all these extensions I’ve been talking about.

For Components, modules, and plugins I recommend checking out the official extension library at  https://extensions.joomla.org/

This extension library is also available through Joomla if you go to Extensions->Manage->Install and select the Install from Web tab.

Once you’re there, all you have to do is to search for the extension you’re looking for, click the extension and then click Install.

How To Install New Joomla Extensions From The Web

If you want to install a template, or the extension requires a normal download, you’ll have to use the Upload Package File option.

For Templates, you’ll first have to find a template you would like to use

You could start out by checking this list of 10 free responsive templates.

If you’re struggling to find something you like, it could also be worth checking out some of the premium themes offered by ThemeForest.

Once you’ve found it, download it on to your computer.

Select the Upload Package File tab, and drag in the downloaded file

Which extensions should I install?

I see this question all the time, and it’s a good question because there are thousands of extensions to choose from.

Here are some free options that you should consider:

Akeba backup – Every site needs a reliable backup! If something happens to your site, you don’t want to lose all those hours of work that you’ve invested.

Asynchronous Google Analytics – Ease the process of adding Google Analytics to your page. Google Analytics is a great tool that lets you see how many people visit your site every month, your most popular pages, and much more.

JCH Optimize – Optimize the loading speed of your site. Having a website that loads fast is essential both for your visitors and Google search ranks.

 

That’s the end of this guide

I realize that this turned into a very long guide, and some of you might not have needed all the details.

Either way, I really hope you learned something new.

If you liked this guide, feel free to share it or leave a comment.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Back To Top
×Close search
Search