Creating your First Aricle in Joomla

USING MANAGER LEVEL ACCESS IN JOOMLA OVERVIEW

With manager level access you are able to use the “back-end” of the website to create articles complete with pictures, tables, links and other attributes and then assign these to menus in order that they are displayed on the website.

While there are a range of features in Joomla to which you do not have access, manager level access means that it is very unlikely that you could accidentally “damage” the website. The worst you can really do is “trash” an article and even then the “trash can” cannot be emptied so the article can always be restored. While I appreciated that you are unlikely to make serious mistakes or try something malicious it is good to know that as your business and website expand you can give other people this level of access with a high degree of confidence that the site is safe.

To understand how to use the system it is useful to understand what is going on in the background.

In any Content Management System (CMS) the content of the site is held in a database rather than being hard coded into a page. Once the content has been created and stored you have to tell the system where you want that content to appear. You do this by assigning it to a menu. When somebody is looking at your website and clicks on a menu item the system gets your article from the database and displays it.

One of the advantages of this is that you can display any item of content on many different pages without having to reproduce several times. The menu system gives you wide range of control over what is displayed, how it is laid out, on the web page (when coupled with different templates) and what is displayed with it. We will examine menus in more detail later.

A WORD ABOUT BROWSERS

It is quite likely that you are using Internet Explorer (IE) as your browser. There is no reason why you should not use IE but you will find that others are better for working on your site, primarily because they are faster. Different browsers will reproduce pages in slightly different ways, not sufficiently different for most people to notice when browsing your site but you will gradually discover them.

There are two browsers that I would recommend; Mozilla Firefox and Google Chrome. Firefox is significantly faster than IE and is as far as I am aware absolutely free from quirks when working with Joomla back-end. In tests a couple of years ago Firefox was shown to be about 7 times as fast as IE although the gap has been narrowed there is no doubt that it is still significantly faster.

The other alternative I recommend is Google Chrome. It does not have as many features as the other two but it is significantly faster. “Chrome is the Lamborghini of Web browsers. It’s built to be the fastest browser out there, and--like a Lamborghini--it does so by putting powerful technology under the hood and adding just enough on top to make it street-legal, but not much more” as PC World puts it.

There is one problem with Chrome; it does not work well with Joomla backend when formatting tables. This does not affect the way tables appear in the front end; it is just that the dialogue box used for formatting tables does not work properly in Chrome.

Personally, since I use tables on few occasions I prefer to use Chrome for its blindingly faster speed and open Firefox when I want to work with tables.

On a final note, Joomla back-end is quite happy for you to have two or more “tabs” open and be logged in on two or more browsers. What it will not let you do is open the same article twice or even open an article that somebody else has opened for editing. While you are unlikely to want two tabs open with your current level of access and knowledge you will probably find it useful later.

Both browsers can be found and downloaded by typing “Firefox” and “Chrome” into any search engine.

ACCESSING THE “BACK-END”

You gain access to the back-end of your site typing www.mysite.***/administrator into your browsers address bar. A login page will appear into which you type your user name and password press return and this will take you to the menu page of the back-end which looks like this.

The main areas you are concerned with now are those shown as icons: •

Add an Article

•

Article Manager

•

Front Page Manager

•

Section Manager

•

Category Manager

•

Media Manger

Each of the can also be reached via the top menus – which reads Site, Menus, Content, Components, Help. Feel free to have a look at each of these on your system.

Sections and Categories Articles are allocated to a Section and a Category. There is a hierarchy to these in that each Section may have a number of Categories. When adding an Article you must either add it to a Section or

Category or deliberately select “uncategorized”. This selection is done on the editing page for the article and the system will not let you save an article unless you have made this selection.

This system of categorising articles in this way has obvious benefits once you have lots of articles on your site. However the major benefit is that it provides an easy way to display many articles on a single page. We will cover this in more detail in another session.

CREATE YOUR FIRST ARTICLE

Click on the “Add an Article” icon. This opens the window shown below

The left side of the screen (Basic Properties marked above) allows you to give the article a Title, an Alias, Select a category and section for it, decide whether it is published immediately and whether it is shown on the front page. (More about the front page later.) The right side of the page allows you to set a wide range of parameters for the article Begin by giving your article a Title in the top left text box. This should perhaps be described as the Name of the article; it will be known by this name within the back-end of Joomla and it is also the Name that will appear in the browser tab. (It is not the unique identifier of the item – the system provides a unique number automatically – so you can change this name later if you choose) Do not give it an alias; the system will do this for you, removing capital letters and replacing spaces which makes it “friendlier” to programs. Under section select “uncategorized”. (You will see that it automatically selects “Uncategorized” for Category – The system only displays Categories for the Section you have selected.) Leave it saying Yes to Published and No to Front Page.

As you move down the page you will see, in small writing the words “Show/Hide”. This actually switches the editor between a user friendly WYSIWYG one and a pure “html”. It is possible to accidentally click this as you drag your cursor across the screen. If you suddenly find the “Ribbon” of icons has disappeared you have probably done just that. Just click it again and all will return to normal. The first time I did it, it left me puzzled for hours.

