4 steps to building your first Joomla website

Written by Scott Greenwald Posted in Joomla Tutorials

4 steps to building your first Joomla website

If you've followed my tutorials on installing Joomla locally or on a web host, then you're probably wondering, "What do I do now?" This tutorial will help you set up your Joomla website from scratch. I'll walk you through 4 easy-to-follow steps:

  • Step 1: Create a website structure.
  • Step2:  Add content and articles
  • Step 3: Create a main menu
  • Step 4: Add modules to your Joomla website.

A Joomla website only needs 4 main pieces to operate succesfully: Articles, Menus, Modules and Templates. There could be a 5th piece here, Extensons. But, extensions are by no means required to run a successful Joomla website. I'll cover extensions in a future tutorial.

For the sake of this tutorial, we'll be looking at a completely vanilla Joomla installation. Don't worry, you'll be able to follow along just fine if you've already installed the sample data.

Step 1: Site Structure

If you haven't yet planned out the organization of your site, then stop here, get a pen and paper, and sketch up a rough outline like the example below. Focus on the main menu for the top tier, with each box being a menu link representing different sections of the site. If you've already done that, then way to go! You just knocked out one of the 4 steps without even knowing it!

website outline

Now that you have a general idea of your site's flow, let's head back into the Joomla administration panel.

Step 2: Adding content via Articles

All of your site's content will be stored in what Joomla calls "articles". First, we need to create article categories. Go to Content > Category Manager.  You should see a default category named "Uncategorized". You can use that for static pages like About Us, Our Services etc.. Named categories are useful if you're planning on having a lot of articles, like a blog site or news site would. Don't worry about category descriptions, most Joomla sites don't display them on the front-end. Let's create a category called Latest News, which will be appear like a blog in the front-end.

Joomla Category Manager

Once you have a your categories in place, we can create articles. Press the Articles tab or go to Content > Article Manager & press the New button. All you need to do here is 1) add an article title, 2) select a category, then 3) add your article text. I usually create a "Welcome" article to serve as the home page, and an "About Us" article; both uncategorized. I'll also create a few articles to place in the Latest News category. When you're done, press Save and close the article. Congratulations, we're half way through! Only 2 steps to go.

Joomla Article Manager

Step 3: Create a Main Menu

Now that our content is in place, we need to build a navigation menu. Go to Menus > Menu Manager. There should already be a Main Menu installed by default, containing a link to your Home page. This is called the "Default menu item."

Joomla Menu Manager

Select the Menu Items tab. If left alone, this Home menu item will display your featured articles in a blog layout. You can easily change that if you wish to display a single article as your home page. Simply click on Home then press Select next to the Menu Item Type field. In the popup window, select Articles > Single Article. Next, on the right under Required Settings, press the Select/Change button. In the popup window, choose the full article you wish to display as your home page.

Menu Item Type

Let's create some more menu items. This is a good time to refer back to your organization chart from step 1. Let's create a link to our "About Us" article. Select New and follow the same steps as we did for the Home page, choosing the Article layout and selecting an article. We'll create one more item to house our Latest News category. For this we'll choose the menu type under Article > Category Blog.

Step 4: Position the Menu on the site

The last step is to place the menu on the site. Joomla templates use modules to place content in various positions on the page. Go to Extensions > Module Manager. Press New and select Menu from the Module Type popup window. Give it a title like Main Menu, and press the Hide Title button.

Joomla Module Manager

Next, select a module position for the menu. It's important to know that each Joomla template has a unique system for naming it's module positions. Some templates make it obvious, like "top" while others can be more discreet in their naming conventions, like "position-1." Refer to your template's module positions guide for the exact name. If you don't have a guide handy, use this little trick I included at the bottom of this article.

I'm using the "Beez2" template for this tutorial, which tends to be on the discreet side of module naming conventions.  Let's place the menu in the Top, named "position-1" . Set the Status to Published, and select the Main Menu name under the Basic Options. Then press Save & Close.

