You are reading this tutorial because you have a website powered by the Joomla! content management system. Congratulations!  Joomla! is one of the best ways to run a website. It is dynamic and expandable, with a huge community of developers and users (see http://www.joomla.org for more info.)

Click here to download this tutorial.

A key skill to develop if you want to maintain your own Joomla! website is the ability to add and create new content items on your website.

This tutorial is a step by step instruction on how to create or update a content item on your website.

As always, remember to use the Firefox Web browser to connect to your website.

We begin on the home page of the Joomla! administration backend. (For information on how to log into the back end, see the tutorial "How To Log Into the Back End." )

Hover your mouse over "Content" on the administration navigation bar:

A window should drop down with choices. Click on  "All Content Items".

This will take you to the Content Items Manager:

The Content Items Manager list all the content that is displayed in the main text area of your website

To edit any content item you must click on the red Title of that item in the left hand column. This will take you to the content editor screen. In this tutorial, however, we are going to create a new content item.

To create a new content item, click on the "New Icon on the icon menu displayed in the upper right.

This will open up the content editor page:

Notice that the administrator navigation bar is disabled. This is because you use the Save/Apply/Cancel Bar to exit the content editor.

Save/Apply/Cancel Bar

If you have created a document and wish to save it, you must click on "Save". This will exit you to the content items manager.

If you have made changes to the content item, but want to save without exiting, click "Apply".If you want to exit the content item without saving, click "Cancel."

For this example, we will be making a new content item to be displayed on the front page.

Adding Title, Section, and Category

First, we will give our content item a title and title alias:

Then we will select a section and category (before creating this content item, I created a new section called "Front Page Stuff" and also a category called "Front Page Stuff".)

*It's a good idea to keep your content items grouped by subject, or theme.

Entering Content

In general, input your content item into the "Intro text area" (See diagram on page 3.

Notice that there is a WYSIWYG editor above the intro text area. WYSIWYG stands for "What You See Is What You Get". This editor allows you to format the content of the intro text area (NOTE; Your wysiwyg editor may not look exactly like the one in the above screen shot.) The WYSIWYG editor has many commands similar to Microsoft Word. Explore this editor and play with the buttons, just remember to use the "Cancel" button in the upper right corner if you want to exit the content editor without saving your changes. An important button on the editor is the "HTML" button. This shows you the actual HTML that is being created when you type into the editor.

Linking to Front Page

Let's make this content item appear on the front page of your website. First, make sure that the "Publishing"  settings tab is selected:

Then click on "Show on FrontPage":

This will make the content item appear on the front page of your website.

Click "Apply" to save the changes to the content item while not exiting.

Previewing and Viewing Your Front End And Your Back End As You Are Making Edits

The simplest way to preview the content item that you are working on is to click "Preview" on the Save/Apply/Close Bar:

However, when you are making edits to your website, it is often useful to view the front end, to see how your edits appear. This means that you will leave the content editor screen open and open a new Firefox browser window to access the public front end of your website.

To open a new Firefox browser window, click on the Firefox browser window to make sure that this is the application that your computer has selected. Then click ctrl + N (command + N on Macs.) This will pop up a second browser window. Leave the old browser window open. You should have two browser windows now open. Enter the URL of your site into the newly created browser window, and press return. You should now have two browser windows open, one displaying the content editor and another displaying the front of your website:

Your newly created content item "that you published to the front page" should now be visible on the front page of your website.

(If you want to examine the configuration of the front page. Click "Home" on the administrator navigation bar. Then on the "Control Panel", select the Front Page Manager Icon".)

You may wish to take your site "offline", before you make changes. To do this select "Site" on the administrator navigation bar, then select "Global Configuration". In the global configuration area, set the option "Site offline" to yes. When the site is offline you can preview your site to observe your edits. To enable preview, select "Site" in the administrator navigation bar, and then select "Preview." Choose "In New Window" to see the front end of your website.

Exiting the Content Editor

Assuming that you are happy with the content item, it is time to save changes and return to the Content Manager. To save changes and exit, press "Save" in the Save/Apple/Close bar:

 
If you do not want to save the edits you have made, click "Cancel":

This concludes the tutorial. For information on how to insert pictures into your content items, please read the "Uploading Pictures" and the "Inserting Pictures Into Content Items" tutorials. Should you have any questions, please don't hesitate to call or email Floating World Web Development.