Jump to content
TNG Community
KevyNC

TNG v12 with WordPress

Recommended Posts

KevyNC

Hello,

I hope this is the most appropriate forum for this topic:

I ran a live site for a year using  v11 and used templates with some mods installled.  As great as the templates are, none of had the feel I was seeking.  They also did not allow for the customization I was looking for either. I have taken my live site down for now while I design the site I want present to my users and that delivers the experience I want them to have.  It seems like WordPress is my best option -- however I am a little confused as which way to go

https://tng.lythgoes.net/wiki/index.php?title=Category:WordPress 

I sort of like something like this

http://lisaandroger.com/genealogy/

I might want a side menu -- but that  may cause other issues ...

Can someone also tell me what changes WordPress (or other options) I might want to consider for v12?  Also some more sites that have used WordPress and/or other things to be aware of -- I would appreciate it.

[Edit] I should add that I do not want to maintain two user accounts in order to have access to restricted info -- so I could  keep the Wordpress (HomePage ) open and then require logon for TNG records etc. (similar to what I had in the original site) 

Share this post


Link to post
Share on other sites
theKiwi
9 hours ago, KevyNC said:

I might want a side menu -- but that  may cause other issues ...

 

You can put a sidebar on the "Genealogy" page in the WordPress-TNG-Plugin, but my rationale for my site, and my recommendation is to not do that, in order to give the page maximum possible width to allow for the genealogy data - eg images of documents, or wide charts.

I do show a sidebar on other pages, with some TNG data pulled into that sidebar that shows on all of the Non-TNG pages.

I'm the only one who logs into my site, so having separate logins to get to TNG Admin and WordPress Admin is not a big hindrance to me. The single login parts of the plugin stopped working back at about TNG 9, and so far I haven't figured out entirely where the issues lie, and have little interesting in fixing it since I don't use it.

Roger

Share this post


Link to post
Share on other sites
KevyNC

Thanks Roger I appreciate your thoughts.  My main reason/thoughts for wanting a side menu are for my less experienced users with computers and technology, I do like the basic layout of your website ( http://lisaandroger.com/genealogy/)  it is probably the closest to want I am looking to do I have seen. Certainly something I can work with.

I may ask some follow-up questions --  I installed  WP and plugin last night and plan  to work starting homepage etc tonight.  I put the WP files in root directory, and TNG folder in subdirectory of root but  I saw in the wiki both folders should be in root (wp & tng).  I wanted to ask about WP and TNG because some of the info seem to be outdated (such as logon ).  Thanks for your response.

Kevin

Share this post


Link to post
Share on other sites
PapaTango

What Wiki instructions are you referring to?  My understanding is that the plugin method is the only one that requires WP in its own folder--and necessitates moving the WP index.php file into the domain root.  Other methods such as what has been suggested by Cees and Kathleen install WP to the root, and TNG in its own folder.  So if you are not planning to use the plugin, you are good!   😎

Rather than the version of TNG, I am more concerned about WP and the jump from 4.x to 5.x.  Natively the v5 iteration natively uses Gutenberg as its editor--a block styling solution similar to Elementor and others.  One can force the 'classic' tinyMCE editor--but I quickly found issues with the older 'traditional' themes for TNG integration--ones that do not use the WP Customizer integration.  Hence, I am running v4.9.9 on all three of my dev sites--with a plugin that prevents WP from auto-updating.

Why three dev sites?  One is running the plugin, and the other two are running iterations of the direct integration paradigm.  After a week, all of them are making me quite nuts... 😝

Share this post


Link to post
Share on other sites
klooster

I am running WP 5.x and the AVADA theme and TNG with no problems

Running Avada 5.7.2? Nothing to do!

You can expect the same seamless working experience that you are used to with Avada and WordPress. Both, Avada and the Fusion Builder, will be unaffected and this includes the front-end of your site. Additionally, feel free to try the WordPress 5.0 Gutenberg editor. Avada has added options to either create a post on Gutenberg or within Fusion Builder, your choice. You can’t edit a page/post created with Gutenberg in the Fusion Builder or vice versa, however, you are free to try Fusion Builder Elements in Gutenberg. 

 

The most important advantages of my integration method:

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

Check out: https://www.kloosterman.be/info/tng-wp-avada/

Share this post


Link to post
Share on other sites
KevyNC

Thanks for sharing I will check this out.  This might help me with my rebuild.

Currently using a UsbWebserver to test out

Share this post


Link to post
Share on other sites
PapaTango

Thanks for the tip on Avada, Cees.  Following the conventional wisdom of "sometimes less is better" in WP design, I have been playing with the older themes such as Suffusion, Atahualpa, and Baskerville.  I have even ventured out on a financial limb with the 'pay for play' pro version of CoolWP.  Each one came with its own set of issues and headaches--one of which concerns the clarity of certain instructions and design modifications for various types of TNG integration.

My final 'production' site will not be heavy on graphics of any sort.  ALL of my old family photographs were lost in a fire quite some time back--and through attrition, the collections of other family members lost also.  This is one of the purposes of my site planning--a "call to action" for scattered and 'lost' relatives to help provide some materials.  Graphics are a strong suit with Avada (as your site aptly demonstrates).  One can, of course, choose to minimalize such elements to simplify the presentation.  This is where the question of whether $60 is a prudent expense.

I think I am going to start a seperate thread about utilizing and configuring WP and TNG templates.  As to the main point of this thread, I believe Cees is correct in his statement about the current status of using the latest versions of WP & TNG.  Rather, what I see as the issue in the future will be core changes that do not respect the coding of the direct integration paradigm.  Something to worry about later...

 

ON EDIT:  Cees, on your integration is the native TNG template feature switched on or off?  And if in the off position, how are you applying your CSS formatting for the WP header/footer pages TNG content?

Share this post


Link to post
Share on other sites
klooster
  • The native TNG template feature switch has to be OFF
  • The css for the Header /footer formatting is all done within the AVADA theme and some custom css by myself,

 

Check this AVADA css link out

how-to-apply-custom-css/

Share this post


Link to post
Share on other sites
cfj
10 hours ago, PapaTango said:

Thanks for the tip on Avada, Cees.  Following the conventional wisdom of "sometimes less is better" in WP design, I have been playing with the older themes such as Suffusion, Atahualpa, and Baskerville

I use a Bootstrap WordPress themes that guarantee full mobile-friendliness and ease of use for all users.

Share this post


Link to post
Share on other sites
fluffy82

My experience is that if you tweak the css enough, any theme will work. I've tried dozens (of the free themes) before finally choosing one (I'm using Accelerate by ThemeGrill now), and the only thing some of them needed, was a couple of hooks to make the content lign up properly. But these were a minority, most themes were just fine.

