TNG-WP integration instructions updated / Cees Kloosterman method

October 4, 2014

TNG_WP integration page has been updated (step 6), read:

http://www.kloosterman.be/info/how-i-made-my-tng-wp-website/

See also my troubleshooting section on instruction page:

October 9, 2014

Hi Cees,

I did an integration of TNG and WP, following your instructions, and it came out pretty well. However, it does not produce valid HTML. If you look at the page source for any page that runs a TNG function (say, surnames.php on your site), you will find that, because both TNG and WP write out their own headers separately, the resulting source file has 2 declarations of !DOCTYPE, 2 <head> sections, and 2 <body> sections. Firefox does a fine job of handling this and everything looks OK visually, and I am not an HTML expert, but the output seems to violate the basic premise of a page having a single <head> section, <body> section, and DOCTYPE declaration. I'm not really sure how big a deal this is, but it seems like some other browser might choke on it or be confused.

I looked at the code for awhile, but couldn't see any way to fix this easily. tng_header and my theme's header.php file essentially need to take turns writing their output before closing the </head> tag, and I couldn't see a simple way to do that. Now I'm looking at the TNG plugin integration instead, because the plugin takes care of that by sucking the page header output from the TNG code and writing it out in the right place in the WP code (or maybe it's the other way around) - it outputs compliant HTML with one <head>, <body>, etc.

As I said, I'm not sure how big a deal this "bug" is; I'd be curious to hear what others think.

Holly

October 9, 2014

Hi Holly,

You are correct. In the HTML-source code of the created TNG pages there are two head tags. One from WordPress en one from the theme you are using. Although this is not HTML5 compliant it gives no problems in the modern browsers.

I updated the instructions page:

One step less
No change to the core files (begin.php)
Changed the topmenuWP.php

Check:

http://www.kloosterman.be/info/how-i-made-my-tng-wp-website/

October 14, 2014

Hi Holly,
You are correct. In the HTML-source code of the created TNG pages there are two head tags. One from WordPress en one from the theme you are using. Although this is not HTML5 compliant it gives no problems in the modern browsers.
I updated the instructions page:
One step less
No change to the core files (begin.php)
Changed the topmenuWP.php
Check:
http://www.kloosterman.be/info/how-i-made-my-tng-wp-website/

I have installed this on a local pc using wampserver. I have checked everything to make sure I followed the instructions. However, I get the following result:

1. I created a menu item in wp to surnames.php in tng

2. It displays but does not within the WP theme and

3. I get a php error call in genlib calling a get function invalid error in footerWP.php line 2 which is the get_footer call.

October 15, 2014

I have installed this on a local pc using wampserver. I have checked everything to make sure I followed the instructions. However, I get the following result:
1. I created a menu item in wp to surnames.php in tng
2. It displays but does not within the WP theme and
3. I get a php error call in genlib calling a get function invalid error in footerWP.php line 2 which is the get_footer call.

Well, difficult to see what is wrong on your local server from here. You must be doing something wrong, either in the local server setup or in the WP-TNG integration setup.

No problems on my (XAMP) local server.

Check: Troubleshooting section

October 15, 2014

Well, difficult to see what is wrong on your local server from here. You must be doing something wrong, either in the local server setup or in the WP-TNG integration setup.
No problems on my (XAMP) local server.
Check: Troubleshooting section

The issue is with topmenuWP.php. That code will not work and thus all I get is a blank page. I am going to turn on php error logging to see what is happening if it will log the error. I installed per instructions on an EasyPHP platform and the get_footer error did not occur. My guess is PHP version issues. I am about to scrap this approach. I used the tng plug in and get inconsistent results. Too unstable to use on a live site, at least from what I can see. Thanks, for your response.

October 15, 2014

The issue is with topmenuWP.php. That code will not work and thus all I get is a blank page. I am going to turn on php error logging to see what is happening if it will log the error. I installed per instructions on an EasyPHP platform and the get_footer error did not occur. My guess is PHP version issues. I am about to scrap this approach. I used the tng plug in and get inconsistent results. Too unstable to use on a live site, at least from what I can see. Thanks, for your response.

After much trial and error, I have this back to where I can create a menu item to a tng function such as surnames.php. However I still cannot get it wrapped in the wp template. This is the code I have running in topmenuWP.php:

<php

require ("../wp-load.php");

get_header ();

?<>

I took out the second line from that shown on in the instructions to see if that had any effect. Did not.

This approach to integration is more stable that the tng plugin but still far from what I anticipated.

October 15, 2014

After much trial and error, I have this back to where I can create a menu item to a tng function such as surnames.php. However I still cannot get it wrapped in the wp template. This is the code I have running in topmenuWP.php:
<php
require ("../wp-load.php");
get_header ();
?<>
I took out the second line from that shown on in the instructions to see if that had any effect. Did not.
This approach to integration is more stable that the tng plugin but still far from what I anticipated.

TNG is in a sub root folder under wordpress and both use the same database. I have tried numerous wp compliant themes but all exhibit the same behavior. I am a bit unclear on the metaWP.php what can be removed if not needed. What code needs to remain?

October 15, 2014

TNG is in a sub root folder under wordpress and both use the same database. I have tried numerous wp compliant themes but all exhibit the same behavior. I am a bit unclear on the metaWP.php what can be removed if not needed. What code needs to remain?

Additional info: I am running WP 4.0 and TNG 10.0.3

October 15, 2014

TNG is in a sub root folder under wordpress and both use the same database. I have tried numerous wp compliant themes but all exhibit the same behavior. I am a bit unclear on the metaWP.php what can be removed if not needed. What code needs to remain?

Got it to work. The code shown for topmenuWP.php in your instructions does not properly function.

This works:

<?php

require ("../wp-load.php");

get_header ();

?>

October 16, 2014

Got it to work. The code shown for topmenuWP.php in your instructions does not properly function.
This works:
<?php
require ("../wp-load.php");
get_header ();
?>

I am glad it is working correctly now, I mistyped the last PhP instruction, I typed ?<>. This off course should be typed ?>

Sorry for the unnecessary extra work I caused you!

PhP coding mistakes are so easely made: 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 (what I did here) a quote, brace or semi-colon causing a syntax error. If you like to read more, check this article: PhP mistakes

PS: “To err is human, to forgive, divine.”
― Alexander Pope, An Essay on Criticismn

October 16, 2014

I am glad it is working correctly now, I mistyped the last PhP instruction, I typed ?<>. This off course should be typed ?>
Sorry for the unnecessary extra work I caused you!
PhP coding mistakes are so easely made: 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 (what I did here) a quote, brace or semi-colon causing a syntax error. If you like to read more, check this article: PhP mistakes
PS: “To err is human, to forgive, divine.”
― Alexander Pope, An Essay on Criticismn

Mistakes are the bridges to wisdom. And as I mentioned earlier, I like this better than the plugin solution. I just cannot get that to stabilize, plus a lot of work to make the output look good within the browser window. I currently use Joomla on my live site with menu links to TNG. I have never been a fan of WP, mainly because I find Joomla more flexible and offering more features. although security issues are greater. With your solution, and me looking more at WP, ie. developing a template that I want, I may drop Joomla. Thanks again for your effort and sharing of your solution.

October 18, 2014

Cess, all,

I also gave this a try on a local machine.

The description is well done and the steps are simple enough to get this going within a few minutes.

My findings:

1) I do not find the "mobile menu" anywhere. I even can't find the setting it is in the 10.0.3 backend.

