Kloosterman Method

[rbirkey]

Greetings again!

I am revisiting this topic as the TNG Plugin no longer works at all with my version of WP and theme at https://birkey.org Apparently it is not something that Darrin will fix or update.

Darrin recommended I try this method. I have tried to implement the instructions in the WIKI, adding the three php files to my TNG folder (https://birkey.org/tng). I am not sure if I am supposed to do something special with the wp-load.php file, which is in my root WP folder. I also made the workaround changes to the /tng/index.php file.

I have TNG version 14.0.4 installed. My setup screen and diagnostics screens are attached. My site runs in the cloud on a Cloudways Wordpress server.

The "Family Tree" link is an empty page within my site. It has no content. I want to view the tng functionality inside the headers and footers of my DIVI WP site on this page. How is that accomplished?

I do not understand what I am doing wrong, or why this method does not seem to work with my setup.

Any advice would be welcome as this is the only and last option for trying to integrate all of my Mom's family genealogy content from Reunion into our family website.

[theKiwi]

Have you followed exactly the steps as posted by Cees Kloosterman on his website..

https://www.kloosterman.be/info/tng-wp-avada/

On my site, if the "page" is called "Family Tree" then the folder containing the TNG files needs to be called "Family Tree", but better to use a single word like "genealogy". That will then load the index.php file out of the folder with the TNG files called "genealogy".

Roger

[klooster]

• Is Wp in the root of your website?
• Can you show me the content of the three files that you made?

[rbirkey]

Okay, I found this new thread and am looking at your responses and questions now. Thanks.

I followed these instructions per recommendation from Darrin. - https://tng.lythgoes.net/wiki/index.php/Wordpress_and_TNG_direct_integration,_no_plugin_needed

I was not aware of any other instructions.

I did not know that the tng folder name needed to match the landing page name I selected (Family Tree). Would "family-tree" work as a single word name?

Wordpress is in the "public_html" folder (root) of my website. See screenshot.

PHP files content attached.

[klooster]

• Well, the three files look oké to me.
• I am no sure what you mean by "I did not know that the tng folder name needed to match the landing page name I selected (Family Tree)."
• Install TNG in a sub-root folder. I called my TNG folder “genealogy” but any name will do.

As an example, see screenprint of my setup in TNG admin. The custom header, meta and footer php file must have the same name of the three files you created.

[rbirkey]

The TNG files are installed in a subfolder called "tng" in my Wordpress root folder - see screenshot. It has been there for years and it worked at one time with the TNG Plugin.

I've attached my TNG Admin screen. Let me know if I have not configured it properly.

"I did not know that the tng folder name needed to match the landing page name I selected (Family Tree)." - is in response to Rogers comment above that reads - "On my site, if the "page" is called "Family Tree" then the folder containing the TNG files needs to be called "Family Tree", but better to use a single word like "genealogy". That will then load the index.php file out of the folder with the TNG files called "genealogy". Perhaps I don't understand what this means.

Thanks for all your help.

[theKiwi]

37 minutes ago, rbirkey said:

"I did not know that the tng folder name needed to match the landing page name I selected (Family Tree)." - is in response to Rogers comment above that reads - "On my site, if the "page" is called "Family Tree" then the folder containing the TNG files needs to be called "Family Tree", but better to use a single word like "genealogy". That will then load the index.php file out of the folder with the TNG files called "genealogy". Perhaps I don't understand what this means.
 

This may have been incorrect - this is from my WordPress admin Pages screen

 

So I see the possibility to have the page named (Genealogy) at the top left as set in the box in General Settings "Page title in Drop Down Menu", to be different from the URL that the page points to at the lower right.

Roger

[rbirkey]

This is how I have the Family Tree page setup in DIVI. I have a page created with the Title of Family Tree, and the Permalink slug as family-tree. I have it added as the first item in the Main Navigation Menu. The Family Tree page itself has no content, no modules, nothing. Just a blank page.

[klooster]

You are not following the instructions how to setup TNG in WP

• You have to put the names of the custom header, footer and meta php that you created in the Site design and definition in TNG admin. In the screenshot of your setup they are empty. 
• If TNG is in the sub directory of the root and the subdirectory is named “tng” then the genealogy url in the site design and definition should be https://birkey.org/tng and not https://birkey.org/family-tree
• The home page should be https://birkey.org

Read also step 4 and 5 in : How to integrate WP and TNG

[rbirkey]

Thank you.

I have added the custom php file names in my TNG setup and change the url to https://birkey.org/tng

I was able to save the new config.

I read Step 4 & 5 originally as well. I had already selected "NO" for template settings. I'm not sure how #5 applies. I am using the WP Menus feature to create the navigation for my site. I have the navigation item Family Tree pointed to a blank DIVI page. If this is not correct, how/where do I point the navigation to view our TNG data inside our headers and footers?

I'm sorry that I am not understanding your instructions clearly.

I see now that the URL https://bikey.org/tng is displaying with our navigation header, but is not following the style for page layout, nor does it have the footer.

I went ahead and changed the Navigation to point Family Tree to the https://birkey.org/tng URL, which is better functionality than what we had before, but the styling is off.

 

 

[rbirkey]

Okay, this is starting to make more sense now...

By changing the name of my "tng" folder to "family-tree" and updating my tng config, I am able to keep all my previous internal site links as they were. At least now the navigation works and people have access the the TNG data in the site.

I just need to figure out how to align the content inside the center 1080px wide container like the rest of the site, and view our footer.

[klooster]

1.] To show the footer:

