Using TNG and WordPress with the tng-wordpress-plugin

From TNG Wiki

Jump to: navigation, search
Folder Setup
File and Folder Setup

Contents

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.

**This plug in was initially developed by Mark Barnes as described on his website

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.

Important

Getting Started

WordPress

  1. Download and install WordPress to a folder (wp) in the root folder of your site following the directions in the Famous 5 Minute Install section of this page.
  2. Follow the instructions in the Using a pre-existing subdirectory install section of this page to move a copy of the WordPress index.php file out of the wp folder to the site's root (so "beside" the tng and wp folders) and then edit it as instructed so that it will load the contents of the wp folder.
  3. 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
    1. Day and Name
    2. Month and Name
    3. Numeric
  4. 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. See below for issues if you choose either "Post name" or "Default" for the Permalinks.
  5. 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:
    1. should be flexible width, so that wide TNG pages showing for example charts can be made wider
    2. 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
    3. the Suffusion theme is one theme that meets these requirements and is very highly customisable by the user
    4. the Atahualpa can also be configured to work with TNG
    5. the Weaver Theme also works with TNG
    6. the Asokay Theme also has been reported to work with TNG
  6. Install your newly found theme.
  7. In WordPress Admin create a new Page that will hold the TNG content.
    1. 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 http://YourSite.com/genealogy/.
    2. 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.
    3. Of the themes mentioned above, Atahualpa allows you to remove sidebars from specific pages, and Suffusion allows you to choose a page that doesn't have sidebars from among the templates when you're editing a page.

TNG

  1. Download the full install of TNG
  2. Upload the entire contents of the downloaded folder to a folder called tng in the root of your site
  3. Using your browser, open up the readme.html file that was installed so will be at a URL like http://YourSite.com/tng/readme.html 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.
  4. 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.
  5. Go to TNG Admin at http://YourSite.com/tng/admin.php and in the Setup ------> General Settings ------> Site Design and Definition set the Genealogy URL to the permalink you set for the TNG page above.
  6. 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.
  7. Still in TNG Admin go to Setup ------> Template Settings and set Template Switching to No.
  8. 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.
  9. 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

  1. Download the wordpress-tng-plugin from the WordPress plugins site.
  2. 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.
  3. Download the current version of the tng.php plugin file from TNG Downloads page in the Add-ons for Integrating TNG with Other Systems section at the bottom. You will need the ID and password provided when you purchased or upgraded to TNG 9.
  4. Copy the newly downloaded tng.php file to the tng-wordpress-plugin folder that you have just uploaded to overwrite the existing tng.php file in that folder.

Activate and Configure the TNG Plugin

  1. 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
    Plug In Options
  2. 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.
    1. From the pop up menu choose the page you have chosen to put TNG on (in this example the page is called "Genealogy"0;
    2. Click the Search for TNG installation button to have the plugin search for your tng folder;
    3. Make sure it found the correct folder;
    4. 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;
    5. Check off the other options you want to have
      1. 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
      2. Redirect successful login to referrer page
      3. 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
    6. Click the Save Changes button to save the setting for these options
    7. 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.
  3. 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

Important Notes

Troubleshooting Tips

These tips might help you to easily troubleshoot if something goes wrong during the installation and setup

Points for Consideration

URLs to your Site

  • http://YourSite.com/Genealogy <---- this one is being processed by WordPress, and all of your genealogy pages will appear inside the WordPress theme.
  • http://YourSite.com/tng <---- this is accessing TNG directly, without being processed by WordPress or the theme being applied.

Access to TNG Admin

  • http://YourSite.com/genealogy/admin.php
  • http://YourSite.com/tng/admin.php
  • 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
RewriteEngine On
ReWriteRule ^genealogy/admin(.*)$ tng/admin$1 [R,L]

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

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

will become

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

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

TNG Widgets and Sidebar

Integrated Login

  • 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;


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

URL User WordPress Theme Integrated Logins Language Switching TNG Version / WordPress Version Notes
Roger's Ramblings Roger Moffat Using Suffusion theme. TNG 10.0.0 / WordPress 3.8.1 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.
Roger's Ramblings Roger Moffat Using Atahualpa theme. Yes TNG 10.0.0 / WordPress 3.8.1 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

WordPress Famous 5-minute install
this page Giving WordPress its own directory
Suffusion theme
Atahualpa theme
Weaver theme
WordPress Plugins

Moving A WordPress Website Without Hassle

Personal tools
Namespaces
Variants
Actions
Navigation
TNG Guides
Items of Interest
Categories
Translators
Language
Toolbox