Home arrow Editing in Joomla CMS
How to Edit Pages in Joomla CMS

How to edit pages in Joomla CMS

Joomla is the benchmark for both standard web publishing tasks and multimedia content management systems. An editing guide to this CMS therefore has the largest audience, and the tips can also be applied to many other WCMS.

New CMS webmasters, and site owners coming to Joomla for the first time, will have many questions even on basic subjects like editing. There are also lots of tips and tricks that can make CMS operation easier.

The content editing process

To understand this we need to look at the process and what's involved. This includes:
  • The 2 main types of content
  • Sections and Categories
  • User accounts
  • Frontend and backend editing
  • How to edit page content or module content
  • Plugin visual editors
  • How to create a new menu
  • How to create an anchor link
  • Creating links in a CMS
All you need is for basic editing is here on this page. It looks complex at first, so just read a little and try and put that into practice. Then, revisit this page as you get further down the line. It gets easier - especially when you start to understand the concepts involved, and the facilities available to you.

The two main types of content

As far as text content goes - and frequently non-text items such as image slideshows, as well - there are two main containers: content items and modules. Most text editing will be done by working with content items, but plenty is often held in modules, which are the separate display blocks seen around a page.

A 'content item' is frequently a page, though it could be a small item that appears with others on a page. Page content items (but not module content items) can be subdivided into two types: the standard type and the discrete or static content item. We refer to the two main types as a CI or DCI.

A CI is the normal type of content item that is published on any page - such as for example brochure pages, product pages or information pages. Such items or pages are the main business of the site, and can be arranged or published in various ways.

A DCI is less commonly used and may hardly feature on your site at all - this type is not necessary to use, in fact. It is a item or page that is standalone, such as a 404 page. It isn't normally used in the main part of the site, and in fact can't be, as it cannot be moved into another section or category. Only create a page (or item) as a DCI if you don't intend it to be moved or re-used - like a 404 page of course.

As a rule, make all new pages standard content items within a section and category, even if you're not sure - this is never wrong. DCIs are not necessary and are utilised by those who wish to explore every possible avenue.

For example you can create a Resources category and place these types of pages within that, instead of using DCIs.

Joomla 1.5
The new, current, Joomla series is 1.5.x, and will soon go to 1.6. In this new series a DCI is called 'Uncategorised' content. When you create an item (a page, if you like), it can be as Categorised or Uncategorised content. Categorised = the normal type of pages that are held in Sections and Categories, and can be moved. Uncategorised = standalone pages like 404 pages that will not be used elsewhere or ever moved. A 'Static Content' (Joomla 1.0) or 'Uncategorised' (Joomla >1.5) item is a DCI or discrete, standalone item. A content item is often a page, but it may be a smaller piece that will be used along with several others to create a page. It could just be a text snippet or image.

Sections and categories

You cannot create a page until there is a Category to hold it. You can't create a Category until there is a Section to hold it. If you are not sure what to call these containers, use something generic such as General or Products - you can change these names later.

There is always a question about whether to use category names - or even section and category names - in the URL or page address. You don't need to do this until you have over about 1,000 pages. Assuming your pages are named correctly for search, then there is no advantage in having a category name in the URL. And a section name as well is really for very large sites.

There are sites that are an exception to this, but not too many. Bear in mind that if you do decide to use a category name in the URL, you need to get that name right, from the beginning. Changing page addresses later is a pain to fix.

So if you have a category name in the URL it can be a disadvantage. Change is one of the reasons behind a CMS in the first place, but changing URLs always has some negatives.

User accounts

You should set up several user accounts just for your own use. The minimum number is normally three. This is because you allocate a wysiwyg editor to each user, and they can only use that one. However, a range of them often need to be used by the webmaster, since none of them do every job well.

For example TMedit is by far the best at text formatting, but handles images and anchor links poorly. On the other hand FCKedit handles images and anchors well, but is poor at text formatting. In addition, you may need a low-privilege user account so that you can see what a standard user might see, not an admin. This would be handy for frontend editing, and you could use the default Joomla editor TinyMCE for this. It is very restricted, which is appropriate for frontend users.

Frontend and backend editing

In Joomla you can edit from the frontend or backend. Unlike some CMS, there is a separate admin backend that is accessed from a different URL from the public frontend. After login, you will see all the main web application controls. You may also login via the frontend, and edit existing pages from there. That sometimes has a speed advantage and is certainly simpler. However there is no access to module content or any site controls from the frontend.

This brings up the next subject: how to edit an MCI. This is our term for a module content item, ie text or images within a module. You can now see the three main types of content you will be dealing with: content items, discrete content items, and module content items - or CIs, DCIs, and MCIs. As stated, you can mainly forget about DCIs, and concentrate on the two normal types encountered everyday, page items and module items.