Let's add one more module. Go back to the Module Manager main screen and press New. This time, select Latest News. This module will display the titles of the most recent articles from a category. Give it a name, and select a position. I want this module to appear on the right side of the home page: position-7 in the Beez2 template. Under Basic Options, I'll choose my Latest News category. (FYI: hovering over the labels usually shows a tooltip about each item). Lastly, I only want this module to appear on the Home Page only. So, on the Menu Assignment section, select the option "Only on the pages selected". Under the Main Menu tab, uncheck everything except the Home Page then press Save.

Module Assignment

Congratulations, the basic setup is complete!

The front end of your Joomla site should look something like this (using the Beez2 theme).

Basic Joomla Home Page

We can see our main menu up top, and our welcome article and latest news module on the home page. Unless you're company is named Joomla!, you probably want to add your own logo to the header. If you're using the Beez2 template, changing the logo is done in the template parameters under Extensions > Template Manager > Beez2. In Beez2 Advanced Options you can do things like upload a new logo, or press Clear to use the Site Title & Description text instead. You can also change the template's look & color scheme by selecting Personal or Nature.

Beez2 template advanced options

Beez2 nature theme

The sample above is using the Beez2 template set to the "Nature" color, with the Site title and Description appearing instead of a logo image.

Success! Our basic Joomla site is up and running. Now that you have a basic understanding of the Joomla system, it's easy to add more pages and menus to your site.

I should also mention that there are plenty of places to get awsome looking Joomla templates. My favorites template clubs are Rocket Theme and Joomla Bamboo. If joining a club isn't your thing, check out ThemeForest. They have lots of great looking Joomla templates ranging between $20 to $40 each.

I almost forgot that tip...

Heres the tip I mentioned earlier about discovering ANY template's module positions. In Extensions > Template Manager, press the Options button in the upper right.
In the popup, set [highlight]Preview Module Positions to Enabled. [/highlight] Save & Close. (pictured below)

Joomla template options

Joomla template styles preview module positions

Next, go to your site's home page and add this to the very end of the url and press enter: ?tp=1

show joomla module positions

You should see an overlay of all your template's module positions and names, as pictured below. I recommend taking a screen shot to save for later use. Important: For security purposes, don't forget to disable that setting when you're done.

Module position preview

Thanks for reading. I hope this tutorial is helpful in getting you on your way with Joomla! Now you can brag to all your friends how easy (and fun) building your own site with Joomla can be.

I'd love your feedback on this. If you have any comments or questions, please leave a reply below. 

Scott Greenwald

Scott Greenwald

Scott Greenwald is designer and front-end developer. He's been a Joomla addict since 2007 and a contributing author to the Joomla! Community Magazine.
Follow Scott on Google+ and Twitter. Subscribe on YouTube for exclusive video tutorials.

