WP and TNG Integration with no plugins using TNG Templates
Overview of this Method
Building a Genealogy website with TNG and Wordpress with no plugin and keeping the TNG Template Style
Things to note:
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 for easy breezy Upgradeing.
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 time 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 seemms to work with many free themes.
Programs Needed
TNG = Sitebuilding 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!
WP = WordPress, The latest stable release of WordPress
How to
How I combined my TNG and WordPress
Install WordPress in the root folder of the website – I used a free theme called “Emotions Lite” to start with but any theme with sections for headers and footers will work. I tested this method on MANY FREE WP Themes.
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 New 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 as you like to the TNG pages in your WP menus. Also note in this method my TNG menu shows on TNG pages.
Examples
ladykathleen.com Front Page (WP) ladykathleen.com (TNG)
This is to show how your Website can have a new fresh look fast and easily. After the initial set-up, changing to a new Theme is very fast and easy. It will most likely take you longer picking out a theme than it takes in time to change it. This could be a new way to driving traffic to your website, by keeping it fresh.
Extra Styling Notes
Note in Styles: Some WP Themes can give conflicts to the pedagree layout.
In the theme I used called “Emotions Lite” the wording/boxes 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 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; }
Remember with WP themes sometimes Less is More.
Related Links
Using_TNG_and_WordPress_with_the_tng-wordpress-plugin - Integrating WP and TNG using the plugin
Wordpress and TNG direct integration, no plugin needed - Kloosterman's integration method
WP_and_TNG_Integration_with_no_plugins_using_TNG_Templates - this wiki page
