View source for Using TNG and WordPress with the tng-wordpress-plugin

{{Obsolete
|notes=The TNG-WordPress-plugin has been discontinued. It has not been compatible with WordPress since WordPress 6.3 released on 8 Aug 2023.<br />You will need to use the Kloosterman integration method [[Wordpress and TNG direct integration, no plugin needed]]
}}
[[Image:FolderSetup.png|thumb|Folder Setup]]
[[Image:FileFolderSetup.png|thumb|File and Folder Setup]]
{|align=right
|__TOC__
|}
== Overview ==
This article describes how to set up your site to use TNG within WordPress using the '''wordpress-tng-plugin**'''. It is intended towards users setting a new site from scratch, but can also be read as it is by anyone who already has a site that has TNG in its own folder under the "root". There will be further notes on how to install if you have TNG already in your site's root folder at a later time.

<nowiki>**</nowiki>This plug in was initially developed by Mark Barnes of http://www.4-14.org.uk/ 

The top image on the right shows the relative arrangement of the folder '''wp''' containing the WordPress installation, and the folder '''tng''' containing the TNG installation. They are together at the root level of your site - so in the public_html folder for example. This top level also contains the '''index.php''' file - this points into the '''wp''' folder to load the site. The second image shows those folders opened up to reveal other files and folders inside them. Some files and folders are omitted to make the image less tall.

== <span style="color: red">Important</span> ==
*<span style="color: red">Read ALL of the instructions here '''carefully''' - '''twice''', and do them all in order. If something goes wrong, go back and look again at the instructions to find out what might have happened.</span>

== Getting Started ==
=== WordPress ===

# Download and install WordPress to a folder ('''wp''') in the root folder of your site following the directions in the Basic Instructions section of [https://wordpress.org/support/article/how-to-install-wordpress/ this page].
#Follow the instructions 1 - 11 in the Method II (With URL change) section of [https://wordpress.org/support/article/giving-wordpress-its-own-directory/ this page] to move a '''copy''' of the WordPress index.php and the .htaccess files out of the ''wp'' folder to the site's root (so "beside" the tng and wp folders) and then edit the index.php file as instructed so that it will load the contents of the '''wp''' folder.
##'''NOTE''' - if you already have WordPress installed in your site's root folder and want to move it in to a sub-folder then there is a slightly different set of instructions on how to do this on [https://wordpress.org/support/article/moving-wordpress/ this page]
#Once WordPress is installed and active, go to the WP Admin and click on Settings in the side menu and choose Permalinks. Choose one of
##Day and Name
##Month and Name
##Numeric
#and click the Save Changes button. '''Note''' if you already have the Permalink structure on one of these settings, but have moved the WordPress index.php page as described above, you'll need to change the Permalink Structure to something else, save the changes, and then change it to one of the 3 preferred settings as noted above and save the changes again. This is needed to get the right settings into the .htaccess file after having followed the instructions about moving the index.php page. <span style="color: red">See below for issues if you choose either "Post name" or "Default" for the Permalinks.</span>
#In WordPress Admin, go to the Appearance menu and then the Install Themes tab to search for a suitable theme. Considerations to a theme that is suitable for use with TNG include:
##should be flexible width, so that wide TNG pages showing for example charts can be made wider
##should allow for choices of pages with sidebar if you want to show a sidebar on most WordPress pages, and no sidebar which is best for maximising width on the TNG page
## The Suffusion theme, while no longer available from the WordPress theme directory, is still available and occasionally updated to keep it working. The current version 4.5.7 can be downloaded as a .zip file from [https://github.com/sayontan/suffusion/blob/master/dist/suffusion.4.5.7.zip this link] which is linked from [https://github.com/sayontan/suffusion/tree/master/dist this page] on the GitHub repository of the theme's author. It is known to still work with PHP 7.4 and WordPress up to 5.7.
## the [http://weavertheme.com/ Weaver Theme] also works with TNG 
## the [http://wordpress.org/themes/asokay Asokay Theme] also has been reported to work with TNG.  (Update: This theme has not been updated since 2016 and may therefore not be compatible with the latest versions of Wordpress.)
##[https://www.bnecreative.com/shop/wordpress-themes/ The Sweetness Theme by BNE Creative] is compatible with TNG.  As a premium theme it is not listed in the WordPress.org Themes Directory but must be purchased direct.  It is relatively inexpensive.  [https://ourfamilyhistory.club/ Click here to see a TNG site that uses it]
#Install your newly found theme.
#In WordPress Admin create a new Page that will hold the TNG content.
##For maximum available width for TNG this page should have no sidebars - this is an option if the theme supports it. Call the page anything except TNG if you have put TNG into a folder called tng. Do not put any content on this page. Take note of the Permalink for this page - you'll need it in the next section. In the settings page that is shown below, I have chosen '''Genealogy''' for the name of the page, and its Permalink is '''<nowiki>http://YourSite.com/genealogy/</nowiki>'''. 
##If the theme doesn't support a page layout without sidebars, see if the theme's options provide a way to turn off the sidebars on selected pages and turn off both sidebars on the page you have set for TNG to appear on.
##Of the themes mentioned above, '''[http://wordpress.org/extend/themes/atahualpa Atahualpa]''' allows you to remove sidebars from specific pages, and '''[http://wordpress.org/extend/themes/suffusion Suffusion]''' allows you to choose a page that doesn't have sidebars from among the templates when you're editing a page.

