Wp-TNG-AVADA

Why do do you use WordPress

There are a lot of reasons why WordPress websites functions a lot better instead of the old traditional HTML designs of the past. Just to name a few:

WordPress sites are built around a CMS database so they take advantage of many content management system advantages natively that are hard to implement with traditional HTML sites. Using a true database for storage and dynamically generating Web pages as needed has numerous advantages over static Web pages.
You don’t have to be a technical genius to learn how to use WordPress.
One of the things that excites me about WordPress is its awesome potential. WordPress in its purest form, in the hands of a professional, can be a thing of pure beauty. It’s deep and complex, and has many hidden facets.
But — and this is what I love about it — it’s still relatively easy to use if you’re just a basic user. It’s like being given a race car as a personal vehicle. In the hands of a professional, you can drive it around a race track at 200-plus mph. But in the hands of an enthusiastic amateur, you can still drive it to work. It’ll just get you there a little faster than the other cars on the road.
If you know how to edit a Microsoft Word document, then you’ll be able to easily update the content on your WordPress site. Updating pages and/or blog posts on WordPress is literally as easy as editing a Word document.
The “Themes” concept allows the entire look of the website to be changed in a single click without any additional programming.
There are thousands of freeware “Plugins” that are software modules designed to take care of situations that would require tons of programming time to implement on a regular HTML site.
WordPress is incredibly cross-browser compliant.
Hundreds of WordPress themes are mobile right out of the box, but I always recommend bringing a quality designer on to help you make the most out of your design.

When people ask me what WordPress can do, I answer:
“Whatever you want it to do”

Why WordPress? Now you know.

Why do you use the AVADA WP template

Avada has been the #1 selling theme for more than 5 years, making it the most trusted and complete WordPress theme on the market. Powerful options & tools, unlimited designs, responsive framework and amazing support are the reasons our customers I choose Avada. Avada is attractive mainly due to its flexibility. You can use it for almost any type of WordPress site by applying one of the many pre-built demo websites in minutes. You’ll only need to add content and voila – you end up with a nice-looking website.

It is a multipurpose theme used to create just about any type of site, be it an online portfolio, a showcase for your business, an eCommerce shop, a social media style project, a gallery site or anything else you might need. No matter what you need, it can offer you everything you need to design a top-notch site through various functions and features that we’ve come to expect in today’s complex website requirements.

The Avada WordPress theme from ThemeFusion set a high standard with numerous possibilities and a multitude of new features, flexibility, free updates and ease-of-use.

That’s of course, besides including top-notch support with your purchase. It is clean and has a fully responsive design. By offering a sophisticated tool, Avada ensures your site gets noticed. It is very intuitive to use and perform out-of-the-box.In short, it is super sleek, fully responsive, amazingly flexible and has incredible options to easily and quickly customize the entire website.

Avada has been brilliantly developed by its developers to help users create a multipurpose theme, packed with features, prebuilt layouts, customization options, and even third-party plugin integrations.If you’re looking for a flexible solution that can be tailored to build a full-fledged, functional website, then this is it.

Another important strength of Avada is that it’s great at letting you take control of a mobile website’s appearance. You can exclude specific elements from appearing in the mobile version, and you can adjust the mobile breakpoints.

You can buy Avada HERE.

Why did you not use the WordPress plugin

There is an excellent TNG WordPress Integration Plugin, that integrates TNG with a WordPress site. This plug in was initially developed by Mark Barnes as described on his website. You can read a very thorough approach on this plugin by Roger Moffat, detailed on the TNG Wiki. There are a few reasons why I did not want to use the WordPress plugin:

The WordPress plugin has no extensive options for personalization of the theme.
I wanted WordPress users to be kept separate from TNG users.
I wanted to keep the layout and the feel of my old HTML design with the menubar horizontal beneath the header.
I did not want the TNG menu into a WordPress sidebar. When I started my WP/ TNG integration project the WordPress plugin moved the TNG menu into a WordPress sidebar. The current version of the tng.php plugin however doesn’t put the menu in the side bar if you don’t want it to.
I wanted to have full control over the layout and the design of my theme.
I wanted to have control over the menu and submenu items. Not only designwise (color, icons etc), but also which TNG menu item I wanted in the menu and which not.

For a batter understanding how Wordpress works, read this!

How do you integrate TNG with WordPress. Now this was the real challenge!

There is a famous quote from Abraham Lincoln that says:
“Give me 6 hours to chop down a tree and I will spend the first five sharpening the axe.”

Well, it took me a lot more than 5 hours to sharpen my ax and to figure out the integration between TNG and WordPress.

How WordPress works:

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 APIspecifies 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.

When you view a WordPress page, the first file called is index.php. This file doesn’t do anything, but loads wp-blog-header.php which does and tells WordPress to load the theme and output it.

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-blog-header.php is the access to all functions of WP!
It calls wp-head.php and then Wp() – 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 and WPTNG-meta.php, but anyname will do, as long as the extension is .php

Here are the files:

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

You can make these files with a text editor. I am a Mac user and I use Bbedit, if you are a Windows user, you can use Notepad or Notepad ++. Upload the 3 files with a FTP program (I use Filezilla, Mac and Windows versions) to the directory where TNG is installed.

The code content of these 3 files is:

1. WPTNG-topmenu.php

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

1. WPTNG-meta.php

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

1. WPTNG-footer.php

<?php
get_sidebar ();
get_footer ();
?>

Attention: Use: "get_sidebar();" only if you want to have the sidebar displayed in TNG pages

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).

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 not 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.

EXAMPLES of custom navigation menu with links to TNG pages

Menu example 1

Menu example 2

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 “”)
f 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.

PS: I did put some extra coding beneath the menu to get the layout I wanted, but that is optional.

Troubleshooting section!

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).

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. 1.) 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.

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-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:OLD: $title = esc_html__( ‘Error 404 Page’, ‘Avada’ );
and change Error 404 Page into whatever you want (I changed it into Genealogy pages)
NEW: $title = esc_html__( ‘Genealogy pages’, ‘Avada’ );On every TNG/AVADA page the title bar wil now show your new text.
End last: disable as default the breadcrumbs in the AVADA Theme optionsPS: You can still use the breadcrumbs on the WP pages, but you have to turn them on in every WP page separately in the Page title bar Fusion page options.
TNG: check if TNG is installed in a direct sub-root folder of Wordpress.
TNG:check if in Setup >> Configuration >> Template Settings: Enable Template Selectionis set to NO!
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.
Blank page or an HTTP 500 error: blank Pages usually means that somehow one of the text or cust_text files has a (BOM) Byte Order Mark in it. Try to FTP upload the languages folders again.
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.

How to get rid of the double HEAD, TITLE, BODY and HTML tag

Both Wordpress and TNG write out their own headers and footers 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, but:

If you want to get rid of the double head, title, body and html tags, this is how to do it.

Marcus Zurhorst suggested to make a separate modified header-tng.php file in the Theme directory and use the wordpress “wp_head” call not from within the header-tng.php file but from within in the meta.php file of TNG. Now that was a good idea, because the function of the meta.php file of TNG is to put extra code (if the TNG user wishes it) in the header between the ‹head› and ‹/head› tag.
His method involved also removing the entire section.

I wanted to keep some important code lines from the header-tng.php to import in the TNGsection of the TNG pages. The advantage of this method is that the important sections of the TNG header are in a separate php file.
You can chose what to keep and what to leave out.
You can read the full article here: TNG-forum article

(PS-info: the wp_head action hook is triggered within the section of the user’s template by the wp_head() function. Although this is theme-dependent, it is one of the most essential theme hooks. This hook is used by having a function echo output to the header of the browser, or by having it perform background tasks.)

INSTRUCTIONS

