and Emigrants to America
Mobile Menu

How I made my TNG-WP website

“Simple things should be simple and complex things should be possible.”

Alan Kay
Building a Genealogy website with TNG and Wordpress

(I designed my WordPress template with Artisteer and WPThemeCity, but you do not need Artisteer and WPThemeCity. Just about any WordPress Theme that is compliant with the official WordPress theming guidelines will work with this TNG integration method. I only used Artisteer to design my own personal unique template and WPThemeCity for the extra export possibilities from Artisteer.)

  •  Skip introduction and go directly to the 5 steps you have to make to integrate TNG with WordPress
Introduction

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: 10.1.0 | Price: $32.99 USD | March, 15, 2015 |

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 biggest challenge was to get TNG to work seamlessly with WordPress.

That, however, turned out to be quite a challenge.

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 (with Artisteer)
  • You can have a horizontal and a vertical menu (with Artisteer) .
  • You can have 1 or 2 sidebars on any non-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.
  • Optionally add a template switcher (if you export with WP Tuxedo) so every user can choose the TNG template they like best.
  • 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 theme made with Artisteer and exported with WpThemeCity passes the WP Theme-Check, so it’s up to spec with the latest theme review standards (very important).

Limitations:

  • Works only with WordPress compliant themes, the standard TNG-templates will not work, because they are not WordPress templates.
  • The sidebar shows only on the non-TNG pages.
  • Vertical menu only on non-TNG pages.
  • Both TNG and WP write out their own headers separately, the resulting TNG pages have consequently double “Head” and “Body” and tags. This is not compliant with W3-validation and may give some penalties for the SEO.
    Although the behaviour among especially older browsers is unspecified and not guaranteed to be consistent, it usually gives no display problems in the modern browsers. If you are oké with that and your TNG-WP website renders with no problems in the modern browsers, I suggest you just leave it like that.

    If you want to remove the double tags after my 5 steps to integrate WordPress with TNG, read my instruction here: –> Remove double tags

Why do you use WordPress

There are a lot of reasons why WordPress websites functions a lot better instead of the old traditional HTML designs of the past. Just to name a few:

  • WordPress sites are built around a CMS database so they take advantage of many content management system advantages natively that are hard to implement with traditional HTML sites. Using a true database for storage and dynamically generating Web pages as needed has numerous advantages over static Web pages.
  • You don’t have to be a technical genius to learn how to use WordPress. If you know how to edit a Microsoft Word document, then you’ll be able to easily update the content on your WordPress site. Updating pages and/or blog posts on WordPress is literally as easy as editing a Word document.
  • The “Themes” concept allows the entire look of the website to be changed in a single click without any additional programming.
  • There are thousands of freeware “Plugins” that are software modules designed to take care of situations that would require tons of programming time to implement on a regular HTML site.
  • WordPress is incredibly cross-browser compliant.
  • Hundreds of WordPress themes are mobile right out of the box, but I always recommend bringing a quality designer on to help you make the most out of your design.
When people ask me what WordPress can do, I answer:
“Whatever you want it to do.”
And I stand by that statement.

Why did you not use the WordPress plugin

There is an excellent TNG WordPress Integration Plugin, that integrates TNG with a WordPress site. This plug in was initially developed by Mark Barnes as described on his website. You can read a very thorough approach on this plugin by Roger Moffat, detailed on the TNG Wiki. There are a few reasons why I did not want to use the WordPress plugin:

  • The WordPress plugin has no extensive options for personalization of the theme.
  • I wanted  WordPress users to be kept separate from TNG users.
  • I wanted to keep the layout and the feel of my old HTML design with the menubar horizontal beneath the header.
  • I did not want the TNG menu into a WordPress sidebar. When I started my WP/ TNG integration project the WordPress plugin moved the TNG menu into a WordPress sidebar. The current version of the tng.php plugin however doesn’t put the menu in the side bar if you don’t want it to.
  • I wanted to have full control over the layout and the design of my theme.
  • I wanted to have control over the menu and submenu items. Not only designwise (color, icons etc), but also which TNG menu item I wanted in the menu and which not.

Why do you use Artisteer

