“Simple things should be simple
and complex things should be possible.”
Building a Genealogy website with TNG, Wordpress and AVADA
(I used the Wordpress template AVADA, but you do not need AVADA. Just about any Wordpress Theme that is compliant with the official WordPress theming guidelines will work with this TNG integration method.)
Skip the introduction, click the button below and go directly to the 5 steps you have to make to integrate TNG with Wordpress and Avada.
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: 12.0 | Price: $32.99 USD | May, 1, 201 |
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 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.
- You can have a horizontal or/and a vertical menu .
- You can have up to 6 sliding sidebars on any WP and TNG page.
- TNG and WordPress are kept in separate folders for easy upgrading.
- TNG and WordPress can share the same database, or have seperate databases.
- WordPress users are separate from TNG users.
- 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 AVADA theme is fully responsive and up to spec with the latest theme review standards (very important).
Here are the 5 steps you have to make:
- Step 1.) Install WordPress in the root folder of your website
- Step 2.) Install TNG in a sub-root folder. I called my TNG folder “genealogy” but any name will do. PS: In my setup TNG and WordPress share the same database. You can use two separate databases, but using one loads faster.
- Step 3.) Make 3 files in your TNG folder —>
I named them WPTNG-topmenu.php, WPTNG-footer.php and WPTNG-meta.php, but anyname will do, as long as the extension is .php
- Here are the files:
You can make these files with a text editor. I am a Mac user and I use Bbedit, if you are a Windows user, you can use Notepad or Notepad ++. Upload the 3 files with a FTP program (I use Filezilla, Mac and Windows versions) to the directory where TNG is installed.
The code content of these 3 files is:
global $cms; ?>
<link href="<?php echo $cms['tngpath']; ?>
css/YOUR-TNG-EXTRA.css" rel="stylesheet" type="text/css"/>
Attention: Use: "get_sidebar();" only if you want to have the sidebar displayed in TNG pages
- In Wp-TNG-meta.php 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).
- Step 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.
- Step 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.
EXAMPLES of custom navigation menu with links to TNG pages
For more information how to make WP menus, read on HERE
- PS: There is a workaround to display the index.php page within the WP theme:
- In index.php change line 12:“$flags[‘noheader’] = true; ” —>into –> “$flags[‘noheader’] = false; ” ( without the “”)
- f you also want the icons to be displayed: change line 11: “$flags[‘noicons’] = true; ” —>into –> “$flags[‘noicons’] = false; ” ( without the “”)
That’s it, Wordpress functionality in TNG.
- PS: I did put some extra coding beneath the menu to get the layout I wanted, but that is optional.