(this cannot be related to this method. Was this removed from TNG again?)

2) I dislike the double header very much. I assume this also gives penalties for the SEO.

Is there any impact foreseeable regarding the JS scripts called out there? - Can the lack of mobile version in the frontend be related to this?

3) Good news: I managed to install TNG in a folder parallel to the WordPress installation.

I only changed the path to the wpload to require ("../wordpress/wp-load.php");

(I have two folders "wordpress" and "tng" underneath my "htdocs" Apache root folder)

This make things cleaner regarding updates. Not sure if there is a downside that I did not consider.

4) I really like the separation of users between TNG and WP. Granting access to WP only for extended viewing rights to TNG data seems awkward.

Finally, I am really biased.

The TNG-WP-plugin has downsides, and this one here is simple.

But the more I think about it, the more I come to the opinion that "less is more".

What I will try next:

a) separate TNG and WP completely and open TNG in a separate window/tab. Only take care that they look similar enough to be identified as one website.

b) try to rebuild the WP header/footer with customized HP/CSS/PHP (mostly static without the WP functions). This way, they can stay in one window and look seamless while still separated.

Downside is that a change to the WP menu requires a TNG header file.

Nevertheless, Cees, congratulations to this idea.

Even when it's not perfect yet, it opens room for further thinking :-)

