problems with displaying TNG within WordPress

[fluffy82]

I recently did the famous "Kloosterman integration method" for TNG withing WordPress to start building my website. My knowledge of html/css is fair (meaning: I know more or less what to do and how it works, though I still need to look up the right codes etc) but almost inexistant for php... Willing to learn, though. I encounter 3 issues :

1) I know that when I show a TNG page, it is basically that: a TNG page to which a WordPress header and footer are added. But this means the complete structure of the page is gone.

Before I start fiddling around with the css to make it look like as if it was actually integrated, is there a way to make the content of the TNG php file show within the WordPress "body" container? That would make life much easier... The missing containers are in the index file of my WordPress theme, not in the header or footer. The Kloosterman method only "gets" the header and footer information.

One of the problems this results in, is my sidebar dropping down and showing below rather than next to the body (this can be remedied by setting a max width for the container used on the TNG page,  making it less wide and leaving space for the sidebrar; but that means I need to look up the name of every container used and change them all one by one; it would be easier to have the complete code output enclosed in one fixed container in the first place - does that make sense?).

Someone told me it is easy to resolve and I should move around the hooks in the functions.php of my WordPress theme, but I'm not sure how to do that...

2) these are probably linked to the missing pieces of WordPress-code on the TNG pages: when I'm on a TNG page, the icons I used in my menu bar are sometimes missing and replaced by little squares. I have the impression that when going to just a php page (like surnames.php) the icons show, but when executing a php they do not (pedigree.php?personID=I11993&tree=huygensv). The menu was made in WordPress with a plugin.

EDIT: looking at the html output of one of the pages where the icons don't show, I see the following error message:

Access to Font at 'http://huygens-vandemoortel-ancestry.be/wp-content/plugins/ubermenu/assets/fontawesome/fonts/webfonts/fa-regular-400.ttf' from origin 'http://www.huygens-vandemoortel-ancestry.be' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://www.huygens-vandemoortel-ancestry.be' is therefore not allowed access.

3) GoogleMaps won't show. I have the API from Google, I have verified my website with google, all settings in TNG are correct etc, but nothing shows up. Sometimes it's just an empty field, sometimes it gives a message that something went wrong and I should check the JavaScript console. Elsewhere I read that this is due to part of the code missing, which is also the reason for my problem n°1.

 

All hints and tips are welcome

PS I wanted to add links to my site as illustration, but got an error message that they are not permitted... If needed, I can make screenshots. Just ask.

Edited March 16, 2018 by fluffy82
additional information

[klooster]

First check your WP Settings > General settings. You need to decide what you primary site url will be. Make sure your WordPress Address and Site Address are set accordingly to the correct values.

 

Check this out: https://crunchify.com/how-to-fix-access-control-allow-origin-issue-for-your-https-enabled-wordpress-site-and-maxcdn/

 

[fluffy82]

UPDATE:

problem 1 has been solved. It was necessary to modify the original TNG pages, unfortunately, but they now display within the WordPress content container in stead of without any containers at all. This might become problematic when TNG launches an update, but I'll deal with it at that time. It does look nice now

problem 2 Cees has kindly suggested a solution (thank you Cees!), but as far as I can tell my addresses are correct, and adding the code mentioned in the link to the .htaccess file did not help. What I find strange is that it is not a problem with the path. When you're on any page on either mysite.be/ or mysite.be/tng_11/ the icons work perfectly. They only stop working when a filter is applied (like displaying only one surname, or searching for photos).

problem 3 not solved yet. Though on some computers I don't get the grey screen nor the error message, but I get a Google Maps image that is frozen somewhere in Canada or Alaska. You can zoom in and out, but not move the map.

 

I'll keep on looking for answers, and keep you updated. If anyone here has hints, let me know...

 

Tom

[cfj]

On 16.3.2018 at 4:10 PM, fluffy82 said:

I know that when I show a TNG page, it is basically that: a TNG page to which a WordPress header and footer are added. But this means the complete structure of the page is gone.

Have you take a look at your source code, or one file in your wp theme?

I use Kloosterman's method, with another touch to it. In my file,  wp-meta.php I have only added get_header (tng).

In my file called wp-topmenu.php,I have a added div classes from my wp theme.

In my wp-footer.php have I added closeing the div tags + called up sidebar.php.

</div><!--post-body-->
    </div><!--content-box-->
<div class="sidebar-frame">
        <div class="sidebar">
 <?php get_sidebar(); ?>

</div><!--sidebar-->
    </div><!--sidebar-frame-->
    </div><!--main-->

[theKiwi]

3 hours ago, cfj said:

 https://www.www.jegersberg.com

Cathrin - can you edit your signature text - it has www.www.jegersberg.com - one too many www.

Roger

[cfj]

23 minutes ago, theKiwi said:

Cathrin - can you edit your signature text - it has www.www.jegersberg.com - one too many www.

 Thank you for correcting me, Roger

[klooster]

You should not mix up the get-header in wp-topmenu.php and the wp-meta.php.

In the  wp-topmenu.php there should be only the:

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

and in the wp-meta.php NOT the get_header (tng), this will cause only problems

[cfj]

2 hours ago, klooster said:

You should not mix up the get-header in wp-topmenu.php and the wp-meta.php.

In the  wp-topmenu.php there should be only the:

Sorry, I didn't explain myself very well.

In my file wp-meta.php I have this

<?php
require_once ('path/to/wordpress/wp-load.php');get_header ('tng');
?>

In my wp-top-menu.php have I just som div tags, so content comes correct in.

I like that my source code looks cleaner

[fluffy82]

Thank you all for the replies. Sorry for responding late, I didn't click on the notify button so I wasn't aware of the new posts.

Here's a new update:

problem 1 has been solved with the help of the guy who wrote my WordPress template. I need to ask him what exactly he did, though. He mentioned adding a line to the TNG pages, and moving around the hooks of the WordPress theme. But I will look at the method @cfj suggested on a different installation on my localserver. If that works, it would be better as no changes will be overwritten when updating TNG in the future.

problem 2 weirdly enough, the icons problem seems to be coming and going. Sometimes I can see the icons, sometimes I don't, sometimes I can see icons but the wrong ones... I need to investigate further. It is also theme related, I think. When my theme got updated, all my icons changed, and 2 or 3 went missing from my home page.

problem 3 solved. I had restricted the Google Maps API to mysite.be/*, which obviously didn't work. I have now changed it to "no restrictions" and it works like a charm. My site has become less "safe" for hackers, but on the other hand there's nothing on there which is worth hacking, so...