Comments (25)

  • Elliptical reviews
    Elliptical reviews
    17 December 2011 at 08:20 |

    Strongly suggest adding a "google+" button for the blog!

  • Turchi383
    Turchi383
    19 December 2011 at 08:59 |

    Cheers like your Joomla beginner's tutorial: 4 steps to building your first website.

  • Eloise Uyehara
    Eloise Uyehara
    27 December 2011 at 09:57 |

    My spouse and i still can't quite think I could often be one of those studying the important tips found on your blog. My family and I are truly thankful for the generosity and for offering me the opportunity to pursue my personal chosen career path. Thank you for the important information I got from your web page.

  • Emerson Bermel
    Emerson Bermel
    04 January 2012 at 08:17 |

    I like this weblog it's a master piece! Glad I noticed this on google.

  • Fausto Hemmingway
    Fausto Hemmingway
    07 January 2012 at 05:40 |

    Hello, i read your blog occasionally and i own a similar one and i was just curious if you get a lot of spam responses? If so how do you protect against it, any plugin or anything you can recommend? I get so much lately it's driving me mad so any help is very much appreciated.

  • Avery Piety
    Avery Piety
    08 January 2012 at 00:55 |

    I like this post, enjoyed this one appreciate it for putting up.

  • Mauricio Pletz
    Mauricio Pletz
    08 January 2012 at 19:55 |

    I just want to say I am just beginner to blogging and site-building and absolutely liked your web-site. Almost certainly I’m likely to bookmark your website . You definitely come with fantastic article content. Regards for sharing with us your website.

  • Demarcus Hershberg
    Demarcus Hershberg
    09 January 2012 at 08:31 |

    Sweet website, super design and style, real clean and employ friendly.

  • Leslie Camilli
    Leslie Camilli
    09 January 2012 at 09:10 |

    Would love to incessantly get updated outstanding blog!

  • Lindsay Orzalli
    Lindsay Orzalli
    10 January 2012 at 02:50 |

    Sweet web site, super layout, very clean and utilise friendly.

  • Sheila
    Sheila
    15 January 2012 at 08:16 |

    Nice to read your blog

  • Paul
    Paul
    19 February 2012 at 04:31 |

    Great article! Fantastic starting block for anyone new to the world Joomla.
    Thanks

  • Rachmat
    Rachmat
    23 May 2012 at 08:51 |

    I like your tutorial article. It is very easy to understand. Thanks a lot.

  • Chris
    Chris
    27 May 2012 at 04:41 |

    Thanks alot for the tutorial. Please, could you add advanced tutorials on Joomla? I really need to Master this awesome CMS.

  • patric
    patric
    21 July 2012 at 06:09 |

    Very helpful to me as a beginner, i had so many questions regarding where to start but i finally got my help here. am hoping to be smart in future and design professional website using joomla. but the problem am thinking of now is how will i deal with changinf fonts to the corporate fonts and colors? Thanks for this piece of information.

  • Rahmat
    Rahmat
    28 September 2012 at 09:25 |

    hi,

    I am a web designer and i knew something more wordpress, but i want to learn joomla. this tutorials are useful for me.

    Thanks

  • Kate
    Kate
    28 December 2012 at 17:28 |

    I discovered you when looking for How to: migrate from jm1.5 - jm2.5 and can I say its wonderful to put a face to the name. Loved the simple video, watching you making the steps online is sooooo much easier and faster than reading every step.

    I'm sure others would agree, video steps makes is easier.

    Thank You, I'll stay tuned for your help and pass on your site to friends :-)
    Cheers Kate
    P.S There is too many conflicting posts about how to migrate that confuses people. I'm sticking with you as you made it so easy. Now I just have to work out virtuemart to match :-)

    • Scott Greenwald
      Scott Greenwald
      28 December 2012 at 17:29 |

      Thanks Kate! I appreciate your nice comments :)

  • Zimisele
    Zimisele
    25 January 2013 at 22:40 |

    Your blog was very helpful to me thanks.

    Last thing if you can help how I hide the date which the article was publish as well as the name of author.

    I did go to article option and change user global into hide but still do appeared.

    • Scott Greenwald
      Scott Greenwald
      26 January 2013 at 11:17 |

      If the global settings in the Article Manger have no affect, then you can check two other places. 1) The individual article settings. 2) The menu item options (If your category has a menu item associated with it).

  • Rahmat
    Rahmat
    02 February 2013 at 22:57 |

    hi

    I like this tutorial , basicaly highlight preview ,

  • Beyowi
    Beyowi
    08 April 2013 at 04:26 |

    Nice article, totally agree Joomla is one of the best cms to build a website

  • Event management software
    Event management software
    18 July 2013 at 15:46 |

    Thanks for this stepwise tutorial,it's very helpful for the new users of joomla.

  • Bhoopendra Vishwakarma
    Bhoopendra Vishwakarma
    27 January 2014 at 15:52 |

    nice to read your blog and tutorils.

  • Prem Tiwari
    Prem Tiwari
    15 February 2014 at 18:25 |

    Greate sharing...
    Thanks a lot.

Leave a comment

You are commenting as guest. Optional login below.

The Joomla! name and logo is used under a limited license granted by Open Source Matters,
the trademark holder in the United States and other countries.
JoomlaDirect.com is not affiliated with or endorsed by the Joomla! Project or Open Source Matters.

joomladirect-logo-header

Hosted by SiteGround Hosting