Regards,

Marcus

October 19, 2014

Hi all,

I have done some more testing.

In the topmenuWP.php, Cees is calling the WP function get_header().

According to the documentation, this one is loading the header.php file inside the WP theme folder.

Unless, one hands over a name to the function.

I tried calling get_header('tng'), which will load the file header-tng.php inside the (child) theme folder.

This is a duplicate of the header.php file, but I removed the the WP hook "wp_head()" at the beginning of the source.

Positive result: I get rid of the 2nd <head> section from WordPress.

Downside: The header is not displayed properly. This may also have negative effects because more complex WP setups may like to drop scripts into the header or whatever.

What we would need is a TNG setup where we can separate the topmenu from the head section.

That would allow to append wp_head() output inside the TNG head section and get the WordPress theme header right afterwards into the body.

Would that be more like a feature request or a mod?

Regards,

Marcus

October 19, 2014

Forget everything what I said before.

The solution is already available with the metaWP.php file.

Step 1:

As I said, duplicate your header.php file (in a child theme!) in WP and remove the call to "wp_head()".

This file shall be named header-tng.php

Step 2:

Update your topmenuWP.php file such that the get_header function calls this new theme file:

--> get_header('tng');

Step 3:

So far, we only removed the WP meta data, but this is required for the function of WordPress.

Now let's all this inside the metaWP.php file. My entire file looks like this:

<?php

global $cms;

require ("../wordpress/wp-load.php");

wp_head();

?>

css/YOUR-TNG-EXTRA.css" rel="stylesheet" type="text/css" />

The result is a fully functional WordPress header on the top of my TNG page without much hassle.

All the WP meta data is inside the TNG <head> section.

@Cees: You may like to play with this and update your description accordingly.

Best regards,

Marcus

October 19, 2014

Forget everything what I said before.
The solution is already available with the metaWP.php file.
Step 1:
As I said, duplicate your header.php file (in a child theme!) in WP and remove the call to "wp_head()".
This file shall be named header-tng.php
Step 2:
Update your topmenuWP.php file such that the get_header function calls this new theme file:
--> get_header('tng');
Step 3:
So far, we only removed the WP meta data, but this is required for the function of WordPress.
Now let's all this inside the metaWP.php file. My entire file looks like this:
<?php
global $cms;
require ("../wordpress/wp-load.php");
wp_head();
?>
<link href="<?php echo $cms['tngpath']; ?>
css/YOUR-TNG-EXTRA.css" rel="stylesheet" type="text/css" />
The result is a fully functional WordPress header on the top of my TNG page without much hassle.
All the WP meta data is inside the TNG <head> section.
@Cees: You may like to play with this and update your description accordingly.
Best regards,
Marcus

Thanks Marcus for the work you did.

The 2 head sections bothered me off course also. I will try your solution and i I can get it to work I will update my description (of course with a reference to you!)

October 20, 2014

Hi Marcus,

I am running into trouble with your addition:

Files like surnames.php load correctly with the header, but showmedia.php returns a double header
If I take out the <?php wp_head(); ?> from the header.php of the theme the Wordpress scripts and plugins are not loaded, only the theme is loaded.

FORGET What I said above, my mistake. It is running now, BUT I still get 2 head tags!

I did the same with footer.php (made footer-tng.php and calling get_footer('tng'); ) from the theme to get rid of the double </html> and </body> tags at the end of the file. This is working well.

Investigating further!

Info: The wp_head action hook is triggered within the <head></head> 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 function is simply a wrapper for: <?php do_action('wp_head'); ?>

