How I made my TNG-WP website


TNG (The Next Generation of Genealogy Sitebuilding) was designed by Darrin Lythgoe. TNG runs on most any normal Web server, including Windows, Linux, UNIX, and Macintosh.

TNG is a powerful PHP/MySQL script that acts as a central repository for all your genealogy research and allows others to view and search through your records. It is a powerful way to manage and display your genealogy data on your own web site, all without generating a single page of static HTML. Instead, your information is stored in MySQL database tables and dynamically displayed in attractive fashion with PHP (a scripting language). There is no limit to the number of names that can be in the program’s database.

If you are interested, visit Darrin’s TNG website at The Next Generation of Genealogy Sitebuilding (©”TNG”).

Current version: 10.1.0 | Price: $32.99 USD | March, 15, 2015 |

TNG and WordPress

During the years my genealogy website grew bigger and bigger, the HTML pages started piling up with hundreds of individual pages.
Considering all these facts I decided to install WordPress and to convert all the HTML pages to WordPress pages and try to integrate TNG with WordPress. The benefit of a CMS like WordPress is in the segregation of design and content. This saves a lot of time when you want to change or update your design and you can do so with your content 100% sacrosanct and unaffected.

The biggest challenge was to get TNG to work seamlessly with WordPress.

The advantages of the method described below are:

  • It is a easy way to integrate WordPress with TNG.
  • No change to the core file’s of TNG.
  • No change to the core file’s of WordPress.
  • Independent of TNG versions and/or WordPress updates.
  • Displays TNG within WordPress with no iFrames.
  • Can be used with any standard compliant wordpress theme.
  • Can be used with any variable width or fixed with header / menu.
  • The menu can be placed anywhere (with Artisteer)
  • You can have a horizontal and a vertical menu (with Artisteer) .
  • You can have 1 or 2 sidebars on any non-TNG page.
  • TNG and WordPress are kept in separate folders for easy upgrading.
  • TNG and WordPress can share the same database.
  • WordPress users are separate from TNG users.
  • Optionally add a template switcher (if you export with WP Tuxedo) so every user can choose the TNG template they like best.
  • Should be compatible with TNG mods.
  • This method has been tested on TNG v 10+ and WordPress 3.9+. It should work with other versions of TNG and WordPress 3.0+
  • And last but not least, the theme made with Artisteer and exported with Wp Tuxedo passes the WP Theme-Check, so it’s up to spec with the latest theme review standards (very important).


  • Works only with WordPress compliant themes, the standard TNG-templates will not work, because they are not WordPress templates.
  • The sidebar shows only on the non-TNG pages.
  • Vertical menu only on non-TNG pages.
  • Both TNG and WP write out their own headers separately, the resulting TNG pages have consequently double <head>, <title>, </title> </head>, </body> and </html> tags. This is not compliant with W3-validation and may give some penalties for the SEO.
    Although the behaviour among especially older browsers is unspecified and not guaranteed to be consistent, it usually gives no display problems in the modern browsers. If you are oké with that and your TNG-WP website renders with no problems in the modern browsers, I suggest you just leave it like that.

Here are the 5 steps you have to make:

    • 1.) Install WordPress in the root folder of your website
    • 2.) Install TNG in a sub-root folder. I called my TNG folder “genealogy” but any name will do.  PS: TNG and WordPress must share the same database.
  • 3.) Make 3 files in your TNG folder —>  I named them:
  1. WPTNG-topmenu.php
  2. WPTNG-footer.php
  3. WPTNG-meta.php
WPTNG-topmenu.php WPTNG-footer.php WPTNG-meta.php
require (“../wp-load.php”);
get_header ();
get_footer ();
global $cms;
<link href=”<?php echo $cms[‘tngpath’]; ?>
css/YOUR-TNG-EXTRA.css” rel=”stylesheet” type=”text/css” /
The code line “ wp(); ” is optional. I do not need it in my theme, but it might be necessary in some themes. So it is there as a safeguard. You can tryout for yourself if you need in in your theme.
  • The code line ” global $cms; ” is optional. I do not need it in my theme, but it might be necessary in some themes. So it is there as a safeguard. You can tryout for yourself if you need in in your theme. 
  • YOUR-TNG-EXTRA.css is the css file with your own extra TNG css tweaks (if you do not have it, leave this part out).

4.) Use these 3 files as the custom header, custom footer and custom meta files in the Site Design and Definition part of the TNG setup. Set in TNG Admin Setup >> Configuration >> Template Settings Enable Template Selection to NO and click SAVE.

5.) The default TNG index.php page will not be displayed within the WP theme. The WordPress Appearance Menus Screen enables a user to create custom navigation menu in place of a theme’s default menu. Use this to make links to the TNG pages you would like to have.