1.3 Joomla Site Structure

In this article, we will cover how to set up the initial folder structure of our Joomla website and then use these categories to create our category menu items in our Main Menu.

Create Website Categories and Folders
Before you write articles and/or add images to your website, you should create the category folders to place the articles and images in. There are several sets of folders you should create for your website. Below is a series of steps to complete this often-overlooked process.

#1 Create your website folders on your Home computer
#2 In the articles folder, create category folders for articles
#3 Write short descriptions for each category
#4 In the images folder, create the same category folders for images
#5: Create the same category folders with the Joomla Categories
#6: Create the same category folders in your Joomla Media Manager

Let’s take a closer look at each of these steps.

#1 Create 4 website folders on your Home computer
First, we create categories as folders in the File Manager on our home computer to store our articles in. The following is the folder structure you should have on your home computer in a unique website folder for every website you make:

01

The top folder with the name of your website is called the root folder or the root directory. For example, your top level folder for your business website might be called My Online Store. Inside of this top folder are at least three other folders, an articles folder, an images folder and an extensions folder.

#2 In the articles folder, create category folders for future articles
The first folder in the root folder is called articles and should contain all of the categories of articles and articles which will eventually be posted in your article manager in your Joomla website. These articles should be assigned to category folders just as articles on your website are assigned to categories. Open up the articles folder and create 4 category folders called 0 Welcome, Free Stuff, Products and Services.

02

Then open the Products folder and create two categories of Products called Books and Cars. Then open the Cars folder and create three categories called Skoda, Volkswagen and Audi.

 

Planning Categories and Articles for use with a Mega Menu

The 0 Welcome folder holds the Welcome article and any other articles that only appear on the Home page of our website. The remaining categories hold sub-categories and/or articles in those categories. Here is an example of a mega menu with a total of 12 categories which have been divided into three groups – with each group having one top level group category and four second level categories. Each second level category has 4 articles. Each article is displayed as a single web page.

03

#3 Write brief one or two sentence descriptions for each category.
Open a new Libre Writer document and save it as My Website Categories and Description. Then list your 3 categories (excluding the Welcome article) and write a short one or two sentence description for each category.

#4 Create Category folders for your images on your home computer
In addition to using our categories to create folders to place articles on our home computer, it is also wise to create identical category folders for the images on our home computer. Opening up the images folder reveals the same category folder structure used for articles. Note that these images folders are in lower case letters with no spaces between the words while the category folders for our articles began with capital letters and had spaces between the words:

04

Inside of the products images folder, create folders called books and cars. Then inside the cars folder, create three folders called skoda, volkswagen and audi. The folder names are short as these will also be used as part of the file pathway for our images on the server and we do not want long names in file pathways. Once you are done creating your website folders, close your file manager.

 #5 Create categories folders with the Joomla Category Manager
To create these same categories with the Category Manager, from the Joomla Administrator Control Panel, go to Content, Categories. Then click on NEW to bring up the Category New screen. Type in the title of your new category. It is okay to use capitals and spaces. Then copy and paste the description for that category in the workspace. Here is the screen for our first category:

05

Then click SAVE and CLOSE. Do this for all 3 of your website top level categories. Then create folders for both of your second level categories (Books and Cars). Assign them both to the Products Parent Category. Then create folders for each of your 3 third level menu items and assign each to the Cars parent category.

When you are done, the new categories will look like the following:

06

If you have a lot of product categories, you can use numbers in front of the names help keep the categories and articles organized.

 #6 Set Up the SAME Category and Article folders in your Media Manager
We will next create an identical images structure in the images folder on our server root folder. Log into your Joomla Administrator Control Panel. Then click on Content, then Media. Inside of this Images folder, you will find existing folders called banners, headers, phocacartcategories, phocacart products and sample data. We can always delete these folders later. For now, our goal is to create folders for every category we created with our categories manager. To create a new images category folder, click CREATE NEW FOLDER. Then type the name of the category (in lower case with no spaces) in the box to the left of the words “Create Folder”. Here is what the folder looks like for our first category:

07

Then click on CREATE FOLDER. Repeat this process for products and services category folders. Then click on the products folder to open it. Then click Create New Folder and type in cars. Then click Create Folder. Then click Create New Folder again and type in books. Then click cars to open that folder. Then click Create New Folder and call it skoda. Then click Detail View. Here is what our category image folders look like:

