Building a Simple Joomla Website

Build Website With Joomla

In this tutorial, I’ll introduce you to Joomla and show you how to set up a website with this popular web design and development platform.

Joomla is one of the longest and most famous FREE open source projects next to WordPress.

With origins all the way back 2000, Joomla is responsible for many innovations in the PHP / MySQL space that includes WordPress, Drupal, Magento and so many others.

As it continues to thrive in 2015, Joomla remains the second most popular content management system (CMS), behind only WordPress.

You have almost certainly used or heard of Joomla at some point, but if you haven’t used it in a while, the latest release (Joomla 3) provides plenty of reasons to give it a fresh look.

Joomla 3 is a fascinating product and was the first CMS to be completely responsive for both visitors and administrators.

Joomla 3 is responsive because the Joomla team decided to adopt the Bootstrap framework. The use of Bootstrap makes Joomla 3 attractive for front-end designers, but it also makes it easy for developers to create interfaces for their code.

A lot of work has gone into your initial experience with Joomla 3. The installation process is beautifully fast and you’re provided with a several sample websites to choose from.

You really can get a Joomla 3 website up and running in just a few minutes.

Introducing Joomla is the place to start researching Joomla.

This site has an introductory video and plenty of information about Joomla’s features. You’ll see that Joomla 3 features Bootstrap, LESS, jQuery and support for other databases such as PostgreSQL.

If you want to take Joomla for a test drive you can click the orange “Live Demo” button.

But to build our website in this tutorial we’ll click the green “Download” button.

Joomla_Website_Introduction is the place to download the latest release of Joomla 3.

Joomla 3 is the recommended version for new sites, although also available on this page is Joomla 2.5, the older, but still supported, version.

Click the green “Download Joomla 3.3” button.


Installing Joomla

To install Joomla – you have two options. For both ways, you’ll need a hosting and domain name. I’m recommending web hosting for Joomla as it’s probably the cheapest and most convenient hosting plan for a beginner.

1) With one click installation – shouldn’t take more than 3 minutes for a beginner. Here’s a full tutorial on how to do that with Bluehost.

2) Manually – this could take approximately 20-30 minutes. (Click to expand the tutorial)

Your New Joomla Website

Because of our choice of sample data, your Joomla site is set up like a blog.

There are 4 posts on the homepage. Click on the title of any post to see the full content.

There’s also a sidebar with typical blog features such a list of recent posts, a Blog Roll and a list of Most Read Posts.



In the introduction I mentioned that Joomla now uses the Bootstrap framework. Shrink your browser to see how Joomla reacts on smaller screens.

The search box moves under the title, the image shrinks effectively and the sidebar slides under homepage posts.



Logging in to your Joomla website

Now let’s see the admin interface of Joomla 3.

Add the word /administrator/ to the URL of your site. For example,

Login using the admin username and password that you created during the installation process.


Joomla’s admin interface has been completely redesigned for Joomla 3.

The main toolbar across the top of the screen contains everything you need to manage your site.

The Control Panel you see after first logging in contains useful shortcuts and information based on that main toolbar.

Thanks to Bootstrap, the admin interface is also mobile-ready.


Let’s write our first content in Joomla.

In the main toolbar, go to Content, then Article Manager.

There are only three things you need to do to publish your first article:

  • Title: My first article
  • Category: Blog
  • Body text: I’m publishing in Joomla 3 for the first time


Click Save to publish your article.

Click your Site Name in the very top left corner of the screen.

You’ll now see your article published at the top of the homepage.

At the bottom of the homepage there will be now be pagination so you can scroll back to older articles.



Go back to the administrator area.

Let’s go back to our new article so we can show you some more additional features.

You can find your article in the Recently Added Articles box. You can also find it by clicking Content and then Article Manager in the main toolbar.


You can add images to Joomla articles by using the Image button under the body text.

Click Image and you’ll see a pop-up window with the existing images on your site.

To use a particular image, click on the image to select it and then click Insert.

Scroll down inside the pop-up window and you’ll be able to upload new images.



The sidebar contains the most important options for each article.

  • Status: publish the article or keep it as a draft
  • Access: if you set this to Registered, only logged-in users can see it. Set this to Special and only site admins can see it.
  • Tags: as with WordPress, you can organize content with hierarchical categories and also with free-form tags.


More advanced article options are available inside tabs at the top of the screen.

  • Publishing Options: set start and finish dates for publishing the article.
  • Article Options: control the display of the article.
  • Configure Edit Screen: choose what users can see when editing the article on the front of the site.
  • Inside Metadata Options: add a meta description and more.
  • Article Permissions: control access and editing capabilities.


To browse and organize all of the articles on your site, close the article that you’re editing and click Content then Article Manager.

You can see of your site’s content in the main area.

On the left sidebar you can use the Filters to drill down and find articles.


Joomla templates

The design of your Joomla site is controlled by templates.

In the main toolbar, go to Extensions, then Template Manager.

Click My Default Style (Protostar) and then the Options tab.

You can change the text and background colors of your template, upload a new logo and add Google fonts.



