Joomla Content 101

I like to think of Joomla as the content management system that I love to hate. I know WAY too much about it to just stop what I am doing and start over again with another CMS. I have done some simple things with WordPress and Drupal, when it comes right down to it, I can install a working Joomla site with 4 server commands.

People often ask me about how Joomla organizes its pages/articles, so I figured I would make up a quick blog entry.

Joomla content is organized in sections and categories. The easiest way I can explain it is like this.

Say for instance, you have content to organize that is all computer/IT related. Articles about Desktop applications, Internet applications, Troubleshooting, Anti-virus, Windows, Mac, Linux, etc…

So lets start organizing our content in Joomla.

In Joomla, log into the administrator interface and under Content -> “Section Manager”. section_mgr

To create a new section,

  1. click the green +New button on the right.
  2. For right now, just give the section a Title : Computers
  3. click “Save” (we can come back later and add in a description).

Now, Go to Content -> “Category Manager” and lets create a few categories.

  1. Click the green +New button on the right
  2. Give the category a title : Desktop Applications
  3. Select the Computer section from the drop down menu.
  4. click “Save” (again, we can come back later and add a description
  5. Repeat 1-4 and create Internet Applications, Troubleshooting, Anti-virus, Windows, Mac, Linux

Now to add a new article in the Desktop Application category, go to Content -> “Article Manager”

  1. First, lets grab some content from the internet. Open another browser window and go to http://why.openoffice.org/ and copy (highlight with your mouse, right click, copy) the first paragraph.
  2. Back to Joomla, Click the green +New button on the right
  3. Give the new article a title : Open Office – Free Alternative to MS Office
  4. Select the Computer section from the section drop down menu, then select the Desktop Applications category from the category drop down.
  5. Joomla comes with a built in WYSIWYG web editor to create your articles. Right click inside the editor, and Paste in the Open Office info. This should paste the info in and retain the formatting.
  6. Let create a hyperlink – double click on the word “downloaded” in the content to highlight it and then click the link icon link_icon on the editor toolbar. This will open up a window to create a new hyperlink :createlink
  7. Enter the information as shown and click Insert.
  8. Now, after the words “common computers.”, click the “Read More..” button below the editor.
  9. click “Save”.
  10. Repeat 1-8 and create articles in each of the other categories : Internet Applications, Troubleshooting, Anti-virus, Windows, Mac, Linux

 

There are a couple basic types of menu links when you are linking directly to your content articles.

Picture_20

An “Article Layout” lets you create a direct link to a single article.  A “Category Blog” lets you display a show snippet of the articles in the selected category with a link to “Read More”.  A “Section Blog” is like a Category Blog, however, you guessed it, it shows all the articles from the selected Section.  The “snippet” will be the article text that appears up until the “read more” link you inserted above.

 

 

 

 

 

 

 

Now that there is some content, lets create some menu items. First go to Menu -> Main Menu

Picture_19

Lets first create a direct link to the Open Office article we created above.

  1. Click the green +New
  2. Select “Articles” -> “Article Layout”.
  3. Title will be the menu link, Title: Open Office
  4. Click the “Select” next to “Select Article” and click the Open Office article.
  5. For right now, leave “top” selected as the “Parent Item” and “Public” as the “Access Level”
  6. click Save.

In another browser window, load up your website and you should now have a new link on the main menu called “Open Office”.

Now lets create a “Category Blog Layout

Picture_21

  1. Click the green +New
  2. Select “Articles” -> “Category Blog Layout”.
  3. Title will be the menu link, Title: Desktop Applications
  4. Select “Computers/Desktop Applications”  next to the Category drop down menu.
  5. You can display your blog items in different ways, for now, lets go with the defaults. This will display 1 leading article across the top, then up to 4 intro articles in 2 columns, followed by a list of up to 4 additional links.
  6. For right now, leave “top” selected as the “Parent Item” and “Public” as the “Access Level”
  7. click Save.

In another browser window, load up your website and you should now have a new link on the main menu called “Desktop Applications”.

Now lets create a “Section Blog LayoutPicture_22

  1. Click the green +New
  2. Select “Articles” -> “Section Blog Layout”.
  3. Title will be the menu link, Title: Computers
  4. Select “Computers”  next to the Section drop down menu.
  5. You can display your blog items in different ways, for now, lets go with the defaults. This will display 1 leading article across the top, then up to 4 intro articles in 2 columns, followed by a list of up to 4 additional links.
  6. For right now, leave “top” selected as the “Parent Item” and “Public” as the “Access Level”
  7. click Save.

In another browser window, load up your website and you should now have a new link on the main menu called “Computers”.

Last lesson for tonight is to clean up the menu items.  Joomla lets you create sub-menus.  Under the “Main Menu”, click on the “Open Office” menu item to edit the menu link.  Under “Parent Item”, select the “Desktop Applications” item and click Save.

You should end up with the menu list looking like this :

Picture_23

Now, depending on your selected template (I’m using the Beez template), you will have a “tree” menu.  See these results online at http://geolaw.com/J/

Picture_24

 

 

 

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=""> <strike> <strong>