Combining WordPress and TNG
My plan for creating my website was to combine a WordPress blog with a genealogy archive, 
as well as creating a few other static pages. This website is a work still in progress!
I used a free theme from WordPress, which I have modified by using a child theme. I decided to go with TNG Genealogy software for my genealogy pages. TNG has its own databases, as does WordPress. PHP and MySQL back both of these programs up. Combining TNG, WordPress and their databases to create a workable website proved to be a bit of a dilemma.
The WordPress and TNG Integration Page is excellent if you want to do this integration. Turns out if you do not do exactly as the instructions say, and in the instructed order, integration is not successful. By following the instructions on this page very carefully, successful integration of these two programs will be achieved. The header and footer of TNG and WordPress will match seamlessly.
Here’s an image of my own folders on the webserver. The TNG and WordPress folders sit side by side and at the root of my website. I use the free FTP program FileZilla to upload files to the server.
I have been using a simple free program called Notepad++ to save copies of my uploaded files – necessary if something does not work out as planned. Another text editor that I like is Sublime Text, which comes at a cost.
I created a new index page for TNG, as the provided TNG templates do not work with the TNG/WordPress integration. The latest version of TNG, which I have installed, has a DNA Tests component to aid your research by keeping track of DNA tests. TNG has added Heat Maps to the Places, Surnames, and Search results pages. These maps show the global distribution of surnames and places in your family tree on a zoomable Google map.
I wanted my site to be mobile friendly so had to step up my skills in that area as well, by making sure that my website looked good in mobile views as well as on larger screens. My old templates from Web Design School turned into “miniatures” on small tablets and phones, which was not exactly what I was looking for.
The Chrome browser has an excellent free tool that enables you to inspect and live-edit the HTML and CSS of a page. You right-click on the webpage that you are working on and select Inspect Element. You can then toggle to the device toolbar, which gives you an idea of how your webpage would look on various phones and tablets. It’s also great to be able to use Inspect Element to change colour, font and other elements temporarily without having to go back and change your code.