This hook provides no parameters. This hook is used by having a function echo output to the browser, or by having it perform background tasks.

October 21, 2014

Hi Marcus,

I finally got it right, but it needed more work then you suggested!

Your suggestion to use wp_head in the metaWP.php file was excellent.

Because the function of the meta file of TNG is to put extra code (if the TNG user wishes it) in the HEAD tag.

But it still delivered 2 HEAD tags.

What I did was to use your idea, but I took all the code between <head> and </head> tag of the header-tng.php file, minus the <head> and </head> tag and the wp_head call and put in in the metaWP.php file after the wp_head call.

So my header-tng.php file starts with the <body> statement.

My metaWP.php looks now like this:

------------------------------------------------------

<?php

require ("../wp-load.php");

wp_head();

?>

<!-- Begin header-tng.php -->

<!DOCTYPE html>

<?php global $theme_display_options, $post_theme_display_options; ?>

<?php if ( $theme_display_options['doResponsiveDesign'] && !( $theme_display_options['showVisitorRespSwitch'] && isset( $_SESSION['showmobileresp'] ) && $_SESSION['showmobileresp'] == 'no' ) ) echo '<meta name="viewport" content="initial-scale = ' . abs( floatval( $theme_display_options['viewportInitScale'] ) ) . ', maximum-scale = ' . abs( floatval( $theme_display_options['viewportMaxScale'] ) ) . ', user-scalable = ' . ( $theme_display_options['viewportUserScalable'] ? 'yes' : 'no' ) . ', width = device-width">'; ?>

<?php if ( is_singular() && get_option( 'thread_comments' ) ) wp_enqueue_script( 'comment-reply' ); ?>

------------------------------------------

Of course what is between  and  is specific for the header-TNG file of my specific WP Theme I am using.

Check the source code of a TNG page (for instance: http://www.kloosterman.be/genealogy/showme...;medialinkID=18 ) and you wil see that this works.

PS-1: I did the same with footer.php (made footer-tng.php and calling get_footer('tng'); ) from the theme to get rid of the double </html> and </body> tags at the end of the file. This is working well.

PS-2: I wil see how to update the instruction on my website. Maybe a simple one for those who do not care about 2 HEAD and 2 BODY tags and the full one for those who want the above method.

October 22, 2014

Hi Cees,

great to see this working for you.

Maybe this is either Theme specific, or I made a litte bit more changes than I explained.

I never had the double head tags, but I also saw the two body tags.

Finally, it is some kind of build block system where different blocks need to fit together.

I guess a good instruction may be a bit difficult because it seems to require an optimization between the cleanest code and the least amount of customization etc.

Looking forward to see your updated instructions down the road.

I myself am gonna switch to this integration on the next weekend.

Regards,

Marcus

October 23, 2014

Hi Marcus,

You wrote:"Maybe this is either Theme specific, or I made a litte bit more changes than I explained."

As far as I can see the double <Head></head> are not theme specific with your method.

Because when I activate the default Wordpress (latest) Twenty Twelve theme, there were also double headers.

Did you do some more changes ?

October 23, 2014

~~I can look up tomorrow, the local testbed is on another computer.~~

Ok, I checked the HTML output.

I only have the doubled end tags </body></html> in the HTML.

There is neither doubled <head> nor </head> tag.

My changes in detail:

1) WordPress: header-tng.php

- copy of original header.php file from theme

- starts with the <body> tag

- the leading <html> tag and DOCTYPE stuff has been removed

- the entire <head> </head> section including the call to the wp-head() hook has been removed

2) TNG: metaWP.php

- contains the call to wp_head() hook that was removed from the WordPress file.

(plus the "require wp-load.php" thing of course!)

3) TNG: topmenuWP.php

- contains the call to get_header('tng');

(plus the "require wp-load.php" thing of course!)

So far, I have not taken care for the redundant closing tags of </body> and </html>.

But when I look at the footer.php in my theme, I see that there are these tags at the end.

I assume copying this file to footer-tng.php and removing these tags from there will solve it analogue to the leading tags in header-tng.php.

