Installing TNG in WordPress

[steven]

Installing TNG in WordPress is easier if you place TNG in a folder inside the WordPress folder. If you install TNG outside WordPress, the permalinks will not work, without rewrites, because they point files or folders inside the WordPress folder. If you want to install TNG outside the WordPress folder you will need to create an htaccess file in the root folder that redirects the WordPress page to TNG. I do not recommend modifying WordPress code because updates will overwrite your changes. These instructions are for installing TNG in the WordPress folder but if you prefer using separate sub-folders for WordPress and TNG you can read about and download an .htaccess file here.

The WordPress Permalink, for your TNG page, must point to the TNG folder so WordPress can find and load TNG. Plain permalinks do not allow editing so you must select a "pretty permalink". Day and name as well as month and name will work but I prefer post name.



If you do not change the permalink structure and try to edit the permalink for your TNG page, Change Permalinks will be the only option available.



Once you have changed the permalink structure create a blank page. Name the page whatever you want to appear in the WordPress menu. You can optionally give the permalink a different name by selecting the edit button. In this example Genealogy appears in the WordPress menu but the TNG folder name is tng. Remember to select Update to save your changes before leaving the page.



Make sure the TNG folder name and the permalink name are the same otherwise all you will get is a blank page.

The second part of getting the TNG page loaded is create a new TNG header file. This file loads the WordPress page and header. Creating a new footer will help avoid conflicts with some pages not displaying correctly.

1 - If you copy an existing TNG installation, set template switching OFF before you begin.

2 - Create a folder inside the WordPress folder and either install or copy TNG in the new folder.

3 - Go to the WordPress dashboard and select Settings then Permalinks and select a Pretty Permalink and save the settings. (You can actually select anything except Plain but I prefer Post Name)

4 - Create an empty page in WordPress. Name the page whatever you want to appear in the WordPress menu and publish the page.

4a - If your theme supports multiple templates, you have the option to create a custom template for TNG. You can enter codes in your template to control styling and page functions. To create a template use an editor such as Notepad++, Wordpad or Komodo IDE to enter the following line of code, which must appear on the first line:

Code: Select all

<?php /* Template Name: your-template-name */ ?>;

4b - Save the file in the active theme folder. The path looks similar to: wordpress/wp-content/themes/your-activetheme-name

4c - Go to WordPress and open the empty page you created for TNG, go to page attributes and select the template you created. Remember to select publish before you exit the page to save any changes.

 
5 - When you create a new page, WordPress creates a permalink with the same name as the page. The page name can be anything but the permalink name must match the name of the TNG folder. If your TNG folder has a different name from your WordPress page, edit the new page and change the permalink, near the top of the edit page, to the TNG folder name you created in step 2 and publish the page.

6 - Create new TNG header and footer files, per Cees Kloosterman's instructions. Place these files in the TNG folder.

Header File Content:

Code: Select all

<?php
    require ("../wp-load.php");
    get_header ();
?>;

Footer File Content:

Code: Select all

<?php
    //Sidebars are dependent on the theme you use and may not display.
    //Undelete the next line if you want to display the sidebar on TNG pages
    //get_sidebar();
    get_footer ();
?>;

Darrin recommends adding a wp-tng-meta.php file so even though my site was working I added this file per his instructions.

Meta File Content:

Code: Select all

<?php   global $cms;  ?>
<link href=”<?php echo $cms[‘tngpath’]; ?>  css/mytngstyle.css” rel=”stylesheet” type=”text/css”/>

You can select one of the links below to download the files. I suggest downloading the newer version as the original files do not support mobile devices switching from desktop back to mobile. If you previously installed the older files, overwrite them with the new version.

TNG-Header-Footer-Meta.zip

(636 Bytes) Downloaded 2515 times

Created 5/1/18

The original header-footer files created by Kloosterman did not allow mobile devices to switch from desktop back to mobile when using the WordPress footer. The download file below corrects this omission when using the WordPress footer.

TNG-WordPress-HFM-Mobile.zip

(966 Bytes) Downloaded 1242 times

