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!
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.
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.
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."
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.
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.
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.
Congratulations, the basic setup is complete!
The front end of your Joomla site should look something like this (using the Beez2 theme).
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.
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)
Next, go to your site's home page and add this to the very end of the url and press enter: ?tp=1
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.
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.