The only question is, how much time and effort do you want to spend in making things look nice. I'm sure there are themes out there that need very little tweaking to get a nice result, others will need more. That's just a personal choice.

 

https://www.huygens-vandemoortel-ancestry.be/ (still under construction... articles are being written, sources and media are being attached... a slow but steady progress)

Share this post


Link to post
Share on other sites
PapaTango

@fluffy82 that is a nice, clean page display!

Share this post


Link to post
Share on other sites
fluffy82
2 minutes ago, PapaTango said:

@fluffy82 that is a nice, clean page display!

Thanks! Though you come at a bad time, I started redoing the css yesterday, so many of the pages/functionalities aren't 100% ok yet (notably the person page). Come back in a week or so for the final result 😎

Share this post


Link to post
Share on other sites
PapaTango

That's OK.  My site is still heavily under development--and surfers are greeted with a "Coming Soon" splash screen that replaces the WP index.php for non-logged on users.

I guess that there are varying degrees of 'ease' depending upon integration type, themes, and expectations.  I began by using the plugin--and made myself thoroughly insane.  Shifted next to LadyKathleen' schema--hoping to capture Darrin's work on the native templates.  I can now write a short monograph on various CSS issues with both free and paid themes.  I finally went with an older and tested theme (Atahualpa) and the Kloosterman code.  In doing so, my recognition was that I would be re-writing much of the CSS formatting for both WP & TNG to create an entirely new and integrated look.  700 some lines later, and I have most of that done.  There are a few small issues with loading order of certain element styles, but not enough issue to delay the launch.  Ultimately, if it never happens I can live with a grey go button instead of a green one... 😋

 

Share this post


Link to post
Share on other sites
KevyNC

Okay -- I played with this.  I got it sort of working with the TNG plugin.  However, I can no select items or direct to other TNG pages.

it only displays the main TNG pages within WP.  Also it has this at the top of the WP page

" #tng_main td.menuback, #tng_main td.spacercol, #tng_main table.page td.section td.fieldname {display:none} "

See screenshot below, the issue now is I can not navigate to other TNG pages  and not sure why

https://alveslaborefamily.net/family-tree/

image.png

Share this post


Link to post
Share on other sites
theKiwi

1 - I have no idea why that style code is showing up on your page - it's meant to appear in the <head> section of the page as a style declaration. If you change the theme does this still happen? On my page here it appears the same in the HTML source, but doesn't appear on the page at all

http://LisaAndRoger.com/Genealogy/ 

2 - for the navigation issue, it seems like a rewrite or redirect is happening - what Permalinks setting are you using? Try changing to a different setting, save it, and then change back to the recommended setting of one of 

Day and Name
Month and Name
Numeric

and save again.

Also try updating the TNG Variables

Roger

Share this post


Link to post
Share on other sites
KevyNC