In index.php go to the end of the file "line 82 </html>" and place the next lines of code:

<?php
tng_footer( "" );
?>

Save and clear your cache

2.] How to set the content inside the center 1080px wide container.

I am not familiar with the Wp DIVI theme you are using, but try this:

In your WP admin got to Appearance --> Customize --> Additional css and place the next class:

.titlebox {
       max-width: 1080px;
       margin: auto;
}

If that does not work then put !important behind it, as follows:.

.titlebox {
     max-width: 1080px !important;
     margin: auto !important;
}

Save and clear your cache

 

• PS: I will make a little mod later on that will take care of the header and footer in the WP-TNG index.php.

[rbirkey]

Thank you.

1. That code seemed to work.

2. Neither suggested CSS code snippets for aligning the TNG content inside a centered 1080 column worked for me. It looks like some padding above and below the TNG content will also be needed now that the footer is displaying.

We are so close! This is a fantastic improvement and I am very grateful for your support!

Q: Will I need to make this edit to the index.php file in future updates of TNG?

[klooster]

Glad to be of help.

• For the width, you could try this :

 

In your WP admin got to Appearance --> Customize --> Additional css and place the next class:

.et_section_regular {
       max-width: 1080px;
       margin: auto;
}

If that does not work then put !important behind it, as follows:.

.et_section_regular {
     max-width: 1080px !important;
     margin: auto !important;
}

• Regarding your question "Will I need to make this edit to the index.php file in future updates of TNG?"

The answer is YES, but like I said " I will make a little mod later on that will take care of the header and footer in the WP-TNG index.php", so that after any update you just have to activate the Mod in the mod manager again and the code changes are made.

I will post the mod in this thread.

[klooster]

Here is the mod:

Upload the mod to your /mod directory

Before installing the mod be sure you have a fresh clean index.php (without the earlier code changes) and then install the mod.

I tested the mod on my website and it works just fine

 

TNG14-WP-TNG-index_php-14.0.0.0.cfg

[rbirkey]

Cees,

Thank you for your ongoing efforts.

I tried both of your centering code snippets and they did not work for me.

I also installed the TNG14-WP-TNG-index_php-14.0.0.0.cfg file in the "mods" folder and removed the added code in my index.php file, and my footer no longer appears.

NOTE: It seems that DIVI is using the "error404" as the default page layout for this custom navigation item (/family-tree) because it is a page not defined or built using the DIVI Page Builder. I wonder if we have to use CSS to define that "body-class"? I am just guessing.

Randy

[klooster]

1.] If the footer is nor showing:

