How I made my TNG-WP Website

 

Building a Genealogy website with TNG and Wordpress
                                                                with no plugin and keeping the TNG Template Style

TNG = The Next Generation of Genealogy Sitebuilding© (“TNG”) is a powerful way to manage and display your family tree on your own website, all without generating any static HTML. Instead, your information is stored in a database and the pages are created on demand. All you need is a website and TNG!

How I combined my TNG and WordPress

  •  Install WordPress in the root folder of the website – I used a theme called “Emotions Lite”  the first time, but any theme with sections for headers and footers will work.
  •  Install TNG in a sub-root folder. Any name will do. I used Template 12 for my website
  • ——– NOTE: In my setup TNG and WordPress share the same database which loads faster. They can be in two separate databases.
  • In the FPT program make a copy of the TNG template directory you like the best renaming it to something you prefer.  Any name works  
    • NOTE: This way when you update your files do not get over written.
  • Make 3 files in your TNG Template folder —>
    •  WP-TNG-topmenu.php
      • <code>  <?php  require (“../wp-load.php”);  get_header ();   ?></code>
    •  WP-TNG-footer.php
      • <code>  <?php  get_sidebar ();   get_footer (); ?> </code>
      • or <code>  <?php  get_footer (); ?> </code>   (this one does not use the sidebar)
    •  WP-TNG-meta.php
      • <code>  <?php   global $cms;  ?>  <link href=”<?php echo $cms[‘tngpath’]; ?>  css/mytngstyle.css” rel=”stylesheet” type=”text/css”/>  </code> 
        • NOTE: code lines are optional, but will help in future stylings.
  • In Admin>> Setup >> Configuration >> General Settings>> Site Design and Definition > edit fields under custom header, footer & meta use the files names from above.
  •  In Admin>> Setup >> Configuration >> Template Settings >> Selection your NEW Template.
  • add as many links to the TNG pages in your WP menus.

Notes:

  • WP & TNG have separate logins.  (I do not allow users for my WP, except for myself)
  • No change to the core file’s of TNG. (just added Template Directory)
  • No change to the core file’s of WordPress and TNG.
  • Displays TNG within WordPress with no iFrames.
  • WP themes can override the TNG so picking a theme that does the least changes in the content section is best. The theme called “Emotions Lite” the Underlining links is gone in TNG and some charts have a miss-a-line issue. 
  • I have many times, changed the WP theme to a less fancy (less style options) theme and the charts did not have a miss-a-line issue so pick your theme carefully but this method seems to work with many free themes.

Note in Styles: Some WP Themes can give conflicts to the pedigree layout. In the theme I used called “Emotions Lite” the wording/boxes in the pedigree were not lining up. I added the code below into the WP custom css which did not make it perfect but did make it a lot better.

table {
margin: -5px 0 0 0;
width: 100%;
}

In another theme “Longevity” it had less issues for the pedagree layout but was still had an issue. John Paulding pointed it out and suggested this change (in the TNG Custom css) which should help a lot of differant Themes that would have the same issue.

.pboxname {
line–height: 1.25 !important;  
}

Most WP themes remove underlining in the links and use Hovering instead.
to put the underline back (which will add it to both WP and TNG areas) with the code below added to your WP Theme Custom CSS

a:link {
text-decoration: underline;
}

On some theme like “Longevity” the pop up register window was cut off short. (people could not see the REGISTER line)
I could add this to my WP theme Custom CSS , to help.

.LB_window {
padding-top: 10px; !important
}

Remember with WP themes sometimes Less is More.
I purpose of this page is not only to help others with WP/TNG integrations but to keep a record of what I “DID” when updates happen to WP or TNG.