The Ultimate Fusion of CMS & Gedcom

Integrating WordPress and TNG

Share

The Kloosterman Integration

This particular integration method really isn’t an integration at all. Essentially, what you are doing is “wrapping” the WordPress theme around the TNG content. It is really very easy to set up. This same information can be found on Cees Kloosterman’s site, but I know that many people now come here for instructions, so I decided to include his here as well.  As with the other instructions, I am starting at the very beginning. If you already have WordPress and TNG installed, just pick up from where you need.

Step One

Download the Software

  1. Download the latest version of WordPress from WordPress.org and unzip it to a folder on your hard drive.
  2. Download the latest version of TNG using the download link and login provided when you purchased the software. Unzip the file to a folder on your hard drive.

Prepare the Web Server

In the root folder of your web hosting account (generally home/username/public_html), create a directory for TNG. In this case, you can name the directory anything you want; I generally name it “genealogy.” This means that the URL to the TNG surnames page on this site is https://uniquelyyourshosting.net/genealogy/surnames.php.

Upload the files you downloaded and unzipped using an FTP client, WordPress files into the root folder, and TNG files in the TNG folder.

In your web hosting control panel, create a database and database user/password for your installation. You will be installing both WordPress and TNG tables to this database, so the name can be anything you like (i.e., genealogy). Note that in most cases, your database and username will be prefixed with accountname_. This is part of the database/user name and must be included in the configuration files. Make a note of both names and the password.

Step Two

Install and Set Up WordPress

  1. Point your browser to https://www.yourdomain.com. Follow the onscreen instructions to create the configuration file and install WordPress. Once setup is complete, log in to the Admin Dashboard.
  2. In the sidebar Menu select Settings -> Permalinks. Set the permalink structure to anything but Default (I strongly recommend %postname%) and save changes.
    [NOTE: TNG pages will not display properly with the Permalinks setting on Default.]
  3. Next go to Appearance -> Themes and select the “Add New” tab and find a theme you like if you don’t want to use the default theme. I recommend a responsive theme that includes a full-width template and a bottom widget bar. [UPDATED NOTE: The newer “block themes” that make use of “full site editing” are generally NOT compatible with integrations, so bear that in mind when choosing a theme.]

That was pretty easy so far wasn’t it? Let’s continue…

Install and Set Up TNG

  1. Point your browser to https://www.yourdomain.com/[directory_name_pf_your_TNG_installation]/readme.txt and follow the simple-to-use instructions for installation. Remember to use the same database information as you did for WordPress.  Once you have completed all the steps, click the link to go to the Admin folder. Once there click on the Setup link -> General Settings -> Site Design and Definition. Set the Home Page to the site URL (http://www.yourdomain.tld) and the Genealogy URL will be http://www.yourdomain.tld/directory-where-tng-is-installed.
  2. Go to Setup –> Theme Settings.  Set “Enable Template Switching” to No. Set the Template Selection to blank. See endnotes below for instructions on how to copy the template files you want to use to the appropriate folders.

At this point, TNG is installed but not integrated.

Step Three

Integrate WordPress and TNG

  1. Create three new files in your TNG root folder and name them WPTNG-topmenu.php, WPTNG-footer.php and WPTNG-meta.php. Next you are going to edit each file to include the code required to show the WordPress stuff.
  2. In your favorite text editor, open WPTNG-topmenu.php and insert the following code, then save the file:
    <?php
    require ("../wp-load.php");
    get_header ();
     ?>
  3. In your favorite text editor, open WPTNG-footer.php and insert the following code, then save the file:
    <?php
    get_sidebar(); //if you want to have it displayed in TNG pages
    get_footer ();
     ?>
  4. In your favorite text editor, open WPTNG-meta.php and insert the following code, then save the file:
    <?php
    global $cms;
    ?>
    <style> ... custom styles go here ... </style>
    NOTE: The custom styles would theme styles that need tweaking to work correctly with the TNG pages.
  5. Make sure the changed files are updated on the server and then go the TNG Admin –> General Settings. Under Site Design and Definition, make the following changes and save your settings:
    1. Change Custom Header to WPTNG-header.php
    2. Change Custom Footer to WPTNG-footer.php
    3. Change Custom Meta to WPTNG-meta.php

That’s it! You’re done.

Final Steps

Addressing the Privacy Issue

If you are insistent on restricting access to all your genealogy pages to registered users only, don’t despair. You can have your privacy and WordPress too! Because there is no plugin involved, whatever privacy settings you select in TNG Admin will work. There is also a new mod available, Public Access Control, that will let you fine tune your privacy settings even more. This mod works with TNG v. 10 and later.

Endnotes

The rest of the customization is up to you. Just about any theme you like will work with TNG.  You can usually find a TNG template whose colors complement your WordPress theme. You can copy the CSS files from the template’s CSS directory to the root CSS directory overwriting the existing files. Any images required by these changes need to be added to the image folder in the root directory of your TNG install.

Finally, if you have any questions, please feel free to contact me. I will also provide my services to do an integration for you for a nominal fee. Good luck and have fun!

[Updated 07/07/2023]

×
JB
Hi! How can I help you?