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

http://joomla.org/3/ 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

http://www.joomla.org/download.html 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.

Download_Joomla_3

Installing Joomla

To install Joomla – you have two options. For both ways, you’ll need a hosting and domain name. I’m recommending www.bluehost.com 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.

Sample_Joomla_Website

 

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.

Joomla_is_responsive

 

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, http://YourNewDomain.com/administrator/

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

Joomla_Login

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.

Joomla_control_panel

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

first_article_in_joomla

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.

first_article

 

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.

recently_added_articles

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.

step15

 

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.

details

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.

step17

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.

List_of_Joomla_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.

Advanced_options_for_Joomla

 

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.

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.

step21

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: http://YourNewDomain.com/?tp=1

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.

module_positions

Extensions.Joomla.org

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 http://extensions.joomla.org. 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.

browse_categories

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 http://extensions.joomla.org/category/access-a-security. 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.

media_1426877716468

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

Akeeba_Backup_Joomla

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

Download_extensions

  • Click the blue “Download now” button.

Download_extension(2)

You’ll get a compressed file sent to your desktop with a name similar to com_akeeba-4.1.2-core.zip.

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:

Upload_Install_Joomla_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!”

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.

media_1427048284589

 

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

  1. Visit http://extensions.joomla.org
  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 http://extensions.joomla.org.

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: robert@websitesetup.org

This article was written in partnership with OSTraining.com

  • +

6 comments

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.

    Thankyou

  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?