Content in modules is that which is displayed in blocks or other separate areas around a page - in other words not the main page text or images. An MCI can only be edited from the backend.

Editing content

Login to the frontend or backend, whichever is your preference. First let's look at frontend editing. In order to edit pages, you need to allocate the user sufficient privileges to do this. There are 8 levels in Joomla. To edit pages via the frontend, a user needs to be set up as an Editor. The levels run as follows:

frontend users:
Guest (ordinary visitor, no privileges)
Registered User (a member, may be able to see private content if available)
Author (can create pages, but not publish them)
Editor (can edit pages)
Publisher (can create / publish / edit pages)

backend users:
Manager (same as Publisher but with backend access - can therefore edit MCIs)
Administrator (can create new users, also has main admin role)
Super Administrator (has top admin role, and is the only user who can see all admin tasks)

Frontend login
You can use any level of user account to login to the frontend. After login, if you are Editor-level or above, you will see a small pencil icon next to the page title on every page. This is the editor icon or symbol. Click this and it brings up the editor. You can now edit the content in wysiwyg mode (ie visual editing, not code editing, as in MS Word for example).

If you want to paste code in, such as pre-formatted HTML, then hit the HTML / Sourcecode icon on the editor's control panel - named <HTML> or Source. This normally works OK, but sometimes some tags get stripped, so it isn't a perfect solution for prebuilt code. To input that correctly you need to create a user with 'No WYWSIWYG Editor Allocated', in the User Manager, and this user will have a plain editor page that code can be pasted into without being altered in any way. This type of use is rare, but needed when a pre-formatted page needs to be published exactly as-is.

Backend login
To login to the admin backend, go to the admin URL, which is for example:
www.   yourdomain.com/   administrator/
[change the domain name for yours and remove the spaces]

You must be a manager or above (eg an admin) to login via the backend. After login, you will be at the admin Home or main control panel. You can use the main icons at left, or the text menu at the top. To edit a page we'll need to find it: hit the Content Items Manager icon at left, and that takes you to the content listing. If you have more than 50 pages on the site you will probably be better off at this point if you filter the results shown, by using the filter text boxes at upper right. For example choose the Blue Widgets category, to just show pages in that group - otherwise it can be hard to find the page you need.

Click the page name you need, and the editor opens, with that page ready. Here you can type in plain text, or place images where needed. You can also place other types of content on the page here, such as tables or slideshows. A pre-formatted table of various items nicely lined up and itemised can be pasted in, or you can create one using the editor controls. A slideshow, image rotator, Flash video and so on can be placed on the page using the control that the individual plugin provides.

Use the Apply icon at top right, every minute or so. Use the Save (and exit) icon after your final work has been saved by use of the Apply button. Take your time and relax, with these controls - rushing it and clicking in a hurry will not help and may lose your work. The save process may take a few seconds - just wait until it's done. Think of the time you are saving by this method - weeks of waiting for a site coder to publish the page, which you can now do in a few minutes. Relax, don't click like crazy, it won't happen any faster.

Using a tabbed browser for CMS editing

In order to edit a CMS efficiently it is important to use a tabbed browser. Have two (or more) tabs open, so that you can quickly switch between views.

You should work with the left-hand tab (pane) showing the admin backend, and the right-hand tab showing the livesite. You can refresh the livesite view every time you Apply changes to the admin tab.

This is the most efficient way to work. If you don't have a tabbed browser then you will need two separate browser windows open, one showing the admin, one with the site.

How to find the content to edit it

When you look at a page on the CMS, it may be hard, at first, to work out where to find that text or images in the backend in order to edit it.

There is a simple rule of thumb here: the 'main content' or page content is likely to be the largest block of text (plus images perhaps) on the page, and is usually central to the page.

Text in separate blocks around the edge is in modules. Menus are also in modules.

Therefore to edit any given text, decide if it is likely to be main content, which will be a CI or content item in the backend, ie a standard content item in the Content Manager; or if it is in a module, it will be an MCI, and therefore to be found in a module, within the Module Manager.

Editing module content

Many sites have a lot of content in modules, and also Joomla uses modules to display menus. In order to edit an MCI we need to go to the Module Manager, so hit the Modules text link at top >> Site Modules >> and you are presented with the list of modules the site has available.

Modules are the container for addditional blocks of content. These may be integral to the CMS, or the visible part of a plugin. Some plugins are solely modules, and these are a form of low-level addition, probably quite small in terms of the amount of code. A component though is normally much larger, and is a more complex plugin - but it may also need a module to display the end result.

Click the module name you require and it will open in the text editor. Some modules have no editable content, and do not show the editor. You can edit the content exactly as if it were main page content. However, you should bear in mind how it will be displayed, since this is far more likely to be of concern here. Often you can use a CSS control within the module editor here, in order to vary the appearance of the module by preset variations.

Plugin visual editors

