How to integrate WP and TNG in 10 steps
Since my previous post I received some questions on how to install the updated WP-TNG plugin. As this update does not include all needed files, I will describe the steps I followed.
The basic sequence is: install TNG, install WP and WP-Theme 2010, install WP-TNG plugin, update the WP-TNG plugin, configure WP-TNG plugin, reconfigure TNG, upload gedcom, configure another WP theme, add other WP-plugins, and finally change TNG stylesheets to match your WP environment.
- Install TNG in its own folder as officially documented. Configure basic settings and check for correct behavior of this application. However, DO NOT INSTALL ANY TNG TEMPLATE (THEME) when you want to integrate TNG with WordPress.
No need to upload any Gedcom file yet. - Install WP in another folder and set your WP site theme to be the basic Twenty-Ten theme for now. At later moment you can change the theme. Most WP themes have a screenwidth of approx 500px. Unfortunately TNG prefers some more space (approx 700px wide).
Please note that your website folder structure should like this:
- Create a new page by using the WP dashboard. On this website it is this ‘Familytree’ page as can be found in the menu above. This page will be the page on wich TNG will present its own homepage (at the bottom half) and all other data within the WP theme. You might add some default text on your ‘familytree’ page in case the WP-TNG plugin did not load a TNG page correctly.
In my case, if that happens you will read:
“When you read this message, unfortunately the content of the family tree cannot be presented because of a mismatch in database configration. Please come back later.”.
A small note about the TNG homepage: For my needs the default TNG homepage contains too many options. So I heavily modded that page. These changes are described in the document (see previous post) at page 11. - Download & install the original TNG WordPress Integration plugin version 0.25.3 as you will find in the WP plugin directory and written by Marc Barnes. Do not activate this plugin it. If you have activiated it, just deactivate it now. Furthermore, do not install other plugins yet, but wait until you have TNG integration working. I have noticed that other plugins can impact correct working of the WP-TNG plugin, so for now deactivate those to have a clean as possible WP installation.
- Download the update for the WP-TNG plugin from this location (tng.php) or from this location (tng.zip). (In IE: right click the link then choose ‘Save target as..’ to store it locally on your computer disk). This file is not a fully working plugin, however, it is just one (updated) file named ‘tng.php’.
- Start your FTP utility (e.g. FileZilla) and connect to your WP site.
Find the folder ‘<your WP folder>/wp-content/plugins/tng-wordpress-plugin’ and rename the existing file ‘tng.php’ into e.g. ‘tng_0253.php’. - Next upload the updated tng.php file as obtained in step 5 from your local disk also into the folder ‘<your WP folder>/wp-content/plugins/tng-wordpress-plugin’.
- Set Permalinks. Using your WP dashboard go to SETTING -> PERMALINKS. Then set under ‘Common Settings’ the permalinks option to some other value but the Default, e.g. have it set it to ‘Numeric’
- Activate the WP-TNG plugin version 0.26. Within your WP dashboard, you will note two WP-TNG Plugins of different versions, now activate the WP-TNG plugin of version 0.26.
Note: DO NOT DELETE the original WP-TNG plugin version 0.25.3! - Configure the updated plugin through its own configuration page. You will find two entries in the WP dashboard under the “TNG” heading: ‘Options’ and ‘Admin’.
For the WP-TNG option settings please read the document (see bullet #3) as described in my previous post and configure the WP-TNG plugin.
I did not got the WP-TNG option on Integration of TNG-WP logins working. Instead it fooled up my WP configuration. As I did not wanted to use that option anyway, I did not investigate what I did wrong.
The selection ‘Admin’ should bring you to the TNG admin page right away.
From now on all TNG information will be displayed within the WP theme at your ‘Familytree’ page. However, because of the screenwidth of the Twenty-Ten theme of approx 500px, the presented TNG information might run outside these WP boundaries or even worse will be clipped at the WP boundaries. These are just ‘cosmetic’ errors and can be corrected otherwise. To repair them one need to alter the TNG files (not the plugin). Please read page 5 of the document on what I have changed to correct some of such cosmetic errors.
Debugging:
For debugging purposes access to your WP-mySQL database is very handy. There you can check the option values as as stored by the wp-tng plugin. If TNG does not display information at your ‘familtree’ page at all, check your WP-configuration settings in the mySQL database. Especially check the WP-TNG option values stored (also read page 7 of my document).
Note: As TNG and WP have been installed next to each other in seperate folders at any time TNG itself (without WP) should still work (see step 1 above). Through the regular TNG admin pages you should be able to reconfiger TNG as well, upload gedcom files, add TNG users, etc.
- ‘http://<your-website>/tng’ will bring you to your regular TNG application
- ‘http://<your-website>/wp’ will bring you to your regular WP application, from where your TNG information can be viewed as well.
If all went well, and TNG displays its information within WP too, you can continue. Now you can add other WP-plugins, change the basic WP-theme, add WP-widgets, WP-Footer, etc. Please note that WP widgets will not be shown at all TNG pages.
Within TNG you now can add additional users, your gedcom files, etc. Furthermore you probably want to repair the ‘cosmetic’ errors and update the .css stylesheets to have TNG’s colors match the WP theme (read page 8 & 9 of the document). However, do not select ever a TNG template (theme) as this will clobber up your graphical TNG presentation within WP! Also the TNG footer can be changed now to match the WP footer.