I upgraded to 5.8 the other day -- not sure if that was related. I did not have entire theme loaded (only partial).  I uninstalled and installed the entire Classic theme ( I wanted to avoid this  because then I have to delete about 90% of menus and pages.  I refreshed the permalinks.  Is there issue with "Post name"?  (I recall numeric and/or plain had issues).   Also updated TNG Variables which I normally do when do any changes.  

Here is where I am now:

  • the Style coding issue is gone.( " #tng_main td.menuback, #tng_main td.spacercol, #tng_main table.page td.section td.fieldname {display:none} " ) - no longer displays.
  • The navigation works --  meaning the TNG displays.
  • The TNG pages do NOT display in the WP with the headers/top menu etc.

so at this point --- I believe I just need to resolve the issue with TNG pages not displaying inside of WP with headers/menu etc.

I made a test menu "Genealogy" with a couple menu items to see if it work.  Also I put in URL and Path to see if the result was different

image.png

 

Both display but NOT with headers or menu

https://alveslaborefamily.net/

Appreciate any suggestions

[Edit]  I tried Deactivating the TNG Plugin -- the results appear to be same -- this suggests to the Avada theme may not be compatible with the TNG Plugin. Thoughts?

Edited by KevyNC
new info

Share this post


Link to post
Share on other sites
klooster

First of all put this problem in the right forum : CMS Integrations,

There is nothing wrong with your:

  • WP-TNG-topmenu.php
  • WP-TNG-footer.php
  • WP-TNG-meta.php

I see you are using the AVADA template!

Your problem is the way AVADA is using the headers.

If you are using a AVADA theme template, you have to put the header 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 (5 I am using) 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://www.kloosterman.be/wp-content/uploads/AVADA_HEADER-1350x495.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>

 

 

PS: I placed this answer also in the Forum " CMS integrationss . PLEASE answer in the right forum :CMS Integrations

Schermafbeelding 2019-02-12 om 21.27.41.png

Share this post


Link to post
Share on other sites
KevyNC
40 minutes ago, klooster said:

First of all put this problem in the right forum : CMS Integrations,

Sorry I found that forum after

How do I move a post to a different forum?

Share this post


Link to post
Share on other sites
theKiwi
6 hours ago, KevyNC said:

Sorry I found that forum after

How do I move a post to a different forum?

I've moved this into the CMS Integrations ------> WordPress forum now

Roger

Share this post


Link to post
Share on other sites
KevyNC
17 hours ago, klooster said:

Your problem is the way AVADA is using the headers.

If you are using a AVADA theme template, you have to put the header 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 (5 I am using) in the child theme

Between:
 <?php avada_logo(); ?>

and

 <?php if ( 'flyout' === Avada()->settings->get( 'mobile_menu_design' ) ) : ?

Please excuse my lack of understanding and experience. I believe i understand what you did, but I do not understand how to apply it to my situation.

Also, how do I know what template I am using?  I also tried using a Child-Themes Plugin to see if that would help me.  The two "greenish" lines above were not in the same order when Iooked at the 5 template (maybe I have a newer version).  My understanding of childthemes is limited, but basically a child will replace "settings/styles" so when changes and/or updates are done, those settings/modifications will still work and not be lost correct? My lack of understanding (I believe) is how this can help display TNG pages with WP headers. I know pages can have containers (not that I have much understanding).  Does this mean that TNG pages are sort of  displayed in a container with the WP headers? Part of my challenge might be I may not be asking the right question and/or providing the right info so you can assist me.

[Edit] I do want TNG pages to be able to displayed form MENU and or other links within other pages -- for example I might have a custom report that shows a particular family, or birth within a decade that I want people to be able to check out (or other scenarios where such things would clutter the menu(s)

Share this post


Link to post
Share on other sites
cfj

I'm sorry to jump in, but KevyNC have you managed to load the Wordpress environment in TNG without plugin?
If not try first the WP theme Twenty Seventeen before you use Aavada. Just to see if everything working between WP and TNG

Share this post


Link to post
Share on other sites
klooster

Great suggestion CFJ, first try it with the default Twenty seventeen tmeplate.

"It is a capital mistake to theorize before one has data. Insensibly one begins to twist facts to suit theories, instead of theories to suit facts.’

Sherlock Holmes Quote

Share this post


Link to post
Share on other sites
KevyNC

Thank you for your replies Cees & CFJ

I have tried both WITH and WITH OUT the TNG Plugin -- that could be part of my confusion (along with reading other issues users have faced). I tried the 2017 Theme but that did not work either. Not sure if Activating and Deactivatng the TNG Plugin has caused any issues.

Below are my settings from TNG Admin...

Well as I was doing screenshot I found my typo --- the filename for the header had "WP-TNG_" vs "WP-TNG-"  admin vs actual filename.... now I feel really silly.  That probably was the issue all along.  Thank you again for your help  if though I wasted a bit of your time. 

[edit] removed pics

 

Share this post


Link to post
Share on other sites
theKiwi
3 hours ago, KevyNC said:

I have tried both WITH and WITH OUT the TNG Plugin -- that could be part of my confusion (along with reading other issues users have faced). I tried the 2017 Theme but that did not work either. Not sure if Activating and Deactivatng the TNG Plugin has caused any issues.

I'm not sure that simply activating and deactivating the plugin is enough to switch from the plugin method to the Kloosterman method - the Kloosterman method requires changes to some WordPress file, whereas the PlugIn method doesn't, and I'm not sure how the plugin would behave if your WordPress files are modified as required by the Kloosterman method.

Roger

Share this post


Link to post
Share on other sites
klooster

Just a little correction, my method does NOT require ANY changes to ANY Wordpress CORE files.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×