=== TNG ===

#Download the full install of TNG
#Upload the entire contents of the downloaded folder to a folder called '''tng''' in the root of your site
#Using your browser, open up the readme.html file that was installed so will be at a URL like '''<nowiki>http://YourSite.com/tng/readme.html</nowiki>''' and follow the instructions there for either Express Installation or Regular Installation to install and activate TNG on your site. '''Be sure to choose a UTF-8 Character Set and Language''' when getting TNG setup. Also make sure that the database that TNG is using is set to have '''Collation UTF-8'''. See [[Database - Creating]] for additional information.
#Do not select a template at this stage. With no template chosen your site will use the minimal theme that is default for TNG using the index.php, topmenu.php and footer.php files from the '''tng''' folder. You can customise this to match your WordPress theme later.
#Go to TNG Admin at <nowiki>http://YourSite.com/tng/admin.php</nowiki> and in the Setup ------> General Settings ------> Site Design and Definition set the Genealogy URL to the permalink you set for the TNG page above.
#On this same page check that the Custom Header and Custom Footer fields have file names in there - '''topmenu.php''' for Custom Header and '''footer.php''' for Custom Footer. Save the Changes.
#Still in TNG Admin go to Setup ------> Template Settings and set Template Switching to '''No'''.
#At this time you can import a GEDCOM file if you have one available so that there is some data on the TNG part of your site.
#Once this is done, make sure that the TNG part of your site is working - click the '''Public Home''' link in the top of the TNG Admin window and then click around some of the pages to make sure it's working OK.

=== WordPress TNG Plugin ===

#Download the '''wordpress-tng-plugin''' from the [https://wordpress.org/plugins/tng-wordpress-plugin/ WordPress plugins] site.
#Unzip the downloaded file, and then upload the resulting folder '''tng-wordpress-plugin''' to the plugins folder on your site. The path to this is wp/wp-contents/plugins See the image at top right showing these folders pointed out by red arrows.

OR

#Go to the Plugins section of the WordPress Admin on your site, click on Add New at the top of the list and then search for "TNG-WordPress" to find the plugin. You can then install it from there.

== Activate and Configure the TNG Plugin ==

#Go to your site's WordPress Admin page and choose '''Plugins''' from the left side menu. Find the '''TNG WordPress Integration''' item and click '''Activate'''[[Image: PluginOptions_v2.png|thumb|right|400px|Plug In Options]]
#In WordPress Admin click on TNG at the bottom of the left side menu to open the TNG / Wordpress integration options pane. You should get a screen that looks like the image to the right.
##From the pop up menu choose the page you have chosen to put TNG on (in this example the page is called "Genealogy"0;
##Click the '''Search for TNG installation''' button to have the plugin search for your '''tng''' folder;
##Make sure it found the correct folder;
##Enter the direct URL to your TNG Admin area - this is used by the button at the bottom of the screen to open the TNG Admin area in a new window outside of the WordPress environment;
##Check off the other options you want to have
###Integrate TNG/WordPress logins - if you check this users will have rights in WordPress '''and''' TNG using a single registration and sign in handled by WordPress
###Redirect successful login to referrer page
###Replace TNG homepage with WordPress page - check this if the Page you chose in 1 above has the content on it that you want people to see when they click a link for your TNG page. Leave it unchecked if you want them to see TNG's index.php page
##Click the '''Save Changes''' button to save the setting for these options
##Click the '''Update TNG variables''' button. This saves the names of all the TNG global variables into an option for the plugin in the WordPress tables.
#The '''Go to TNG Admin''' button can be used to open the TNG Admin. It opens in a new window, outside of the WordPress theme, directly from the TNG folder. This is to overcome a couple of glitches that so far haven't been solved when using TNG Admin from the WordPress page