INCLUDES MOBILE SWITCH MODE
Created 8/4/19

7 - If this is a new install login to TNG goto Setup >> Configuration >> General Settings and select Site Design and Definition. Enter items B through E on the appropriate lines. If you copied a prior installation, manually edit the TNG config.php and make the following changes (line numbers are approximate depending on version):

A - Change line 52 $rootpath = "/volume1/web/wordpress/TNGFOLDER/"; (Change to use your path and folder name)

B - Change line 54 $tngdomain = "http://YOURDOMAINNAME/wordpress/TNGFOLDER"; (Change to use your domain and folder name(s))

C - Change line 91 $customheader = "wp-topmenu.php";

D - Change line 92 $customfooter = "wp-footer.php"; (Optional if you want to modify the footer or add Google Analytics for example)

E - Change line 94 $custommeta = "wp-tng-meta.php";

 
8 - Go to the WordPress dashboard and select Appearance then select Menus. Select the checkbox for the TNG page you created and select the add to menu button to add your page to the menu structure. How and where menus appear are determined by the theme you use.

9 - Keep in mind WordPress will not change the state or appearance of the link or menu button for the TNG page when selected because TNG is not part of WordPress. If you want the link or menu button to change appearance, you need to add a line to your mytngstyle.css file. The line below shows the code to add. You must change the X to the item number for your link or menu button. Be sure to change the background color to match the other links or buttons.

Code: Select all

#menu-item-X > a { background-color: #fff !important;
}

To determine the correct menu number, start WordPress and hover over the link or menu button you created for TNG. Right click and then select inspect. A window will open on the right side of your screen. The highlighted line will indicate the link or button and the line above will contain the page link. The next line up contains the menu item value. Replace the x in the css line above with this value. The value you enter will be numeric and the number of decimal places are determined by WordPress. Note if you delete and re-create the WordPress page the menu item number will change and you will have to edit mytngstyle.css and change the value. In the example below, the menu button is #menu-item-1117.



Notes:
Line 6 refers to the the TNG folder unless you are using or created a template. If you are using a template the header, footer and meta files must be placed in the active template folder TNG is using otherwise WordPress will not load your TNG pages.

Line 7A shows the path for a Synology DSM. If you make a fresh install of TNG in WordPress, you will not need to edit this line because TNG will find and load the correct path. However if you are copying or moving a prior TNG installation you will need to edit the line. If you are using a hosted website the path could be different. It's a good idea to verify the path is correct before making any changes.

If you copied a prior installation of TNG, the links to the SQL database will remain and you will not lose any data. TNG should load in WordPress if you performed the steps above correctly. Once you have TNG working in WordPress you can make future changes using TNG admin. If the page does not load check your spelling and the permalink structure or the page permalink.

If your WordPress menu does not appear on all TNG pages you can use the Menubar Link MOD to create a link to WordPress from your TNG pages. Additionally the MOD can be used if you want to run TNG separately from WordPress but access the WordPress URL from TNG.

[Paul Barrett]

1. What level of user integration is there between TNG and WP? Is double login required as you move between the two apps?

2. What's the easiest way to copy the TNG data from an online resource? I have LOTS of media and when I moved from Ancestry to TNG (using FTM as the gateway app) I could not get the media to stay attached to their records.

Paul

[steven]

1. A double login is required because TNG and WordPress are separate programs using different databases so there is no native integration. TNG has a third party plugin for integrating with WordPress but I have not used it and cannot offer any guidance for integrating logins.

2. The easiest way is use phpMyAdmin to export and import the database. Export your existing database in the SQL format. TNG stores links in the TNG database. If you export the original database and then import the database into your new system, the links will remain provided media is stored in the same folder hierarchy with the same names as the originals. To preserve your structure, copy all the TNG folders and their content to the new location. If you copy everything, will need to edit the TNG config.php file if anything is different for the new installation such as the root path, database connect info, domain names etc.

Here is info without integration on the Lythgoes.net/wiki page.

Here is a link about using the TNG/WordPress plugin.