You can now go to the editor section of the page. The editor shown is not the standard editor that comes with Joomla but a free component called JCE. This is much more capable than the standard one and we always add it to sites we build.

The first icon you can see in the ribbon on the top of the editor is a help button. This opens a separate help window which will take you through the workings of the editor in detail. You will also find that if you rest your cursor over any of the other icons a “Tool Tip” opens and gives a description of what the icon does.

Begin typing your article. Start by giving it a more descriptive title than that in the Text box in which you named the article Then press carriage return and move down to the next line (i.e. press Enter).

Carry on typing your article and if there are any secondary headings put them on a separate line.

Do not format the text as you go along!

Now for the formatting! On the top line of the “ribbon” you will see the usual icons followed by 3 drop-down lists for fonts, size and style. These are followed by the usual “justification” icons and you get to a final drop down list headed “Format”. When you click on the down arrow on this box it will give you a list beginning with Paragraph, Division and then Heading1, Heading2 etc. These have been preset in the Template (or Templates installed) on your site.

These installed styles have the advantage of giving a consistent look and feel to your site. Even more important they relate to “tags” which are recognised by the search engine robots as they travel round the net looking at web pages. They will recognise the Heading 1 title as and H1 tag which tells them this line is what the page is all about and they will recognise the H2 tags as headings that tell them about the sections of the site.

For that reason you should use these “format” tags to set the style for the various bits of your page.

If you are unhappy about the way these Formats are formatted there are two solutions. If you are generally unhappy about the appearance of all pages using the template then the template itself can be changed. If, however you want to make a change to the appearance of this article and only this article you can now use the various other formatting tools on the ribbon to override the style set for each of the headings.

Using these tools now leaves the “tags” in place in place so they will be recognised by the search engines.

You have now completed your first article. You can now save the article by clicking the save icon in the area marked “Save etc”. You will see several other buttons here: •

Preview- Opens a window to let you see what the article looks like

•

Save

•

Apply - Saves but leaves the editor open

•

Cancel - Closes the editor, takes you to the article manager without saving the article

- Saves the article and closes the editor taking you to the article manager screen

It is actually a good idea to click the “apply” button every so often particularly if the article is a long one.

The area of the screen we have not looked at yet is the parameters button; we will look at this in a later lesson.

MENUS

When you began creating your article you set left the “published” radio button set to Yes. Although the article is published it still cannot be seen in the front end of the site because we have not told the system where we want it to appear.

We do this by adding it to a menu item.

In this site there are two menus available. (For this site we will actually be creating many more menus.) There is always a Main Menu, it is installed automatically when Joomla is installed and it cannot be deleted.

A second Menu, called Top Menu in this case, has been added. It is a horizontal menu that appears across the screen somewhere near the top of a page. Its precise position depends on the template.

You are going to add your article to the Top Menu. Place you cursor over Menus, the drop down list appears, and select Top Menu. This opens up the screen below.

This screen shows a list of all the items in the Top Menu and towards the right hand side top it shows a, now familiar row of icons.

You want to add a new item and article to your menu so click “New”. The screen opens and, since you want to add an article, click Article.

There are a large number of other things you can add to a menu but we will cover these in later sessions. Clicking articles the tree shown on this screen as sown below.

You will be choosing “Article Layout” but we will quickly cover the others.

•

Archive Article List

- Creates a menu item with a list of all archived articles

•

Article Layout

- Creates a menu item displaying a single article

•

Article Submission Layout- Creates a menu item to open a front end page for adding articles

•

Category Blog Layout

- Displays a number of article from a given category

•

Category List Layout

- Displays a list of articles from a given category

•

Front Page Blog Layout

- Controls the way the Home Page is displayed

•

Section Blog Layout

- Displays a number of articles from a given section

• Section Layout - Displays a list of articles from a given section Select “Article Layout” and the screen opens with

Give the menu item a Title by typing it into the text box (top left). This is what will appear on the menu in the front end so keep it fairly short.

Once again leave the Alias blank (the system will complete it for you) and leave the “Link” Item as it is. This is useful for some other menu items but for an article layout it will fill it in automatically.

The next box asks you what you want as the parent item. You can make the article a sub-menu item, in other words it appears as a child of one of the existing items or you can simply add it to the list. If you are going to make it a child of an item you will need to check with us that we have set up the menu to display child items.

In this case you are going to display it as a straight forward item so just leave that box set to “Top”.

You can then set whether the menu item is published or not – this allows you to get it set up in advance and turn it on or off as required.

You can then set the access level, who is able to see the menu item: •

Public – All visitors to the site

•

Registered – Those who have registered with the site and logged in

•

Special – People who have higher access rights granted to them

The last section to set in this area is the “Target”. This actually means “will you show the article in the same tab the in the browser that the viewer is on, a new tab, or a window without the usual browser navigation. For the time being leave this set to “Parent window with browser navigation”.

The final thing you must do is select the article you want published. On the right hand side of the screen you will see an area marked Parameters (Basic) in which it says “Select Article”. Click on the

button to the right labelled select and a window opens up from which you can select the article, click on it and you are now ready to save the menu item.

So save it and go to the front end of your web site and you will see that you have published your first article.

Next session we will look at the parameters for your articles and for menus.