• uninstall the mod
• upload a new default index.php from your original TNG download to your TNG directory
• clear your cache
• install the mod again

I tested the mod thoroughly on my local host en on my server (TNG 14.0.4) works flawlessly.

2.] In my opinion the family tree link in  the menu is not a link to a specific page, it is just a direct  link to the directory (your family-tree) where TNG is installed.
If you click on the link it will call the index.php file in that directory and that produces on the fly the homepage of TNG, NOT a specific WP page that you made.

3.]  Do not use a body class as you proposed, because that will probably have an effect on all of your WP and TNG pages and not just on the home page that the index.php produces.

4.] Last css suggestion

#et-main-area {
       max-width: 1080px;
       margin: auto;
}

If that does not work then put !important behind it, as follows:.

#et-main-area {
     max-width: 1080px !important;
     margin: auto !important;
}

• If that does not work, like I mentioned earlier, I have no experience with the DIVI theme and its css classes and/or ID’s, so i cannot help you further there.

[rbirkey]

Cees,

Thanks again for continuing to try. I understand what you are saying about the family-tree page - it is not a DIVI page - but outside of its structure. DIVI thinks it is an error page and applies its CSS for an error404 page.

Your first suggestion for CSS in #4 works, but it changes the rest of the site as well, which is not going be a good solution. If I knew more about CSS I might be able to figure out a solution. I have removed it from my custom CSS.

I uploaded a fresh index.php, uploaded a fresh copy of your config file, and emptied my cache, both on my server and at Cloudflare. Unfortunately, it still doesn't work for me. I've attached a screenshot of my browser display. There are no headers/footers in Chrome, Safari or on my mobile phone at https://birkey.org/family-tree

If I can just get the headers and footers back I can live with the misalignment.

[klooster]

• I have no idea why the Mod is not working with you, the coding of the Mod is pretty straight forward, tested it again, no problem.

 

• Here is my changed index.php, download it and overwrite the index.php that you are using. Empty you cache and the header and footer should show now.

 

PS: after every TNG update you have to do that again, so keep a copy of my updated index.php

index.php

[klooster]

I bugged me that we could not not make this work, so where needed I rewrote the index.php for you, all is centered now, width a max-with of 1050 px. and header and footer are showing. 

Download the index-birkey.php, rename it to index.php and overwrite the index.php that you are using. Empty you cache  and reload the page.

Let me know if it worked.

 

PS:  After every TNG update you have to do that again, so keep a copy of my updated index-birkey.php

 

 

 

index-birkey.php

[rbirkey]

I have implemented your suggestion and the Family Tree page is displaying with my site header and footer. I have made additional edits to the new modified index.php to display the TNG links we want to use, and link to our site contact form.

I cannot figure out how to align the <table> left within the 1080px width, per my attached images.

<table border="0" cellspacing="4" cellpadding="0" style="max-with:1080px; margin:auto;">

[klooster]

Just delete margin:auto; in index.php (line 17)

<table border="0" cellspacing="4" cellpadding="0" style="max-with:1080px; margin:auto;">

so that it looks like this:

<table border="0" cellspacing="4" cellpadding="0" style="max-with:1080px;">

PS: the style is hardcoded in index.php. Instead I can put a class in the table and the class css in Additional css in Wordpress Customize. In that case you can easily change the layout etc. from additional css.  The choice is yours 

[rbirkey]

Cees,

I would appreciate the custom CSS method as it will make future upgrades easier.

When I remove margin:auto the page renders as it did before, with the TNG content at the far left border of the browser, not left within the 1080px center column that DIVI uses.

I noticed that the Family Tree page is displaying differently on mobile devices like mey Google Pixel 8a. Is there a way to have it render in the DIVI format - which is designed for mobile?

[klooster]

-

 

 

[klooster]

Well, for the moment you have to use the table with the margin:auto;

<table border="0" cellspacing="4" cellpadding="0" style="max-with:1080px; margin:auto;">

I will look into the problem later on.

PS: the problem is I do not have the DIVI theme, so I cannot really test the css changes