Jump to content
TNG Community

Integrating TNG and Wordpress and Kloosterman Method

Recommended Posts


I am integrating my family history site with WP so that I can blog and share more images and be more creative with the website design. I installed WP,  I purchased the theme that was recommended - Avada, and I set up the root folder as directed and set up the topmenu, footer and meta as instructed but I think I must have done something wrong. Perhaps I didn't understand what a "sub-root folder" is and I put the TNG stuff in the wrong place in my C-Panel?

I no longer have access to the backend of TNG, i.e. when I click on the link that used to take me to the backend of TNG I am sent to the WP Dashboard and so I can't complete Steps 4 and 5 of the tutorial. I don't seem to have any control over the site, it seems that when you pull the site up anyone could go in and edit it at this point.

Right now there's been no design done so it's not an issue, but I'd like to figure out what I did now and fix it, find the TNG ancestor stuff, and lock the site down so the back end isn't accessible.

The website is: https://grandmothersgrandfathers.com/
And I'm attaching a screenshot of my c-panel and root menu as it sits now.

Thanks so much if anyone can help.


Screen Shot 2020-01-18 at 1.34.46 PM.png

Edited by lizkalloch

Share this post

Link to post
Share on other sites

I know nothing about Avada so just a general observation.

You say you have setup topmenu. Add a menu item in topmenu to set up links to TNG pages. (dashboard>themes>menus)



in the menu will take you to TNG index page.

Hope that helps.

Share this post

Link to post
Share on other sites

Well you have installed TNG in the correct subroot directory of Wordpress.

  • You can login the wordpress admin panel with: https://grandmothersgrandfathers.com/wp-login.php and your Wordpress username and password. 
  • The link https://grandmothersgrandfathers.com/genealogy/ works fine, HOWEVER you are still using TEMPLATE 5 of TNG. You have to switch of template selection in TNG. Set in TNG Admin Setup >> Configuration >> Template Settings: Enable Template Selection to NO and click SAVE.
  • As TNG is configured now on your site there no integration with wordpress, somehow you must have done something wrong with the: WPTNG-topmenu.php, WPTNG-footer.php and the WPTNG-meta.php configuration. 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.
  • The link https://grandmothersgrandfathers.com/ works fine, you just do not have any wordpress pages yet and no menu made.
  • To reach the TNG admin panel go: https://grandmothersgrandfathers.com/genealogy/admin_login.php

PS: check out my  Troubleshooting section


Extra info how you I implemented my header in AVADA:

  • If you are using a AVADA theme template, you have to put the yourheader inside one of the AVADA headers you choose.
  • Activate the child theme of AVADA. 
  • Place the AVADA template you are using in : /wp-content/themes/Avada-Child-Theme/templates (see attached printscreen)
  • In my case, I am using the AVADA 5 template (see printscreen).

Place your header as follows in the template  in the child theme
 <?php avada_logo(); ?>
 <?php if ( 'flyout' === Avada()->settings->get( 'mobile_menu_design' ) ) : ?>
As below in AVADA template 5:
 * Header-v5 template.
 * @author     ThemeFusion
 * @copyright  (c) Copyright by ThemeFusion
 * @link       http://theme-fusion.com
 * @package    Avada
 * @subpackage Core
// Do not allow directly accessing this file.
if ( ! defined( 'ABSPATH' ) ) {
    exit( 'Direct script access denied.' );
<div class="fusion-header-sticky-height"></div>
<div class="fusion-sticky-header-wrapper"> <!-- start fusion sticky header wrapper -->
    <div class="fusion-header">
        <div class="fusion-row">
            <?php if ( 'flyout' === Avada()->settings->get( 'mobile_menu_design' ) ) : ?>
                <div class="fusion-header-has-flyout-menu-content">
            <?php endif; ?>
            <?php avada_logo(); ?>
                <img   https://YOUR DOMAIN/wp-content/uploads/YOUR_HEADER.jpg"  />          

<?php if ( 'flyout' === Avada()->settings->get( 'mobile_menu_design' ) ) : ?>
                <?php get_template_part( 'templates/menu-mobile-flyout' ); ?>
            <?php else : ?>
                <?php get_template_part( 'templates/menu-mobile-modern' ); ?>
            <?php endif; ?>
            <?php if ( 'flyout' === Avada()->settings->get( 'mobile_menu_design' ) ) : ?>
            <?php endif; ?>


Share this post

Link to post
Share on other sites

Thank you Cees and Mahesh. I've made notes from all this, and am working on putting up the site in rough outline and then will go back and look at all this code. I think I've figured most all of it out, but may return with more questions. Undoubtedly. Thanks again!


Share this post

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now