Jump to content
TNG Community
Hoplop

Copy Above TNG tabs in Wordpress

Recommended Posts

Hoplop

Hi--I have a complex question that I'm not sure anyone has tried. I've been playing with the Kloosterman method which takes a TNG php page and basically adds a header and footer based on a Wordpress theme. I feel that it would greatly enhance the ease of using the TNG tabs for users, if there was some introductory text above them with a small explanation of how to use them.

Has anyone any ideas on how to add an area of text to the space above the tabs? I'm assuming it's a change to either the meta.php or the topmenu.php one.

 

Or is the best answer to use the Plug in approach to get this result?

My ideal solution would allow me to call the php for the TNG genealogy info within the shell of a Wordpress page.

Thanks for any help you can provide.

Share this post


Link to post
Share on other sites
RickM

Hi there

I'm curious what you mean by TNG tabs as below snip shows.. If you are meaning the tabs that show on the person page etc, then it would be either a getperson.php or genlib.php change that would be required.

tabs.jpg

If you are meaning the TNG Menu then probably the topmenu.php file would be the place to make the addition.

Could you provide a screenshot of the page you are meaning and where you want to see the info added too please..

Share this post


Link to post
Share on other sites
klooster

What Theme are you using and what is the URL of your website??

Share this post


Link to post
Share on other sites
Hoplop

Hi

I'm going to be using the Divi theme. And yes, it looks like the ideal spot would be to place a content area in the topmenu.php after the "header" is called and before it calls all the TNG info. My ideal solution would have a full width image and then some text following it. Any help would be very much appreciated.

I'm attaching a rough image of what I'm trying to accomplish.

Thank you for your help

php example.jpg

Share this post


Link to post
Share on other sites
theKiwi
2 hours ago, Hoplop said:

I'm going to be using the Divi theme. And yes, it looks like the ideal spot would be to place a content area in the topmenu.php after the "header" is called and before it calls all the TNG info. My ideal solution would have a full width image and then some text following it. Any help would be very much appreciated.

 

Note that this would occur on EVERY TNG page, and probably start to get quite annoying, especially to your users who have say a 13" MacBook Pro, and barely see any actual site content without scrolling the page.

Roger

Share this post


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

Note that this would occur on EVERY TNG page, and probably start to get quite annoying, especially to your users who have say a 13" MacBook Pro, and barely see any actual site content without scrolling the page.

I would concur with Roger, however, you may have something quite interesting displaying there in relation to each 'module' being displayed. this simple HTML should get you started

 

<div class="??"><img src="yoururl.com/yourimgage.jpg"><p class="??">Your Text</p></div>

And I would place it after the <body> tag in the topmenu.php file. I might also suggest that you rename that file and if you are using the footer.php and or meta.php files, rename them to something like WP_xxx.php where xxx is the filename currently. My reason for the suggestion is these files may get overwritten in an upgrade (very seldom but could happen) so if renamed, will never happen. DOn't forget to change the filenames in the admin settings as well.

Share this post


Link to post
Share on other sites
Hoplop

Thank you for your thoughts--and help.

Re: the repetition--I am not aiming for anything other than the appearance of a standard header graphic. Not a huge hero image. My theme keeps the called header to nothing more than the small logo area and the nav menu. It does not call a graphic with it.

Re RickM's code.

Are you saying that the topmenu,php should read like this? (and yes--will be very aware of the issue with overwriting original files).

I think I am possibly not understanding your input correctly as there is no body tag in the topmenu.php. Is this what you mean? thank you

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

?>

<div class="??">

<img src="yoururl.com/yourimage.jpg">

<p class="??">Your Text</p>

</div>

 

 

Share this post


Link to post
Share on other sites
Hoplop

One further thought

Is it possible I should simply create a separate php with the div for graphic and text and call it after the header? Like this...

 

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

require('fileOne.php');

?>

Share this post


Link to post
Share on other sites
RickM

You may add the appropriate HTML in which ever way suits you  better.. Mine was just the way I would do it.

I thought the Kloostermans Method included something like a <body> tag or as I have mine setup a <div> tag that contains the TNG page.. Maybe it doesn't.. I'm still pretty new to this TNG & Wordpress thing..

And as for the placement, you are spot on.. You can style how you wish once.. Do replace the ?? in the class statements with an appropriate to you class title.

 

Share this post


Link to post
Share on other sites
Hoplop

Thanks RickM

--I'm testing now and can already see it will work after some styling. In the past--I've never touched the php on any Wordpress site I designed--I feel like I'm learning a lot on this project.

Share this post


Link to post
Share on other sites
Hoplop

I've got my graphic and text working well I think--now for an additional question.

Is there any way to wrap the TNG content in a div using the php file that would allow me to control the width of all the TNG information I bring in? It's currently running full width  and I'd love to give it an overall left and right margin. If it cannot be done not in the php, then Is there possibly something somewhere in the original TNG css?

Thanks for your patience

 

Share this post


Link to post
Share on other sites
RickM

I do something like this in the topmenu.php

 

<?php
	get_header ('tng');

?>
<!-- Start my Header container --><div class="??">
<img src="yoururl.com/yourimage.jpg">
<p class="??">Your Text</p>
<!-- End My Header Container --></div>
<!-- Start TNG page build Div container. --><div class="??" style="width:85%; margin: 20px auto;">

And in the footer.php

 

<!-- End TNG page build Div Container--></div>
<?php
// get_sidebar(); //if you want to have it displayed in TNG pages
get_footer ('tng');
 ?>

You NEED to ensure you close the <div> tag opened in the topmenu.php by adding the closing </div> tag in the footer.php

 

Share this post


Link to post
Share on other sites
Hoplop

Brilliant--can't wait to try this. Never thought of closing the div in the footer file.

 

Share this post


Link to post
Share on other sites
Paul Barrett
On 1/29/2021 at 10:15 PM, RickM said:

I do something like this in the topmenu.php

 


<?php
	get_header ('tng');

?>
<!-- Start my Header container --><div class="??">
<img src="yoururl.com/yourimage.jpg">
<p class="??">Your Text</p>
<!-- End My Header Container --></div>
<!-- Start TNG page build Div container. --><div class="??" style="width:85%; margin: 20px auto;">

And in the footer.php

 


<!-- End TNG page build Div Container--></div>
<?php
// get_sidebar(); //if you want to have it displayed in TNG pages
get_footer ('tng');
 ?>

You NEED to ensure you close the <div> tag opened in the topmenu.php by adding the closing </div> tag in the footer.php

 

Perfect.  I came here to ask this very question

Thanks Rick

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

×