== <span style="color: red">Important Notes</span> ==
*<span style="color: red">NOTE - in the past there has been a conflict with the WordPress '''JetPack''' plugin and the tng-wordpress-plugin. Your pages would NOT display correctly if the JetPack plugin was installed. As of WordPress 3.8.1 and the '''JetPack''' plugin version 2.7 that conflict seems to have been resolved. If you need statistics tracking on your site consider using the much "lighter" plugin [http://wordpress.org/extend/plugins/jetpack-lite/ JetPack Lite] which provides statistics and does NOT conflict with the tng-wordpress-plugin. Disable the JetPack plugin and install JetPack Lite.</span>
*<span style="color: red">The tng-wordpress-plugin seems to require the presence of the '''admin''' folder, even though it's no longer really used in TNG. '''UPDATE''' 5 Feb 2013 - this is not longer the case - the admin folder is not required. </span>
*<span style="color: red">There is currently an unresolved issue with sites where the TNG Privacy Settings are set to "Require Login = Yes". If you access the site through WordPress this is not obeyed and '''users who are not logged in through WordPress can still see the content of the TNG site.'''</span>
*<span style="color: red">The tng-wordpress-plugin will NOT work with the '''Permalinks''' setting on '''Default''', and if you have chosen a page with No Sidebars for the TNG page, a right sidebar will appear if '''Post name''' is selected.</span>
*<span style="color: red">Any time you upgrade your TNG version, or add a new Mod to your TNG, you need to go to the tng-wordpress-plugin settings page in WordPress Admin and click '''Update TNG Variables''' for your new additions/updates to work properly.</span>

== Troubleshooting Tips ==
These tips might help you to easily troubleshoot if something goes wrong during the installation and setup
*If you are starting from scratch with a new site, install WordPress, TNG and the tng-wordpress-plugin and make sure it works before you install lots of other plugins and change the theme. The plugin does work with the default Twenty Eleven theme, although the output isn't exactly "pretty"
*Some themes don't work properly with the tng-wordpress-plugin. If you find that your output isn't as expected - e.g. it's doubled on the page - change the theme to either the default Twenty Eleven theme, or one of the recommended known good themes as listed above - Suffusion or Atahualpa for example and see if that cures the display problems. One user reports that the "Graphene" theme causes the TNG output to be doubled on the page.
*Some plugins don't work properly with the tng-wordpress-plugin. If your TNG page has changed after adding a new plugin, Deactivate that plugin to see if that makes the problem go away.

== Points for Consideration ==
=== URLs to your Site ===

*There are 2 URLs to your site:
:*<nowiki>http://YourSite.com/</nowiki>'''Genealogy''' <---- this one is being processed by WordPress, and all of your genealogy pages will appear inside the WordPress theme.
:*<nowiki>http://YourSite.com/</nowiki>'''tng''' <---- this is accessing TNG directly, without being processed by WordPress or the theme being applied.

=== Access to TNG Admin ===

*As mentioned above there are issues with using TNG Admin from within the WordPress page. ie if your have set up your site as above, so that TNG is appearing on the page Genealogy (in the example above right) then as noted above there are two URLs to your site and specifically to the TNG Admin
:*<nowiki>http://YourSite.com/</nowiki>'''genealogy'''/admin.php
:*<nowiki>http://YourSite.com/</nowiki>'''tng'''/admin.php
*To safely use the TNG Admin area you '''must''' use the latter method. Two known issues of accessing TNG Admin through the WordPress URL are:
:*some settings in the Setup area get garbled - the settings for Line Ending get changed every time the Settings are saved, and any entries in the Site Name, Owner Name and Site Description fields that have ' or " marks in them get re-escaped every time it's saved.
:*When moving through pages of search results, clicking for the next or previous page using links at the bottom of the page does not scroll the next page back to the top - it remains at the bottom of the page
*If you want to make sure you are always accessing TNG Admin directly, you can use this ReWriteRule to rewrite any URL that is to a TNG Admin page from a WordPress page to go to the TNG page

<pre>RewriteEngine On
ReWriteRule ^genealogy/admin(.*)$ tng/admin$1 [R,L]
</pre>
where "genealogy" is the WordPress page and "tng" is the folder that TNG is in as noted above. The effect of this is that a URL like

<nowiki>http://YourSite.com/</nowiki>'''genealogy'''<nowiki>/admin_editperson.php?personID=I12676&tree=treeID&cw=1</nowiki>

will become

<nowiki>http://YourSite.com/</nowiki>'''tng'''<nowiki>/admin_editperson.php?personID=I12676&tree=treeID&cw=1</nowiki>

Place the above 2 lines into your .htaccess file before the block of lines that WordPress has added.

=== TNG Widgets and Sidebar ===

*If you're using a theme with a Sidebar, there are 2 Widgets you can add to that sidebar that will appear '''only''' on the page you have put TNG on - these are a '''TNG Search''' - places a simple Name Search box in the sidebar and '''TNG Menu''' - replicates the TNG menu from some of the TNG templates in the side bar. If you wish to use one or both of these, go to WordPress Admin, click on '''Appearance''' and choose '''Widgets'''. '''NOTE''' though that the TNG menu, and more, is now included in TNG 9 in the set of drop down menus that will appear on every page.

=== Integrated Login ===
*If you have checked "Use Integrated Logins", then Users created in WordPress are automatically created in TNG, but you will have to go to TNG Admin ------> Users ------> Review to approve the new users for TNG and set their rights:
:*If a user is a WordPress '''Administrator''', that same user is also a '''TNG Admin''' with full rights automatically, and does not need to be Reviewed in TNG;
:*If a user is a WordPress '''Author''', that same user is '''Custom''' in TNG without Add, Edit or Delete Rights, and no rights for Living, Private, GEDCOM Download or PDF. They must be reviewed in TNG Admin before their TNG Account is active, and you must choose what rights to give them within TNG;
:*If a user is a WordPress '''Contributor''', that same user is '''Custom''' in TNG without Add, Edit or Delete Rights, and no rights for Living, Private, GEDCOM Download or PDF. They must be reviewed in TNG Admin before their TNG Account is active, and you must choose what rights to give them within TNG;
:*If a user is a WordPress '''Subscriber''', that same user is '''Custom''' in TNG without Add, Edit or Delete Rights, and no rights for Living, Private, GEDCOM Download or PDF. They must be reviewed in TNG Admin before their TNG Account is active, and you must choose what rights to give them within TNG;
*Note that changes to the Rights of a user made in WordPress are not carried over to TNG;
*Note that deleting a user in TNG does NOT delete them as a WordPress user. If you want to delete a User completely, do it from the WordPress Admin;
*'''As noted at the top of this article, currently accessing the TNG content via WordPress does NOT respect the TNG Privacy setting for "Require Login", so even if Require Login is set to Yes, people accessing via WordPress will see your site's content.'''


== Tidying up the Presentation ==

Once you have it working "mechanically" you can then use TNG's '''mytngstyle.css''' file in the '''css''' folder in the '''tng''' folder to make changes to the TNG elements you want to alter to match the colours from your WordPress theme.

== Example Sites ==

Sites using the TNG-WordPress plugin include

{| border="0" cellspacing="1" cellpadding="2" class="wikitable"
|-
! URL
! User
! WordPress Theme
! Integrated Logins
! Language Switching
! TNG Version / WordPress Version
! Notes
|-
| [http://LisaAndRoger.com/ Roger's Ramblings]
| [[User:TheKiwi|Roger Moffat]]
| Using Suffusion theme.
| No
| No
| TNG 13.0.3 / WordPress 5.6.2
| TNG is under the Genealogy tab, and the Genea-Ramblings page includes a "feed" from TNG created using a set of queries into the TNG database.
|-
| [http://tngwp.LisaAndRoger.com/ Roger's Ramblings]
| [[User:TheKiwi|Roger Moffat]]
| Using Suffusion theme.
| No
| No
| TNG 13.0.3 / WordPress 5.9ß
| TNG is under the Genealogy tab, and the Genea-Ramblings page includes a "feed" from TNG created using a set of queries into the TNG database.
|-
| ...
| ...
| ...
| ...
| ...
| ...
| ...
|}

== Related Links ==

[http://codex.wordpress.org/Installing_WordPress#Famous_5-Minute_Install WordPress Famous 5-minute install]<br />
[http://codex.wordpress.org/Giving_WordPress_Its_Own_Directory#Using_a_pre-existing_subdirectory_install this page Giving WordPress its own directory]<br />
[http://wordpress.org/extend/themes/suffusion Suffusion theme]<br />
[http://wordpress.org/extend/themes/atahualpa Atahualpa theme]<br />
[http://weavertheme.com/ Weaver theme]<br />
[http://wordpress.org/extend/plugins/tng-wordpress-plugin/ WordPress Plugins]<br />

[http://wp.smashingmagazine.com/2013/04/08/moving-wordpress-website/ Moving A WordPress Website Without Hassle] 

[[Using_TNG_and_WordPress_with_the_tng-wordpress-plugin]] - this wiki page

[[Wordpress and TNG direct integration, no plugin needed]] - Kloosterman's integration method

[[WP_and_TNG_Integration_with_no_plugins_using_TNG_Templates]] - Kathleen's integration method

[[Category:WordPress]] [[Category:CMS Integrations]]