I designed the the WordPress theme for my TNG genealogy website with Artisteer. Artisteer is a template creator allowing quick and easy creation of design templates for Joomla, WordPress, Drupal, HTML and more. Artisteer is a truly excellent tool, it’s very simple to use and the finished product is every bit as professional as the leading premium template sites have to offer.

  • Artisteer supports HTML5, CSS3, Google Web Fonts and has Online Access to Flickr Images.
  • Artisteer has the ability to set forms for shapes and images in the Header.
  • Custom Position control in the Header.
  • Transparent masks allow user to make part of the Header transparent so the background is shown.
  • You can add multiple Text Blocks (Shapes), plus style them with masks, textures, glares, etc.
  • The software can output designed theme to many famous platforms, including Blogger, WordPress, Joomla, DotNetNuke, Joomla, Code Charge Studio, Visual Studio ASP net and pure HTML.
  • Add your own rich user experiences, such as animations, directly in Artisteer.

What about the finished code? It’s pretty clean and has all of the cross-browser fixes and patches loaded into the code, so you don’t need to worry about browser compatibility with your new template or theme. It was clear for me (and still is) that Artisteer is a perfect tool for creating WordPress templates. The rest of the functionality I realise by implementing or creating custom CSS or extensions for CMS.

What is WPThemeCity

The premium WordPress export plugin for Artisteer, WPThemeCity adds advanced options to exported themes such as WooCommerce support, style switcher (for additional site looks), conditional widget display, Font Awesome and buttons/grids/alerts shortcodes – all built on standard WordPress core features (passes Theme Check plugin).

  • Built to WordPress Standards

Theme CheckSet your Artisteer themes free with more compatibility with 3rd party plugins. WP Tuxedo adheres to WordPress standards, and the proof is that WP Tuxedo themes pass the Theme Check plugin out of the box.

  • Style Switcher

Style SwitcherShip different looks with your themes! Simply tweak your design in Artisteer, export with the Style Switcher option, and users can switch between your provided looks.

  • Conditional Widget Display

Conditional Widgets, WPThemeCity goes beyond the standard Artisteer theme’s conditional widgets adding many new options for choosing when and where to display widgets.

  • And last but not least, the theme made with Artisteer and exported withWPThemeCity passes the WP Theme-Check, so it’s up to spec with the latest theme review standards   (very important).

Read this how Wordpress works and you will understand better the steps you have to take to integrate TNG

How do you integrate TNG with WordPress

Now this was the real challenge!

There is a famous quote from Abraham Lincoln that says:

“Give me 6 hours to chop down a tree and I will spend the first five sharpening the axe.”

Well, it took me a lot more than 5 hours to sharpen my ax and to figure out the integration between TNG and WordPress.

How WordPress works:

  • If you want to use WordPress functionality in a PHP file that exists outside of your WordPress installation (Like the TNG files) then you have to “hook” into WordPress. To create an API outside the wordpress installation you’ll need to import wp-load.php which resides inside your wordpress installation at root level. This file loads the WordPress application and makes its API, and therefore your content, available for use. You can even load your WordPress site in some other website if both of your sites resides on the same hosting space/server by providing the require function absolute path to your wp-load.php file.

PS: API, an abbreviation of application program interface, is a set of routines, protocols, and tools for building software applications. The API specifies how software components should interact and are used when programming graphical user interface (GUI) components.

For a better understanding how this works, here is the content of the the WordPress index.php and wp-blog-header.php.

When you view a WordPress page, the first file called is index.php. This file doesn’t do anything, but loads wp-blog-header.php which does and tells WordPress to load the theme and output it.
define('WP_USE_THEMES', true);
/** Loads the WordPress Environment and Template */
require( dirname( __FILE__ ) . '/wp-blog-header.php' );