1.) Open the header.php file in the THEME directory you are using in WP (usually: wp-content/themes/your-theme).
– Save the header.php file as header-tng.php in the same THEME directory you are using.
– Now there should be a header.php and a header-tng.phpfile in the THEME directory you are using.

2.) Open the footer.php file in the THEME directory you are using in WP (usually: wp-content/themes/your-theme).
– Save the footer.php as footer-tng.php in the same THEME directory you are using.
– Now there should be a footer.php and a footer-tng.phpfile in the THEME directory you are using.

3.) Make a new file in your TNG directory and name it WPTNG-meta-header.php.

4.) Open the header-tng.php file you just made and cut everything from above the “BODY” tag to the top and save the file. – After this cutting the header-tng.php file should start with the “BODY” tag.

5.) Paste the cutted text from header-tng.php in WPTNG-meta-header.phpand save.
– Deletefrom the pasted text in WPTNG-meta-header.php the ‹head› and ‹/head› tag
– Deletethe line‹? php wp_head(); ?› – Save the WPTNG-meta-header.php

6.) Open the new made footer-tng.php and delete at the end of the code the “BODY” and “HTML” tags. – Save the footer-tng.php.

Oké, now you have to update the WPTNG-topmenu.php, WPTNG-footer.phpand the WPTNG-meta.php files in your TNG directory.

These 3 files should now look like this:

1. WPTNG-topmenu.php

<?php
get_header ('tng');
?>

2. WPTNG-footer.php

<?php
get_footer ('tng');
?>

3. WPTNG-meta.php

<?php
global $cms;
require ("../wp-blog-header.php");wp_head ();
include ("WPTNG-meta-header.php");
?>
<link href="<?php echo $cms['tngpath']; ?>css/YOUR-TNG-EXTRA.css" rel="stylesheet" type="text/css" />

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).

That’s it, the double head, title, body and html tags are gone!

How I implemented my header in WP-AVADA-TNG:

If you are using a AVADA theme template, you have to put the yourheader inside one of the AVADA headers you choose.
Activate the child theme of AVADA.
Place the AVADA template you are using in : /wp-content/themes/Avada-Child-Theme/templates.
In my case, I am using the AVADA 5 template (see printscreen).

Place your header as follows in the template (I am using 5) in the child theme
Between:
<?php avada_logo(); ?>
and
<?php if ( ‘flyout’ === Avada()->settings->get( ‘mobile_menu_design’ ) ) : ?>

As below:
<?php
/**
* Header-v5 template.
*@author ThemeFusion
* @copyright (c) Copyright by ThemeFusion
* @link http://theme-fusion.com
* @package Avada
* @subpackage Core
*/
// Do not allow directly accessing this file.
if ( ! defined( ‘ABSPATH’ ) ) {
exit( ‘Direct script access denied.’ );
}
?>
<div class=”fusion-header-sticky-height”></div>
<div class=”fusion-sticky-header-wrapper”> <!– start fusion sticky header wrapper –>
<div class=”fusion-header”>
<div class=”fusion-row”>
<?php if ( ‘flyout’ === Avada()->settings->get( ‘mobile_menu_design’ ) ) : ?>
<div class=”fusion-header-has-flyout-menu-content”>
<?php endif; ?>
<?php avada_logo(); ?>

<img https://YOUR DOMAIN/wp-content/uploads/YOUR_HEADER.jpg” />

<?php if ( ‘flyout’ === Avada()->settings->get( ‘mobile_menu_design’ ) ) : ?>
<?php get_template_part( ‘templates/menu-mobile-flyout’ ); ?>
<?php else : ?>
<?php get_template_part( ‘templates/menu-mobile-modern’ ); ?>
<?php endif; ?>
<?php if ( ‘flyout’ === Avada()->settings->get( ‘mobile_menu_design’ ) ) : ?>
</div>
<?php endif; ?>
</div>
</div>

Contact Info