Adding JavaScript To Joomla

This article explains briefly how to add JavaScript to your Joomla articles. I intended to give an example using an email verification script. But the article became too long and complicated. So here it is in simpler version. Keep in mind that all the steps must be completed before your script will work.

First download and install JIncludes, a plugin for Joomla. JIncludes is available for free under the GNU Public License (GPL) from the Joomla Extensions Directory. Be sure to read the instructions and always back up your system before making any changes.

JIncludes lets you add several types of code (JavaScript, PHP, HTML) to your Joomla articles. The procedure for each type of code differs slightly. For JavaScript code, you'll create an external file, then link to that file using JIncludes (see below).

Install The JIncludes Plugin

Install the JIncludes plugin in the normal way, using Joomla's Extension Manager. Before you can use JIncludes, you must configure it.

  1. Go to the Plugin Manager (Extensions>>Plugin Manager).
  2. Click on the "Content - JIncludes" plugin to configure it.
  3. Remember to enable the plugin.
Remember to enable the JIncludes plugin via the Plugin Manager.

By default, JIncludes lets you define 30 "snippets," which are a combination of code plus an associated key to call the code. The procedure for JavaScript is slightly different, however; instead of entering the code, you enter a path to an external .js file.

Create An External JavaScript File

In the example below, I created an external JavaScript file named formverify.js and uploaded the file to the default Joomla script folder. I gave the keyname "formverify" to the snippet. Now when I want to include that JavaScript file, I simply put the keyname in double curly braces within the article.

Launch The Snippet

Launch the snippet by putting the keyname, enclosed in double curly braces, somewhere within your Joomla article. Example (note: without the asterisk!),

{{ formverify }*}

Configuring The Plugin Parameters

Below is a screenshot of the JIncludes Plugin Edit page. There are three pieces of information shown: the keyname, a URL, and the type of code. Notice that the URL to the external javascript file is a relative URL, as indicated by the preceding forward slash.