To edit pages in Joomla, a plugin visual editor (aka wysiwyg editor) is used. This is an interface device that allows you to type plain text, and the plugin converts it to the xHTML code that Joomla uses.

There is a choice of these editors, and as you might expect, Joomla has more available than any other CMS. Some cms are limited to one only, but there are about ten available here. The default one that comes with the core application is called TinyMCE (Tiny MoxieCode Editor). This is a good basic text editor that is suitable for restricted frontend users. However, users with more privileges - and certainly admins - will need a much better editor. The best are probably TMedit, JCE and JFCKeditor.

TMedit* is the best for text editing and formatting overrides, and JFCKeditor is best for image handling tasks. It is also better for anchor links. Xstandard is another basic one suitable for frontend users.

To install and use a new editor, you do this:
  • [Joomla 1.0] Go to Installers >> Mambots on the top text menu in the admnin backend. Install the editor mambot by following the normal procedure of: locate plugin zip file -- upload -- install.
  • [Joomla 1.5] Go to the top text menu in admin, Extensions >> Install/Uninstall, then browse to the zip file on your PC.
  • Create a new user in the User Manager, at the same level as yourself. Allocate the new editor to the new ID. This way, you've created a new identity for yourself, which has the new editor available. Login as the new ID to use it.

* To get around the TMedit copy and paste fault, see this page: CMS Content Editing

Font choices

The CSS code for the site determines what fonts are used where. If you need to override this regularly, then consider changing the CSS. Never specify font attributes as a matter of course (by using the controls in TMedit for instance), instead change the CSS.

However you may well find that a one-off font style is needed for a particular module, and it's quicker to use TMedit to fix it rather than write up a new CSS class. For main page content the best font and size is Verdana 10-point or 11-point. In a module, though, width / space may be restricted, and Arial can be a better choice since it is narrower than Verdana.

The normal font colours are black, dark grey, dark blue, and white when on a dark background. If you go outside this it can make your text look weird. Linked text will normally come up as another colour. Usability convention states that there should be some other way of telling that text is linked, apart from a colour variation - such as underlining - but people seem less willing to accept this now. One in ten men are colour-blind to a certain extent for instance, but many less women - so colour-only links are prejudiced against men :)

Module positions

It can be hard to work out which module is what, or how to get one into the position you need. There is a useful trick here on Joomla - use the module position reveal command. Type the following into your browser address bar:
www.   yourdomain.com/   ?tp=1
[replace with your domain name, remove all spaces]

This will show you the position and number of all modules on the page. In the Module Manager within the backend, a column on the right tells you the position: User 1 etc. To change it, open the module, and select a new position in the spin box there.

To re-order modules when there are several in the same position, change their position number in the column in the Module Manager.

Joomla Menus

Menus are displayed within modules - or to put it another way, a menu needs a module in order to be visible. You can see those modules that contain menus, within the Module Manager. Therefore a menu has two parts: the menu and the display module.

A menu can have any name, be displayed in any position on the page, and have any number of links / buttons. You can create new menus, and have as many as you like, named whatever you like. A menu can be shown as text, or as buttons - this is determined by the CSS, which controls many aspects of how the site looks.

To alter a menu link, go to the text link at top, Menu >> the menu name you need, eg widgetsmenu >> and you will see the list of links. Using the icons at top right you can delete or add items. The Move icon here refers to moving a menu link onto another menu.

To re-order menu items (moving the buttons up or down), then go to the column on the right headed Order, with a floppy disc icon at the right. The numbers in the boxes in this column give the link's position in the menu. Type in a new position number and click the FD icon, to re-order the menu items. Or, if you just need to move a link up or down one place, then use the small blue arrow buttons.

To alter the way a menu displays, go to the Module manager and work from there.

Create a new menu
1. Go to the Menu Manager via the text link at the top, in the admin backend.
2. Choose the New icon at top right.
3. Enter a system name for the new menu, in the upper text box - widgetmenu for example. All lower case, all one word, no spaces, no symbols.
4. In the lower box enter your menu title, to be visible if required - eg Widget Menu.
5. Save and exit via the icon at top right.
6. Go back to the Menu Manager, and now your new menu is visible. Click the system name here.
7. Add some links, by using the New icon at top right. Exit to the admin Home page.
8. Go to the Module Manager via the text link at top.
9. Scan down the list of modules, you will find eg Widget Menu here.
10. Click the name and you are taken to the menu display controls.
11. Check Publish, check Show Menu Title (if required), and choose a page position. If you decide to show the title, it will be shown at the top of the menu. Depending on the CSS, it may have a background or image associated with it. For some menus it will be appropriate to show the title, and sometimes it's best not to.
12. Save and exit.
13. Check the livesite.
14. Go back to the menu Manager to make changes in the displayed parameters - for example the menu position, or the module's CSS (the appearance).

Horizontal and vertical menus