08

Later, we will create sub-folders in each of these categories folders for each of the articles in that category to hold the images in that article. To open one of these folders, simply click on it in the left side menu. Now that we have our category folders made and our category images folders made, we are ready to add our category menu items to our Main Menu.

Make Category Blog Menu Items
Once we have our Content categories, we can create category blog menu items for each of our top-level categories. Then, as we create articles, we can assign them to these categories and they will automatically appear in our category blog pages with links to the individual article pages. The primary exception to this process of assigning articles to categories is with the Welcome article which is not assigned to any category and appears as a “Featured” article on our Home page.

Make a Category Blog Menu Item
A category blog menu item can be used on any page where you want a group of articles all displayed on the same page. To create a Category Blog Menu Item, go to Menus, Main Menu and click NEW to create a New Menu Item. Then click the Blue Select button to bring up the Select Menu Item Type screen.

09

Joomla has many menu item types. Click on Articles. Then click on Category Blog. This will take you back to the Menus, New Item screen.

10

Click on the Gray Select button. This will take you to the Categories screen. Select the first category you made. Then in the Menu Title box, type the word Free. This will bring up the title for your first category. Click on the pop up and the title will be entered into the title box. Then click Save and Close or Save and New to repeat the process for your second category. Here are our 3 of our category blog menu items once we have finished: Here are our menu items in the front end of our website:

11

Click on the category Free Stuff to see this page and there will be a notice explaining that there are no articles in this category. Sadly, the category description is also missing. To fix this, we will need to change some of our Blog Layout settings.

Blog Layout Options
Blog Layout Options, set either globally with the Article Manager or individually with the Menu Item Edit screen, control the appearance of the blog layout page. To edit blog layout options globally, go to the Content, Articles screen and click on the OPTIONS button in the upper right corner. Click on the Category tab. Then change Category Title and Category Description from Hide to Show. Then click Categories and change Empty categories from Hide to Show. Then click Save and Close. Then view the front end of your site again and click on the first category. Now even if there are no articles in a category yet, at least the category descriptions will appear.

12

What about the appearance of the menu?
The stacked appearance of the menu is pretty ugly. This appearance is controlled by the default Protostar template which sadly is not very good. In a later section, we will add a better template which will give us much more control over the appearance of the main menu.

For now, we will confirm the current module position of the Main Menu. Then pick a new module position. Then change the Main Menu from a vertical to horizontal layout.

Confirm the Main Menu Module Position

Go to Extensions, Modules and you will see that the Main Menu is in position-7. To see what this means, go to Extensions, Templates Styles. Note that the Protostar template has a Gold Star to the right of its name. Protostar is therefore the default Joomla template. Templates control the appearance (but not the content) of our website. Click on Templates in the left column. Then click on Options in the upper right corner. Then click Enable Module Positions. Then click Save and Close. Then click Protostar Details. Then click Template Preview.

13

This shows all of the module positions for the Protostar template. The word Home is where our main Joomla article content will appear. Position 7 is the right side bar position. Position 8 is the left side bar position. Position 0 is the Header position. Position banner is a full width position just below the header. Position 3 is just above the main content and position 2 is just below the main content. The Breadcrumbs module is in Position 2. Close the Template Preview and close Protostar Details. Then click Options and disable Preview Module Positions. Then click Save and Close.

Move the Main Menu to a new module position

Click Extensions, Modules and click on the Main Menu module to open it to the Module Edit screen.

14

Change Show Title to Hide. Then click on the drop down arrow to change the module position from position-7 to Protostar banner position. Then click Save and close and view the front end of your site.

15

Change the Main Menu from Vertical to Horizontal

By default, all menus on all websites are lists of menu items. Lists are displayed vertically. To change this, we need to add a module class. Go back to Extensions, Modules and click on the Main Menu to open it. Then click on the Advanced tab. In the Menu Class Suffix box, type a space. Then type the lower case letters nav-pills:

16

Then click Save and Close and View site.

17

Replace the Header using Template Styles

Click on Extensions, Templates, Styles, Advanced. Then click Select. This brings up all of the images in our Media folder. Click Headers, Walden, Insert. Then click Save and Close and View our Site.

18

What’s Next?
Now that we have our content categories and matching category menu items, we will next add a Welcome article.