("Relative" means relative to the home directory. In other words, we write:

/media/system/js/formverify.js

and not

http://www.foothillwebdesign.com/media/system/js/formverify.js.)

jincludes-plugin
Configuring JIncludes to include a JavaScript file

Verify The Source Code

Finally, if you look at the source code on the Contact page, you can see the link to the external file appears along with the other includes. It's only loaded on that page and no other page on the site.

source-code

Where to go from here

JIncludes' author provides extensive documentation online at http://joomlacode.org/gf/project/jincludes/wiki/.

 

Joomla Help: How To Remove "Welcome To The Frontpage"

One of the first tasks new Joomla users try to accomplish is changing the default page title. The page title appears at the top of your browser window. You'll want to change "Welcome To The Frontpage" to something appropriate for your own website, normally your business name and a few related keywords.

In Joomla, the page title is set from within the Menu Item page. In a typical install, your default page is the Home page, which is located in the Main Menu. To change the default page title:
  1. Log in to the administrator backend of your Joomla website.
  2. Go to your Main Menu by clicking on Menus>>Main Menu.
  3. You should see a number of menu items. The Home menu item has a gold star next to it, indicating that it is the default menu item.
  4. Click on the Home (or other default) menu item.
  5. On the Home menu item page, click on the Parameters (System) link.
  6. Type in a new title for the page.
  7. Click the Apply or Save button.
Although you have the option to set a global page title and site description, Google recommends that you choose unique titles for each page on your site. This helps Google to understand your website layout. Get in the habit of assigning unique page titles for each menu item you create in Joomla.
Tags:
   

Adding Footnotes To Joomla Articles

Witchakorn Kamolpornwijit's Footnotes for Joomla is a marvelous plugin that lets you easily insert footnotes into your Joomla articles. Footnotes is available free for download from Joomla.org. Here is a screenshot of the usage instructions:

footnotes

Just insert that code anywhere in your article to add a footnoteThis is a footnote.. You can move your footnotes around. The plugin autmatically sorts the list for you You can also add HTML links to your footnotes..

For help with installation, refer to Joomla's documentation. Remember to enable the plugin via the Plugin Manager! Be sure to backup your website before installing any new modules, plugins, components, etc.

The author of the Footnotes plugin is an 8th grader in Thailand and a winner of Google's Highly Open Participation Contest!


   

Hiding the Menu in Joomla

Each of your Joomla articles must have a corresponding menu link. Any article without an explicit menu link can't be displayed.

But occasionally there may be articles that you don't want accessed via the main menus. For example, an article describing the rules for your discussion forum (which would be linked from within the forum) or a redirect page after submitting an online form.

So how to display those articles? The answer is to use a hidden menu. The following steps describe how to create a hidden menu in Joomla.

  1. Create a new menu. Call it "Hidden Menu."
  2. Create a new article. The article content isn't important. It's just a placeholder. Call it "Hidden Menu Article."
  3. Add a new menu item in the Hidden Menu for the Hidden Menu Article. Use Article Mode from the list of menu item options.
  4. Create a new module (Menu type module) for the Hidden Menu. Set the menu to display only on the Hidden Menu Article page. (Remember to "publish," or enable, the module.)

Voila! You've created the Hidden Menu. The Hidden Menu is active, but doesn't display on any normal page on your website. Now you can add menu items (i.e., links to articles) that aren't visible to your website customers.

For example, you can create a redirect page for a form ("Your information was submitted, someone will contact you shortly, etc.") and put the menu item link in the Hidden Menu. Typically, such a page wouldn't need to be accessed directly by visitors.

The only thing left to do now is get the URL or address of the hidden page. There are a couple of ways to do it. You can use a module like Linkr, a free utility. Or you can set the Hidden Module to display on your home page temporarily, and simply copy the URL. Copy the URL and use it wherever you want. I use the JCE editor (which has a direct link button) and include it in my website designs.

Here's a link to a secret article that doesn't appear on this website's normal menus, only on a hidden menu:

http://www.foothillwebdesign.com/secret-article

   

Installing Joomla On Your PC

This quick-start guide explains how to install Joomla on your own PC. Experiment with your localhost installation before making changes to your live site. Complete documentation is available at Joomla.org.

Installing Joomla on a PC ("localhost")

  1. Download and install XAMPP from ApacheFriends at http://www.apachefriends.org/en/xampp.html. Choose the full version of XAMPP, not the lite version.
  2. Download latest version of Joomla from http://www.joomla.org. Extract the ZIP file archive to a directory under
    c:/xampp/htdocs
    For example, create a folder in
    c:/xampp/htdocs/joomla
    and extract the Joomla files there.
  3. Start the XAMPP Control Panel via the Windows Start menu, then start Apache server and MySQL database by clicking the Apache and MySQL Start buttons.
  4. Type http://localhost in your browser's address bar, then press the Enter key. This brings up the XAMPP Welcome Screen.
  5. From the XAMPP Welcome Screen, go to phpMyAdmin by clicking on the menu item.
  6. In phpMyAdmin, type a short descriptive name for your database in the Create New Database field. (Take note of the database name. You will need it later in the installation.) Click the Create Database button.
  7. Now you are ready to start the Joomla installation! Point your browser to the new Joomla folder. If you followed the instructions above, your new Joomla folder is located at:
    http://localhost/joomla
  8. You should now see the Joomla Installation screen. (Remember, XAMPP must be running first!) Pick your language and click the Next button at the top of the screen.
  9. Click the Next button to continue the installation. On the Connection Settings page, use the following settings:
    Database type: mysql
    Host Name: localhost
    User Name: root
    Password: nothing, leave it blank!
    Database Name: The descriptive name you chose for your database in phpMyAdmin (see above)
  10. Continue clicking the Next button. Don't worry about FTP settings for now. You can leave them blank.
  11. On the Main Configuration page, type in a name for your site, as well as your email address and a password to the Administrator area. Remember your password!

    Be sure to install the sample data by clicking the Install Sample Data button.
    When you receive a confirmation that the files were installed, then click the Next button.
  12. If all goes well, you should see a Congratulations screen. But before you can view your site, you must delete the installation folder from your hard drive. It is located at
    c:/xampp/htdocs/joomla/installation <-- delete this folder only!
  13. After deleting your installation folder you can view your website's frontend by going to:
    http://localhost/joomla
    You can also log in to the backend as a Super Administrator by going to
    http://localhost/joomla/administrator
    Administrator login:

    User Name: admin
    Password: The password you chose during installation

Where to go from here

Complete documentation and discussion forum is available at www.joomla.org.