The main features in Joomla are called Components. They have their own link in the main toolbar.

3 of the default extensions are particularly useful:

  • Contacts: allows to create contact forms
  • Joomla Update: one-click update of the Joomla core
  • Tags: Organize the tags you add to articles

Any major feature that you add on to Joomla will appear in this Components menu.


We’ve seen that our Joomla site has a sidebar full of blog features. Joomla uses the word modules for those sidebar items.

Click Extensions then Module Manager and you’ll see a list of those blog features: Older Posts, Blog Roll, Most Read Posts and so on.

You can see that most of these modules are in position-7.


Finally, let’s see how to control our sidebars.

Inside Extensions, then Template Manager, click the Options button at the top of the screen.

Set Preview Module Positions to Enabled.

Now add ?tp=1 to your site’s URL so it looks like this:

You’ll now see the names of all the different regions where your modules can be placed. Looking at the default modules, you can confirm that most are indeed in position-7.


In this tutorial so far we’ve seen the default Joomla features, but a popular platform like Joomla has 1000’s of extra available options.

The one place to look for reliable extensions is This directory was launched in 2006 and there are now about 9000 extensions in categories from “Access & Security” to “Style & Design”. The directory’s full name is the Joomla Extension Directory, or the JED for short. I’ll call it the JED throughout this tutorial.

One major difference between the JED and the WordPress plugin directory is that any extension can be listed, regardless of whether or not they have a free version. So, it’s fair to say that the JED really does contain every Joomla extension worth using. You can be suspicious of anything of not listed here.


The JED has an active review and rating system.

Some of the most popular extensions on the directory have 100’s of reviews and each one is rated according for its functionality, ease of use, documentation and support.

The image below is taken from the “Access & Security” and security category at You can see from the order of the extensions that the number of reviews has a major impact. When you search the JED you’ll normally find the most popular and well-trusted extensions on top.


Click on “Akeeba Backup” and you’ll see a great example of the information about an extension. Akeeba is one of the most popular extensions in the Joomla ecosystem – many, many people use it for backing up their sites. Here’s the Akeeba Backup listing with labels showing where to find different details:

  1. Extension name
  2. Download link
  3. A detailed description
  4. Reviews
  5. Other extensions by the same developer
  6. Version number, Developer name, Last updated date etc.
  7. Download, support and documentation links


Let’s use Akeeba Backup as an example of downloading and installing and extension.


  • Click the blue “Download now” button.


You’ll get a compressed file sent to your desktop with a name similar to

Don’t extract this file – just leave it compressed. If your computer did automatically extract the files (as Macs sometimes do), you will need to compress the folder again.

Now let’s upload the Akeeba Backup extension:


You’ll now see a welcome message from Joomla and the extension developer. In this example, Joomla says “Installing component was successful” and the extension says, “Welcome to Akeeba Backup!”


We know from the message that Akeeba Backup is a component, so let’s look under our “Components” menu. There it is – Akeeba Backup has been successfully installed. You can click on the menu link in the image below and start using Akeeba Backup to make backups of your Joomla site.



You can use a similar process for finding any feature for your Joomla site:

  1. Visit
  2. Search for an extension by looking at the description, reviews, ratings and information that’s available.
  3. Download the extension you want to test.
  4. Login to your Joomla site and upload the extension.

There are around 9,000 Joomla extensions available now so whatever feature you’re seeking, you’ll be able to find it on

Other Helpful Resources

Here are some addition resources that you can feel free to have a look at:

If you need any help setting up a Joomla website, feel free to contact me:

This article was written in partnership with

  • +


Leave a Reply

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

You may use these HTML tags and attributes:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

  1. I’m trying to break into web maintenance and revamps. I have limited education, but am quick and eager. Is Joomlashack really worth the money. I understand that the same content is probably scattered across the web, but are the hours searching worth the education that you would really receive vs. paying for something all in one place? My husband is skeptical at best, and he holds the monetary keys for now. I would love an experts unbiased opinion. I’m interested in the top three free CMSs, getting back to my coding basics, and marketing. As a stay-at-home mom maintaining 2 tiny websites, I have a lot to learn.

  2. My mother uses Joomla, and she tried to show me how to use it a few years ago. It was fun to play with, but I never quite understood how to use it on my own without her there to help. I’d tried to use it on my own and failed, thinking it was super complicated. This helps a lot, and now I think I’ll be able to use it without her standing behind me telling me what to do. (And finally be able to set it up correctly). Thank you!

  3. Hi,
    We currently use Joomla for our website and it has been working perfectly up until now. Basically what is happening is I am entering products and images and they are all saying published on the admin page but when I act as a customer and go to check out my website the products and images have not loaded to public. Also I am having difficulty changing my product menu colour, it is currently grey but needs to be white or red so that you can read it properly.

    Any advice you can give me would be great.


  4. I am having trouble setting up shoutcast with joomla free player. I received information that there is a Codec issue. Is there information available on this? I am also attempting to install JomSocial. Logout and Login is not connecting properly. Does YouTube offer the best source for learning Joomla?