Finally, I also checked the header.php and footer.php files from standard themes TwentyTwelve and TwentyFourteen.

They all look basically the same and I can't see why this would not work for them as well.

Let me know when you have further questions.

Regards,

Marcus

October 24, 2014

Ok, I also created the footer-tng.php file and removed </body> and </html> from there.

When WPfooter.php is now calling get_footer('tng'), I have valid HTML without redundant tags.

Quite promising now. Only need to see how we turn this into a simple instruction that can be realized by anybody.

October 24, 2014

Ah, Marcus now I understand, you have removed the entire <head> </head> section including the call to the wp-head().

But that is not what I want to do because then you are are also removing essential other information!!

You should keep at least:

---------------------------

<?php if ( $theme_display_options['doResponsiveDesign'] && !( $theme_display_options['showVisitorRespSwitch'] && isset( $_SESSION['showmobileresp'] ) && $_SESSION['showmobileresp'] == 'no' ) ) echo '<meta name="viewport" content="initial-scale = ' . abs( floatval( $theme_display_options['viewportInitScale'] ) ) . ', maximum-scale = ' . abs( floatval( $theme_display_options['viewportMaxScale'] ) ) . ', user-scalable = ' . ( $theme_display_options['viewportUserScalable'] ? 'yes' : 'no' ) . ', width = device-width">'; ?>

<?php if ( is_singular() && get_option( 'thread_comments' ) ) wp_enqueue_script( 'comment-reply' ); ?>

-------------------------------------

So I did it otherwise.

I rewrote my instruction manual.

At the end of: http://www.kloosterman.be/info/how-i-made-my-tng-wp-website/ is now an instruction to remove all the double tags (<head>,</head>,</body>,</html>) and keep the important parts of the TNG head section.
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.

This works well

October 24, 2014

And another good news:

-- I was all the time wondering why TNG and WP would need to be inside the same database.

This is not required, just tested it here.

October 24, 2014

I looked at your description. Looks good so far.

Now there's one more thing that we may need to consider:

Am I assuming correctly that you're not getting the <title> tag twice within the <head> section?

-- For the TNG plugin, all TNG content is displayed inside this one single WP page. Therefore, I had to modify my header.php file and wrap an IF clause around the output and surpress the WP title tag for all TNG pages.

I described this one here a while ago:

http://www.tngforum.us/index.php?showtopic=9476

I have done this because in the original code, the browers were all using the first title tag from WP and ignored that the TNG meta data (a bit later in the head section) contained the desired title tag.

For your method, this will not work since there is no WP page which can be used to filter out the header.

Therefore, in your WPTNG-meta-header.php, the call to wp_title() also needs to be removed.

(This should be something similar to <title><?php wp_title( '|', true, 'right' ); ?></title>)

TNG-WP integration instructions updated / Cees Kloosterman method

Recommended Posts

klooster

Link to comment

Share on other sites

Holly Cochran

Link to comment

Share on other sites

klooster

Link to comment

Share on other sites

bfoley

Link to comment

Share on other sites

klooster

Link to comment

Share on other sites

bfoley

Link to comment

Share on other sites

bfoley

Link to comment

Share on other sites

bfoley

Link to comment

Share on other sites

bfoley

Link to comment

Share on other sites

bfoley

Link to comment

Share on other sites

klooster

Link to comment

Share on other sites

bfoley

Link to comment

Share on other sites

Marcus Zurhorst

Link to comment

Share on other sites

Marcus Zurhorst

Link to comment

Share on other sites

Marcus Zurhorst

Link to comment

Share on other sites

klooster

Link to comment

Share on other sites

klooster

Link to comment

Share on other sites

klooster

Link to comment

Share on other sites

Marcus Zurhorst

Link to comment

Share on other sites

klooster

Link to comment

Share on other sites

Marcus Zurhorst

Link to comment

Share on other sites

Marcus Zurhorst

Link to comment

Share on other sites

klooster

Link to comment

Share on other sites

Marcus Zurhorst

Link to comment

Share on other sites

Marcus Zurhorst

Link to comment

Share on other sites

Join the conversation

TNG

Activity