There are many ways of displaying menus and positioning them. Menus can be text or buttons, arranged in a line horizontally, or in a stack vertically.

In general a horizontal main menu is used somewhere near the top of the page, for main links. This is something of a convention and works well for usability, since it is both expected and highly visible. A vertical menu is often used in the right or left column for page links.

Most sites find that the space is insufficient for the number of menu links they want to display, so that various other methods are used to display these links. This subject also impacts site architecture. One workaround is to use cascading menus, termed drop-down menus when applied to a horizontal menu, or fly-out menus for a vertical one.

There are many issues surrounding these. Firstly, this is a usability and accessibility negative since some or all of these items may never be seen. Secondly, the way they are implemented is critical to accessibility and search compliance, and therefore commercial success. There is only one way to do this successfully: by HTML / CSS, which means by plain web code methods that can be interpreted by any user-agent. A user-agent means a browser, screen-reader for the disabled, or a searchbot. For example Flash or JavaScript menus must never be used here as this is a major accessibility negative and blocks searchbots. However, JS can be used if it is 'redundant' - that is, additional to the functionality of the menu and not called unless wanted.

In practice, there is only one way to code a cascading menu: by the Suckerfish CSS method. Most advanced Joomla templates use this, but it's always worth checking.

In order to score highest for usability and accessibility it may be better to avoid any type of cascading menu if possible. The way to do this to have only the 6 or so most important links on the site, showing in the top horizontal navmenu. The rest are in side-column menus or elsewhere. Alternatively, the top navbar can have two lines instead of one, which is termed a Splitmenu by some template authors.

Anchor links

It is common to use anchors, ie anchor links / jump links / page anchors on web pages - this means a link to another point on the same page. To do this in Joomla you use the built-in facility in all editors except TMedit.

We need to link two points on the page. Normally this would be a reference or title, which is then linked to a word or just a point lower down the page. Using the standard visual editor, TinyMCE, or its common replacement, FCKeditor, the procedure is as follows:
1. First, lower down the page (usually), select (highlight) the word you require to be linked to as an anchor - or simply place the cursor at the right point. This is the point that the page will 'jump' to when the link higher up is clicked.
2. Click the anchor symbol on the editor panel, next to the chain links. A small pop-up window opens, with text boxes.
3. Insert the name of the anchor you want, using a short phrase or word.
4. Then, returning to higher up the page (usually), highlight the word etc that you wish to link down to the anchor. 
5. Click the chain link symbol on the editor panel. A small pop-up window opens, with text boxes.
6. Depending on the editor, select link type as anchor not URL, and spin the jump menu for anchor selection to the text you inserted before.
7. Apply or Save to exit that window, and check the livesite.
Now you will see that your text at the top of the page (usually) is linked, and when you click it you jump down to another spot on the page lower down. And that's an anchor link.

Creating links in a CMS

Links to another point on the same page are called anchors, as above. Links out to another site are called external links or simply links. Links to another page on the same site are called menu links or text links.

External links
A link that points at a page or file on another site can be created by placing the link on a menu button or as a text link. There is no difference to any other link except that you should use the full URL (page address). This means the address in its long format, with http at the beginning. For the exact method see below. Therefore you can link to any of these locations:

http://www.a3webtech.com   [takes the visitor to the site's front page]
http://www.a3webtech.com/some-page.html   [goes to a specific page]
http://www.a3webtech.com/download/some-file.pdf   [goes to a PDF file]

Menu links in Joomla
The best way to link to other pages on the site is via a menu link. You can use an existing menu, or create an entirely new menu. The new menu can have any name, and be displayed anywhere on the page that has a module position.

There are two methods that can be used: select an article (a content item) in the menu link configs, or use an URL if you know it.

Text links in Joomla
Alternatively any word or phrase can be linked. To do this, there are different methods depending on the editor used. One method is to link directly to the URL (address) of the page or item if you know it. You could go there and copy the URL to your clipboard, then use it like this: select / mark / highlight the required text. (These all mean exactly the same thing, to 'blue out' the text by click & drag with the mouse, or Shift+Arrow with the keyboard.)

Then hit the icon on the editor panel that looks like some links of chain. Paste the URL into the text box for the target that opens up. Save and exit that window, then Apply on the page (hit the icon at top right of the page), then check the livesite (refresh your browser first, to get the new page from the server).

You can also link directly to a content item via the editor, in many of the plugin Joomla editors. Highlight the text to link, as before, hit the Link icon, then select the item in the list in the link window when it opens - if the editor supplies a content listing.

Note that it is always best to have all pages linked in on a menu somewhere, even if your only desired link is just a text link on a page. This is because there is some functionality that needs a 'real' menu link for Joomla to operate correctly. This is especially so if you use a SEF URL plugin, which is an add-on that controls the URL format and therefore the page addresses.

Web Business Managers