The blog header file (that queues up the rest of WordPress) loads wp-load.php directly and fires up WordPress itself. Below is most of wp-blog-header.php:
if ( !isset($wp_did_header) ) {
$wp_did_header = true;
require_once( dirname(__FILE__) . '/wp-load.php' );
wp();
require_once( ABSPATH . WPINC . '/template-loader.php' );

Basically that is all the information you need.

  • Wp-load.php is the access to all functions of WP!
  • Wp() is then called – this ‘starts’ WordPress , interpreting the incoming URL, processing it into a query, choosing a template and finally outputting the content and sending it into the user.

 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 any name will do, as long as the extension is .php

  1. WPTNG-topmenu.php
  2. WPTNG-footer.php
  3. WPTNG-meta.php

The code content of these 3 files is:

1. WPTNG-topmenu.php

<?php
require ("../wp-load.php");
get_header ();
 ?>

 

 

   

1. WPTNG-footer.php

<?php

get_sidebar ();

/* Use: "get_sidebar();" only  if you want to have the sidebar displayed in TNG pages */</br>

get_footer (); 
?>

 

       

1. WPTNG-meta.php

<?php
global $cms;
?>

<link href="<?php echo $cms['tngpath']; ?>
css/YOUR-TNG-EXTRA.css" rel="stylesheet" type="text/css"/>

ATTENTION

  • 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.
  Wp-TNG Menu example EXAMPLES of custom navigation menu  with links to TNG pages Wp-TNG Menu example  

 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:
  1. In index.php change line 12: “$flags[‘noheader’] = true; ” —>into –> “$flags[‘noheader’] = false; ” ( without the “”)
  2. 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 Artisteer menu to get the layout I wanted, but that is optional.

One word of caution if you are using TNG versions 10.0.0 and lower!

  • The problem of the drag/drop functions as described below concerns only the TNG versions 10.0.0 and lower!. In the new TNG release(s) 10.0.1 + Darrin Lytgoe incorporated my solution below. You DO NOT have to change anything if you installed the latest TNG version(s).

The jQuery.js file from WordPress can conflict with the litbox.js file in the TNG/js directory. The result is that the bookmark and login icons in het TNG pages will not work, the jQuery conflict freezes up the PopUp window. The origin of the conflict is that the bundled WordPress jQuery ships in noConflict() mode (only supporting the jQuery variable). TNG on the other hand uses the Google Hosted Libraries method. To make it even more complicated, sometimes WordPress also gets fussy with the $ or jQuery in jQuery code. 

1.)  I pinpointed the problem to the “draggable” function in a TNG jQuery file, namely: /js/litbox.js at line number 103:  You can solve the draggable problem like this:

  • change line 103:   jQuery (this.d2).draggable({handle: ‘.LB_closeAjaxWindow’}).resizable();
  • into this line:         $ (this.d2).draggable({handle: ‘.LB_closeAjaxWindow’}).resizable();
 PS: Turning of the “no conflict” mode, by removing the “jQuery.noConflict()” from the last line in “wp-includes/js/jquery/jquery.js” certainly solved the “draggable” conflict, but that started a whole lot of other plugin conflicts. That is because another popular library that performs a similar task to jQuery is one called ProtoType. This is used by many plugin authors. The problem comes in that both jQuery and ProtoType sadly share the same method of calling them from the code. So a basic call to the jQuery library may well be interpreted as a call to the ProtoType library and visa versa. To overcome this, the jQuery developers made available what is called ‘no conflict’ mode that allows jQuery to be called in a more unique way. So turning off the “no conflict” mode” leads to disaster and chaos.

Troubleshooting

  • WordPress: check if WordPress is installed in the root folder of your website.
  • WordPress: Select Settings -> Permalinks. Set the permalink structure to anything but Default (I strongly recommend %postname%) and save changes. The TNG pages will not display properly with the Permalinks setting on Default.
  • TNG: check if TNG is installed in a direct sub-root folder of WordPress.
  • TNG: check if in Setup >> Configuration >> Template Settings: Enable Template Selection is set to NO!
  • CMOD: check your CMOD(s) (conform TNG install directions).
  • Template(s): use a compliant WordPress template.
  • Themes dir: compliant WordPress template must be in the standard “/wp-content/themes/”  directory.
  • TNG-templates: the standard TNG-templates will not work, because they are not WordPress templates.
  • Sidebar: if there is a sidebar in your theme, it will only show on the the non-TNG pages.
  • Vertical menu: if there is a vertical menus in your theme it will only show on the  non-TNG pages.
  • Users: WordPress users are separate from TNG users.
  • Wrong menu: if your TNG files show the wrong menu, or just “Home”, login to your WordPress admin / menus and delete all the Sample H and or V menus (if there are any) and keep only your own custom (primary navigation) menu.
  • Headers already sent error: if you encounter a “Headers already sent” error”, it means that the webserver cannot send any more http headers if the HTTP content has already started sending. Usually the “Headers already sent” means there is a rogue space somewhere. Make sure that: <?php is at the very top of the php script and that there are no white space(s), linebreaks or BOM hidden chars in it. If the error source is mentioned as behind the closing ?> then this is where some whitespace or raw text got written out and as a consequense the PHP end tag does not terminate script executation at this point. Any characters after it will be output as page content still.
    PS: The BOM is for unicode files to tell the processor the order of the bytes. Find out more about it HERE.
  • PhP coding mistakes: one little wrong character or an empty space can create havoc in a PhP coded website like TNG/Wordpress. One of the most common, and basic, mistakes made when coding in PHP is to either forget or misplace a quote, brace or semi-colon causing a syntax error. If you like to read more, check this article: PHP Mistakes.

     

