Wordpress and TNG direct integration, no plugin needed

From TNG_Wiki
Jump to navigation Jump to search

Introduction

Homepage

During the years my genealogy website grew bigger and bigger, the HTML pages started piling up with hundreds of individual pages.

Considering all these facts I decided to install WordPress and to convert all the HTML pages to WordPress pages and try to integrate TNG with WordPress. The benefit of a CMS like WordPress is in the segregation of design and content. This saves a lot of time when you want to change or update your design and you can do so with your content 100% sacrosanct and unaffected.

PS:(I used the WordPress template AVADA, but you do not need AVADA. Just about any WordPress Theme that is compliant with the official WordPress theming guidelines will work with this TNG integration method.).


Cees Kloosterman



The advantages of the WP-TNG-AVADA integeration method are:

  • It is a easy way to integrate WordPress with TNG.
  • No change to the core file’s of TNG.
  • No change to the core file’s of WordPress.
  • Independent of TNG versions and/or WordPress updates.
  • Displays TNG within WordPress with no iFrames.
  • Can be used with any standard compliant wordpress theme.
  • Can be used with any variable width or fixed width header / menu.
  • The menu can be placed anywhere.
  • You can have a horizontal and a vertical menu .
  • You can have up to 6 sliding sidebars on any WP and TNG pages.
  • TNG and WordPress are kept in separate folders for easy upgrading.
  • TNG and WordPress can share the same database, or have seperate databases.
  • WordPress users are separate from TNG users.
  • Should be compatible with TNG mods.
  • This method has been tested on TNG v 10+ and WordPress 3.9+. It should work with other versions of TNG and WordPress 3.0+

Limitations

  • Works only with WordPress compliant themes, the standard TNG-templates will not work, because they are not WordPress templates.
  • Both TNG and WP write out their own headers separately, the resulting TNG pages have consequently double “Head” and “Body” and tags. This is not compliant with W3-validation and may give some penalties for the SEO.
  • Although the behaviour among especially older browsers is unspecified and not guaranteed to be consistent, it usually gives no display problems in the modern browsers. If you are oké with that and your TNG-WP website renders with no problems in the modern browsers, I suggest you just leave it like that.

Read this and you will understand better the steps you have to take to integrate TNG

If you want to use WordPress functionality in a PHP file that exists outside of your WordPress installation (Like the TNG files) then you have to “hook” into WordPress. To create an API outside the wordpress installation you’ll need to import wp-load.php which resides inside your wordpress installation at root level. This file loads the WordPress application and makes its API, and therefore your content, available for use. You can even load your WordPress site in some other website if both of your sites resides on the same hosting space/server by providing the require function absolute path to your wp-load.php file.

PS: API, an abbreviation of application program interface, is a set of routines, protocols, and tools for building software applications. The API specifies how software components should interact and are used when programming graphical user interface (GUI) components.

For a better understanding how this works, here is the content of the the WordPress index.php and wp-blog-header.php.

define('WP_USE_THEMES', true);
/** Loads the WordPress Environment and Template */
require( dirname( __FILE__ ) . '/wp-blog-header.php' );

The blog header file (that queues up the rest of WordPress) loads wp-load.php directly and fires up WordPress itself.
Below is most of wp-blog-header.php:

if ( !isset($wp_did_header) ) {
$wp_did_header = true;
require_once( dirname(__FILE__) . '/wp-load.php' );
wp();
require_once( ABSPATH . WPINC . '/template-loader.php' );

Basically that is all the information you need.

  • Wp-load.php is the access to all functions of WP!
  • Wp() is then called – this ‘starts’ WordPress , interpreting the incoming URL, processing it into a query, choosing a template and finally outputting the content and sending it into the user.

Here are the 5 steps you have to make:


  • Step 1.) Install WordPress in the root folder of your website
  • Step 2.) Install TNG in a sub-root folder. I called my TNG folder “genealogy” but any name will do.
    PS: In my setup TNG and WordPress share the same database. You can use two separate databases, but using one loads faster.
  • Step 3.) Make 3 files in your TNG folder

I named them:

WPTNG-topmenu.php WPTNG-footer.php WPTNG-meta.php

Any name will do, as long as the extension is .php

The code content of these 3 files is:

WPTNG-topmenu.php
<?php

require ("../wp-blog-header.php");
get_header ();
?>

WPTNG-footer.php
<?php

// Call the WordPress/Theme footer in the TNG pages.
 get_footer('TNG');

// WordPress/Theme footer; uncomment get_sidebar() only if you want to have the sidebar displayed in TNG pages.
 //get_sidebar();

// Newer versions of TNG include some important JavaScript code in the footer, so you need to include these TNG functions or certain things won't work.

global $text, $tng_version, $flags;

$flags['basicfooter'] = true;

echo tng_footer($flags);
?>

WPTNG-meta.php
<?php
global $cms;

?>
<link href="<?php echo $cms['tngpath']; ?>
 css/YOUR-TNG-EXTRA.css" rel="stylesheet" type="text/css"/>

'ATTENTION:
  • In Wp-TNG-meta.php the code line ” global $cms; ” is optional. I do not need it in my theme, but it might be necessary in some themes. So it is there as a safeguard. You can tryout for yourself if you need in in your theme.
  • YOUR-TNG-EXTRA.css is the css file with your own extra TNG css tweaks (if you do not have it, leave this part out).
  • Footer.php: Use ONLY your WordPress Theme to make your footer text, some themes do show not only the WordPress footer but also the TNG footer text, to get rid of the TNG footer text put the next code in you WP customize, additional css: .smaller.center { display: none; }
  • Step 4.)

