Add Links to TNG
Introduction
At some point, TNG webmasters will want to add links to their websites. The term link is shorthand for Hyperlink and it is used in an electronic document to let users display or activate another document or program.
The basis for creating links on a TNG site is the Uniform Resource Locator (URL), commonly referred to as a web address. The URL lets us find a website and drill down into it for a specific page or program.
The easiest, quickest way to create a link to a TNG page is to access the page and add it's URL to your browser's bookmarks. This is surprisingly useful for routinely accessing administrative pages and utilities that are not intended for the public.
Imagine
Website
This article discusses ways we can turn a URL into a useful hyperlink on our TNG pages or menus. For illustration, we will use an imagined website:
www.example.com
TNG
Our TNG program files are installed in a subfolder of the website named genealogy. The URL for accessing TNG can be either of the following:
www.example.com/genealogy www.example.com/genealogy/index.php
These both work because in the first example, the server looks for a file name index.php by default. The second one works because the index.php file is explicitly named.
Server
On our equally imaginary server, TNG is at:
/home3/myfamily/public_html/genealogy/index.php
Index.php is TNG's public access file.
Target File
The target for our hyperlinks will be Family Group Worksheet (FGW) installed in a subfolder of the TNG root directory at:
www.example.com/genealogy/fgw/fgw.php
If you don't completely understand any of the above, please use your favorite search engine to further research Internet URL construction and use.
HTML Hyperlinks
TNG uses PHP, Javascript and HTML, but webpages only understand HTML. PHP is a server-side programming language used to generate HTML. Javascript is a client-side language that manipulates HTML on your computer.
The HTML format for a hyperlink to the Family Group Worksheet is as follows:
<a href="www.example.com/genealogy/fgw/fgw.php">FGW</a>The label FGW is presented as a link with default styling: FGW
With CSS you can change its color, remove the underline, and make it bold italic if you want. The next example puts a default link into context -- into a line of text. It uses valid HTML formatting to shorten the lines to make them fit the box below.
Please see
<a href="www.example.com/genealogy/fgw/fgw.php">
Family Group Worksheet
</a>The result will look like this: Please see Family Group Worksheet
Absolute Vs. Relative Path
Programmers often refer to the URL as a "path." In this case we have an absolute path because it starts at the root of the Internet and ends up with the script for the Family Group Worksheet.
Another kind of "path" is a relative path because it starts from the current location of your script in the site's directory tree. With FGW running in its own subfolder, it could refer to a TNG file using a relative path like these:
<a href="whatsnew.php">What's New</a>
<a href="../whatsnew.php">What's New</a>
<a href="../../whatsnew.php">What's New</a>If the script containing these hyperlinks resides in the fgw folder, then:
- tells the system to look for whatsnew.php in the current folder (fgw). Since it does not exist there it will throw a File Not Found error.
- tells the system to move up one directory (genealogy) and look for the file there. The file will be found and processed.
- tells the system to move up two directories and open the file. This takes us to the website's root directory and, since the file does not exist there, will result in File Not Found error.
PHP Generated Hyperlinks
As previously mentioned, PHP produces HTML for web pages. Typical PHP code would echo a link to the page:
echo "Please see <a href=\"../whatsnew.php\">What's New</a>";That almost looks the same as HTML, but with one critical difference. The text string to be echoed must be enclosed in quotes, but the hyperlink also uses quotes, so how does the system know where the echoed string ends? The answer is to escape the inner quotes -- the quotes that occur before the end of the echoed string. Quotes are escaped by preceding them with a backward slash. If you look at the last example given, you will see we have done just that.
You will also notice that PHP statements end with a semicolon whereas HTML statements do not.
At this point you should be able to add hyperlinks to PHP or HTML text on your pages, so lets move forward and look at adding them to page menus and TNG drop down menus.
Home Page Menu
There are a variety of possible menus on a TNG Website. Some home pages only contain one menu that is coded in the index.php file for the template you are using. To add a link to an existing menu, open the file containing the menu with a code editor, and find the PHP or HTML code that creates the menu items. You will see a number of entries similar to the HTML links shown above. The way to add a link is to determine where in the menu you want to place it, open up an empty line for typing, copy and paste one of the existing lines, and change the path and link text, being careful to not to change any of the other surrounding code. This is called coding by example, and is a tried and true method for modifying scripts providing you are careful to retain all the tags and punctuation.
Lets start with a menu that is unique to the home page -- that is, only found in the index.php (home page) file. Such is the case in template 5, where there are three lines of links near the top of the home page. If we open index.php we find a section marked "third Line of Links." It starts with a link to Notes and ends with a link to the Contact form. Let's insert a link just before 'Contact Us'.
<a href="browsenotes.php" class="lightlink2"><?php echo $text['notes']; ?></a>
| <a href="browsesources.php" class="lightlink2"><?php echo $text['mnusources']; ?></a>
| <a href="browserepos.php" class="lightlink2"><?php echo $text['repositories']; ?></a>
| <a href="statistics.php" class="lightlink2"><?php echo $text['mnustatistics']; ?></a>
| <a href="bookmarks.php" class="lightlink2"><?php echo $text['bookmarks']; ?></a>
| <a href="fgw/fgw.php" class="lightlink2"><?php echo $text['ws_linkname']; ?></a>
| <a href="suggest.php" class="lightlink2"><?php echo $text['contactus']; ?></a>This script (index.php) is a combination of HTML and PHP, but it doesn't matter. We inserted an empty line between Bookmarks and Contact US. Then we copied the line above it and changed only the path and link name. A predefined variable -- $text['ws_linkname'] -- must be placed in our cust_text.php files for every language we support to name the link. It is not recommended you do this with a mod unless all your language files are either ansi or utf8. If you only offer one language you can hard code it like this:
| <a href="fgw/fgw.php" class="lightlink2"><?php echo "Submit Family"; ?></a>
Note of caution: make sure you have a fresh copy of any file you modify just in case things go awry.
Top or Side Menu
Each TNG template has a file named topmenu.php. In some templates this produces a horizontal menu across the top of the page. In others, it creates a vertical menu down the left side of the page. Regardless of its position, it differs from the home page in that it appears on all the other TNG pages. Remember, we are just using the Family Group Worksheet as an example.
Template 4 uses a vertical menu on the left, so let's insert a link after Most Wanted. Open topmenu.php, find the menu items and locate the link for Most Wanted, open an empty line after it, copy an existing line into it, and modify the path and link label.
Notice that the code has some new elements in it. Since we are going to code by example, we don't need to know the details as long as we are careful to leave everything but the link and link name unchanged.
echo "<li><a href=\"{$cms['tngpath']}mostwanted.php\"
class=\"lightlink\">{$text['mostwanted']}</a></li>\n";
echo "<li><a href=\"{$cms['tngpath']}fgw/fgw.php\"
class=\"lightlink\">{$text['fgw_linkname']}</a></li>\n";
echo "<li><a href=\"{$cms['tngpath']}browsemedia.php?mediatypeID=photos\"
class=\"lightlink\">{$text['mnuphotos']}</a></li>\n";
echo "<li><a href=\"{$cms['tngpath']}browsemedia.php?mediatypeID=histories\"
class=\"lightlink\">{$text['mnuhistories']}</a></li>\n";
TNG Drop Down Menus
Starting about version 10, TNG gave us the capability to add links to TNG drop down menus or create an additional custom drop down, without having to edit TNG scripts. All it requires is that you describe the custom menu and/or links in your customconfig.php file.
Here are customconfig.php definitions for the first three items in the menu below:
// Custom Menu
$custmenu['title_text'] = 'More';
// Custom Menu links
$link_nr=0; // the first link in the menu is always number 0
$custommenulinks[$link_nr]['target'] = "bfc/index.php";
$custommenulinks[$link_nr]['sprite'] = "";
$custommenulinks[$link_nr]['icon'] = "newsletters/bfc.gif";
$custommenulinks[$link_nr]['label_text'] = "About Us";
$link_nr++; // increment the number for each additional link
$custommenulinks[$link_nr]['target'] = "faq/index.php";
$custommenulinks[$link_nr]['sprite'] = "";
$custommenulinks[$link_nr]['icon'] = "img/tng_help.gif";
$custommenulinks[$link_nr]['label_text'] = "FAQ";
$custommenulinks[$link_nr]['admin'] = false; // optional
$custommenulinks[$link_nr]['tip_text'] = "Frequently Asked Questions";
$link_nr++; // increment the number for each additional link
$custommenulinks[$link_nr]['target'] = "fgw/index.php";
$custommenulinks[$link_nr]['icon'] = "img/tng_families.gif";
$custommenulinks[$link_nr]['label_text'] = 'Submit Family';
$custommenulinks[$link_nr]['admin'] = false;
$custommenulinks[$link_nr]['newwin'] = true;If this is more to your liking please refer to Custom Menu Hook.
