Installing TNG in WordPress

Post Reply
Posts: 36
Joined: Sun Oct 01, 2017 3:08 pm

Installing TNG in WordPress

Post by Steve » Mon Oct 16, 2017 1:15 am

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 because they can only point files or folders inside the WordPress folder. If you want to install TNG outside the WordPress folder you will need to use a custom permalink structure. In addition to creating the custom permalink, you will need to create an htaccess file in the root folder, with redirect code to the WordPress folder. I would not recommend modifying WordPress code or creating htaccess files unless you know exactly what you are doing. The wrong entries can disable access to WordPress and possibly your website. Additionally, if you modify WordPress, your custom code will disappear when updates are installed. 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 must point to the TNG folder in order for TNG to run inside WordPress. 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 Post Name 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. Note the page name can be different from the permalink name.

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, and place in the TNG folder.

Header File Content:

Code: Select all

    require ("../wp-load.php");
    get_header ();
Footer File Content:

Code: Select all

    //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_footer ();
You can select the link below to download the files.
(376 Bytes) Downloaded 59 times

7 - If this is not a fresh install and 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/";

B - Change line 54 $tngdomain = "http://YOURDOMAINNAME/wordpress/TNGFOLDER";

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

D - Change line 92 $customfooter = "wp-footer.php"; (Optional if you want to modify the footer)

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.

Line 6 refers to the the TNG folder unless you are using or created a template. If you are using a template the header and footer 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.

Paul Barrett
Posts: 6
Joined: Sun Apr 08, 2018 6:52 pm

Re: Installing TNG in WordPress

Post by Paul Barrett » Sun Apr 08, 2018 6:57 pm

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.


Posts: 36
Joined: Sun Oct 01, 2017 3:08 pm

Re: Installing TNG in WordPress

Post by Steve » Sun Apr 08, 2018 7:45 pm

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 page.

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

Post Reply