How to get rid of the double HEAD, TITLE, BODY and HTML tag

Both WordPress and TNG write out their own headers and footers separately. The resulting TNG pages have consequently double “Head” and “Body”and tags. This is not compliant with w3-validation and may give some penalties for the SEO. Although the behaviour among especially older browsers is unspecified and not guaranteed to be consistent, it usually gives no display problems in the modern browsers.

  • If you are oké with that and your TNG-WP website renders with no problems in the modern browsers, I suggest you just leave it like that, but:

If you want to get rid of the double head, title, body and html tags, this is how to do it.

Marcus Zurhorst suggested to make a separate modified header-tng.php file in the Theme directory and use the wordpress “wp_head” call not from within the header-tng.php file but from within in the meta.php file of TNG. Now that was a good idea, because the function of the meta.php file of TNG is to put extra code (if the TNG user wishes it) in the header between the ‹head› and ‹/head› tag. His method involved also removing the entire section.

I wanted to keep some important code lines from the header-tng.php to import in the TNGsection of the TNG pages. The advantage of this method is that the important sections of the TNG header are in a separate php file. You can chose what to keep and what to leave out.
You can read the full article here: TNG-forum article 
(PS-info: the wp_head action hook is triggered within the section of the user’s template by the wp_head() function. Although this is theme-dependent, it is one of the most essential theme hooks. This hook is used by having a function echo output to the header of the browser, or by having it perform background tasks.)

INSTRUCTIONS

  • 1.) Open the header.php file in the THEME directory you are using in WP (usually: wp-content/themes/your-theme).
         – Save the header.php file as header-tng.php in the same THEME directory you are using.
         – Now there should be a header.php and a header-tng.php file in the THEME directory you are using.
  • 2.) Open the footer.php file in the THEME directory you are using in WP (usually: wp-content/themes/your-theme).
         – Save the footer.php as footer-tng.php in the same THEME directory you are using.
         – Now there should be a footer.php and a footer-tng.php file in the THEME directory you are using.
  • 3.) Make a new file in your TNG directory and name it WPTNG-meta-header.php.
  • 4.) Open the header-tng.php file you just made and cut everything from above the <BODY> tag to the top and save the file.      – After this cutting the header-tng.php file should start with the “BODY” tag.
  • 5.) Paste the cutted text from header-tng.php in WPTNG-meta-header.php and save.
         – Delete from the pasted text in WPTNG-meta-header.php the ‹head› and ‹/head›  tag
         – Delete the line ‹? php wp_head(); ?›
        – Save the WPTNG-meta-header.php
  • 6.) Open the new made footer-tng.php and delete at the end of the code the </body>and the </html> tags.      – Save the footer-tng.php. 

Oké, now you have to update the WPTNG-topmenu.php, WPTNG-footer.php and the WPTNG-meta.php files in your TNG directory.

These 3 files should now look like this:

1. WPTNG-topmenu.php

<?php
get_header ('tng');
?>

2. WPTNG-footer.php

<?php
get_footer ('tng'); 
?>

 

 

 

 

 

3. WPTNG-meta.php

<?php[
global $cms;
require ("../wp-load.php");
wp_head ();
include ("WPTNG-meta-header.php");
?>
<link href="<?php  echo $cms['tngpath']; ?>
css/YOUR-TNG-EXTRA.css" rel="stylesheet" type="text/css" />

  • 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).

That’s it, the double head, title, body and html tags are gone!

 
View Desktop Site