Use these 3 files as the custom header, custom footer and custom meta files in the Site Design and Definition part of the TNG setup. Set in TNG Admin Setup >> Configuration >> Template Settings Enable Template Selection to NO and click SAVE.

  • Step 5.)

The default TNG index.php page will now be displayed within the WP theme. The WordPress Appearance Menus Screen enables a user to create custom navigation menu in place of a theme’s default menu. Use this to make links to the TNG pages you would like to have.

  • --> For more information how to make WP menus, read on HERE

PS: There is a workaround to display the index.php page within the WP theme:

  • In index.php change line 12: “$flags[‘noheader’] = true; ” —> into –> “$flags[‘noheader’] = false; ” ( without the “”)
  • If you also want the icons to be displayed: change line 11: “$flags[‘noicons’ ] = true; ” —>into—> “$flags[‘noicons’] = false; ” ( without the “”)

That’s it, WordPress functionality in TNG.

Troubleshooting

  • WordPress: check if WordPress is installed in the root folder of your website.
  • WordPress: Select Settings -> Permalinks. Set the permalink structure to anything but Default (I strongly recommend %postname%) and save changes. The TNG pages will not display properly with the Permalinks setting on Default.
  • TNG: check if TNG is installed in a direct sub-root folder of WordPress.
  • TNG: check if in Setup >> Configuration >> Template Settings: Enable Template Selection is set to NO!
  • TNG-AVADA: NO popup on ancestor and descendants pages. In WP custom css place the next css code:.popup {display:block !important; } .pboxpopup {color: #000000 !important;}
  • TNG-AVADA 404 error text on the page title bar: Use the Child theme of AVADA, make directory “includes”. Place a copy of AVADA custom_functions.php in that directory. Find rule 195: $title = esc_html__( ‘Error 404 Page’, ‘Avada’ ); and change Error 404 Page into whatever you want (I changed it into Genealogy pages) $title = esc_html__( ‘Genealogy pages’, ‘Avada’ );
  • CMOD: check your CMOD(s) (conform TNG install directions).
  • Template(s): use a compliant WordPress template.
  • Themes dir: compliant WordPress template must be in the standard “/wp-content/themes/” directory.
  • TNG-templates: the standard TNG-templates will not work, because they are not WordPress templates.
  • Sidebar: if there is a sidebar in your theme, it will only show on the the non-TNG pages.
  • Vertical menu: if there is a vertical menus in your theme it will only show on the non-TNG pages.
  • Users: WordPress users are separate from TNG users.
  • Wrong menu: if your TNG files show the wrong menu, or just “Home”, login to your WordPress admin / menus and delete all the Sample H and or V menus (if there are any) and keep only your own custom (primary navigation) menu.
  • Headers already sent error: if you encounter a “Headers already sent” error”, it means that the webserver cannot send any more http headers if the HTTP content has already started sending. Usually the “Headers already sent” means there is a rogue space somewhere. Make sure that: <?php is at the very top of the php script and that there are no white space(s), linebreaks or BOM hidden chars in it. If the error source is mentioned as behind the closing ?> then this is where some whitespace or raw text got written out and as a consequense the PHP end tag does not terminate script executation at this point. Any characters after it will be output as page content still.
  • PS: The BOM is for unicode files to tell the processor the order of the bytes. Find out more about it HERE.
  • PhP coding mistakes: 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 a quote, brace or semi-colon causing a syntax error.

If you like to read more, check this article: PHP Mistakes.

One word of caution if you are using TNG versions 10.0.0 and lower!

The problem of the drag/drop functions as described below concerns only the TNG versions 10.0.0 and lower!.
In the new TNG release(s) 10.0.1 + Darrin Lytgoe incorporated my solution below. You DO NOT have to change anything if you installed the latest TNG version(s).Italic text

You can click on the [Collapse] link on the right to hide this section or [Expand] to display the hidden section.

The jQuery.js file from WordPress can conflict with the litbox.js file in the TNG/js directory. The result is that the bookmark and login icons in het TNG pages will not work, the jQuery conflict freezes up the PopUp window. The origin of the conflict is that the bundled WordPress jQuery ships in noConflict() mode (only supporting the jQuery variable). TNG on the other hand uses the Google Hosted Libraries method. To make it even more complicated, sometimes WordPress also gets fussy with the $ or jQuery in jQuery code.

I pinpointed the problem to the draggable” function in a TNG jQuery file, namely: /js/litbox.js at line number 103:
You can solve the draggable problem like this:
change line 103: jQuery (this.d2).draggable({handle: ‘.LB_closeAjaxWindow’}).resizable();
into this line: $(this.d2).draggable({handle: ‘.LB_closeAjaxWindow’}).resizable();

PS: Turning of the “no conflict” mode, by removing the “jQuery.noConflict()” from the last line in “wp-includes/js/jquery/jquery.js” certainly solved the “draggable” conflict, but that started a whole lot of other plugin conflicts. That is because another popular library that performs a similar task to jQuery is one called ProtoType. This is used by many plugin authors. The problem comes in that both jQuery and ProtoType sadly share the same method of calling them from the code. So a basic call to the jQuery library may well be interpreted as a call to the ProtoType library and visa versa. To overcome this, the jQuery developers made available what is called ‘no conflict’ mode that allows jQuery to be called in a more unique way. So turning off the “no conflict” mode” leads to disaster and chaos.

Related Links

Using_TNG_and_WordPress_with_the_tng-wordpress-plugin - Integrating WP and TNG using the plugin

Wordpress and TNG direct integration, no plugin needed - this wiki page

WP_and_TNG_Integration_with_no_plugins_using_TNG_Templates - Kathleen's integration method

Retrieved from "https://tng.lythgoes.net/wiki/index.php?title=Wordpress_and_TNG_direct_integration,_no_plugin_needed&oldid=91126"