How to Integrate WordPress with TNG

I was asked by someone who viewed my posts in the TNG forums if I could do an integration for her and then provide step-by-step instructions that were “simpler” than the ones provided on the TNG Wiki. I did the integration and then decided to set up a demo site to demonstrate some of the possibilities for customizing your setup. These instructions assume a basic knowledge of your web hosting control panel and ftp clients.

UPDATE: Since TNG v.10.1 was released, I have moved away from using the original WordPress TNG Plugin. These updated instructions are for those who wish to continue using the original plugin, but be aware that the integrated login function no longer works. There will be a new post added with my own instructions for using the Kloosterman method.

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.
  3. From the same location as above, download the TNG-WordPress plugin. Do not unzip this file but remember where you downloaded it to.

Prepare the Web Server

In the root folder of your web hosting account (generally home/username/public_html) create two new directories:

  1. wp (or wordpress, if you prefer)
  2. tng

Upload the files you downloaded and unzipped using an FTP client; WordPress files to the wordpress folder, 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 http://www.yourdomain.com/wordpress(or wp). 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: The plugin will NOT work with the Permalinks setting on Default.]
  3. Select Settings ->General. In the box for Site Address (URL), change the URL to the root level of your website (i.e. http://www.yourdomain.com). Be sure to include the http://. Do not try to view the front page yet – you will get an error message.
  4. Check the box for “anyone can register” and select the default level of Subscriber. You need this setting for integrated login to work.
  5. Using your FTP client, COPY ( not move) the index.php and .htaccess files from the WordPress folder to the root folder. If you can’t see the .htaccess file, check the settings in your FTP client to be sure the option to show hidden files is checked.
  6. Open the index.php file you copied to the root directory in a text editor and change the following line:
    require('./wp-blog-header.php'); to
    require('./[wordpress directory name]/wp-blog-header.php'); and save the file.
    NOTE: Do not make changes to the index.php file located in the /wordpress directory!
  7. Next go to Appearance -> Themes and select the “Add New” tab. Search for, install and activate the Suffusiontheme. I have played with many pre-built WordPress themes and I find this one to be the most customizable out of the box and is one of the recommended themes to use with TNG. (You can also use Atuahalpa or Weaver themes, but customization is more limited.)
    1. The only option that is important right now under Appearance -> Suffusion Options is to select “Other Graphical Options” and then in the subsequent side menu select “Navigation Bar Below Header.” In this section, select the following radio buttons:
      Under “Show Home Page Link?” select “Show a text link.”
      Under “Pages in Navigation Bar” -> “Page listing style in navigation bar” select the first option to show top level pages in tabs and sub-pages in drop-down.
      Under “Pages in Navigation Bar” -> “Pages in Navigation Bar – All or Selected” select the first option to include all ignoring next option. [Deprecated] My experience now is that most WordPress themes are compatible with TNG and that themes that are full-width (with a “sidebar” underneath the content) will work fine without adding a TNG sidebar. If you are using the TNG Census mod, the full-width template displays the information much better.
  8. Finally, go to Pages -> Add New and create a new page titled “Genealogy” with no content and publish.

Install and Set Up TNG

  1. Point your browser to http://www.yourdomain.com/tng/admin.php. In the Admin menu select Setup –> General Settings and work through all the levels. The most important part right now is under “Site Design and Definition.” Make sure the “Genealogy URL” points to the page you created in WordPress (i.e. http://www.yourdomain.com/genealogy). This should be the default, but check to be sure.
  2. Once you have completed the settings tab, select the “Table Creation” tab and create the tables.
  3. Go to the Users menu selection and add yourself as a new user (you will automatically be the superadmin). Make sure the user name and password you enter is the same as it is in WordPress. This is important if you want integrated login to work!
  4. Go to Setup –> Theme Settings.  Set “Enable Template Switching” to No. Set the Template Selection to blank. I will be providing another article later on how to adapt existing templates for use in the WordPress environment. See endnotes below for more information.

At this point, TNG is installed but not integrated. However, if you click on the Genealogy tab in the WordPress navigation menu, you will get the TNG homepage because that is the URL you specified in the TNG setup. If you want to upload a tree now, you can but it’s not necessary to complete the integration.

Step Three

Integrate WordPress and TNG

  1. Log back into WordPress and select Plugins -> Add New. Search for tng and install the plugin from the repository. Do NOT activate it.  The latest version of the TNG WordPress Plugin is now kept in the repository. Once installed, go ahead and activate it.
  2. Using your FTP client upload the tng.php file you downloaded from the TNG downloads page. Overwrite the existing tng.php file with this updated one. Return to the WordPress plugin page and activate the TNG plugin. (NOTE: This is an important step. Most of the problems with the integration are caused by forgetting this vital step.)
  3. You will get a status message asking you to go to the TNG tab in your dashboard and configure the plugin. Click on the new TNG Menu item in the Admin menu. Click on “Search for TNG installation.  You should now see the correct path to your TNG installation. If you don’t, you will have to add it manually. Normally this would be home/accountname/public_html/tng/.
  4. In the next box enter the URL to the TNG admin page (i.e. http://www.yourdomain.com/tng/admin.php).
  5. Check the first box to integrate logins and the next two if appropriate and click “save changes.” Ignore the box to integrate logins, it will cause errors. Check the next two if they are appropriate to your installation.
  6. Go to the home page of your website and click on the Genealogy menu tab. You should now see the TNG index page.

At this point you should have a fully integrated WordPress/TNG site. You will want to go to Appearance –> Widgets in the WordPress Admin menu and add the TNG People Search and TNG Menu widgets to your sidebar.

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! To make your genealogy pages – or the entire website if you want – you will need two new WordPress plugins.

  1. In Plugins –> Add New, search for Page Security. Install the “Page Security by Contexture” plugin and activate it. Go to Pages –> All Pages and select your Genealogy page. When you open it for editing there will be a new box in the second column to set the page restrictions. Select this page and all child pages and click update. In the settings for the plugin, select the option to redirect to the login page. Now when anyone who is not already logged in clicks on the Genealogy tab menu they will be directed to login page!
  2. In Plugins –> Add New, search for New User Approve. Install and activate this plugin by Josh Harrison. This will add a new tab under the Users menu to approve pending users. This is a simple plugin that uses WordPress’ built in mail function to email the administrator when a user registers for the website. The user will not have access to log in until he/she is approved by the administrator. Once you approve them they are sent an email with their login credentials.

Endnotes

The rest of the customization is up to you. Just about any theme you like will work with TNG and I hope to be able to add themes for download that I have created myself exclusively for use with TNG. You can customize the TNG pages using the stylesheets located in rootpath/tng/css. The three files to edit are topmenu.php, index.php and footer.php located in the tng directory. If one of the themes has the tng tabs colors you like, you can copy the two tngtabs.css files from the theme directory to the root css directory 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 12-01-2013]

[Updated again 07-05-2016]

This Post Has 10 Comments

  1. You are a God send. Thank you so much. Your instructions were simple and worked perfectly.

    1. Thank you! I’m glad it worked for you.

  2. Hello, and for many years!

    I want to create a friendly family – family tree.
    I am trying to use TNG WordPress Integration Plugin for wordpress. I think you misunderstood what I set. I have installed wordpress and try to add TNG WordPress Integration Plugin. The error is: Warning: TNG cannot be found in /tng – please specify the full (absolute) path to your TNG installation, or automatically search for the correct folder.

    I tried to create a separate directory where Tng is wp-content directory, but again I could not figure out how to proceed.
    Please advice!

    1. I think you still misunderstand the instructions. And I apologize for the delay in replying. Let’s say your webroot is public_html. In that root, you need to create two directories: wp or wordpress for the wordpress installation and tng for the TNG installation. So your directory structure will look like this:

      public_html
      —wp
      —wp-admin
      —other wordpress directies
      —tng
      —tng subdirectories

      I hope that helps!

  3. Thank you for the posting of integrating WordPress & TNG. The instructions were easy to follow. I have tried various themes. I am still looking for the right theme. I look forward to other postings you may have concerning this topic.

    -Les-

  4. I need help to How to Integrate WordPress with TNG,can you do it for me?
    I will pay for it off course

  5. Hello

    I installed WordPress in the root directory and also the tng directory in the root folder.

    TNG works calling it directly via mypage.ch/tng

    If I create a user in wordpress it is created in tng too and I can activate the user via tng admin

    But when I call my genealogy page in wordpress I get a blanc screen.

    Is it a problem that I installed wordpress in the root directory?

    I tried it with several themes, allways the same. If I am logged in as tng admin I get the genealogy pages, but a little bit scrambled.

    It would be fantastic, if you could give me a word of advice how to locate my problem.

    Excuse my English

    Thank you for help
    Regards
    Franz

  6. Hi Heather,

    Your instructions seem pretty simple but I am having trouble changing the site address. Any suggestions or further instructions would be great, thanks!

    1. I’m so sorry for being so late responding! In General Settings, there are two URLs: WordPress Address(URL) and Site Address(URL). You need to change the WordPress Address to point to the subdirectory.

Leave a Reply

Close Menu