Wrapping Wordpress Header & Footer

Need some custom code changes to the phpBB core simple enough that you feel doesn't require an extension? Then post your request here so that community members can provide some assistance.

NOTE: NO OFFICIAL SUPPORT IS PROVIDED IN THIS SUB-FORUM
Forum rules
READ: phpBB.com Board-Wide Rules and Regulations

NOTE: NO OFFICIAL SUPPORT IS PROVIDED IN THIS SUB-FORUM
User avatar
Ger
Recognised Extension Developer
Posts: 1471
Joined: Wed Jan 02, 2008 7:35 pm
Location: 192.168.1.100
Contact:

Re: Wrapping Wordpress Header & Footer

Post by Ger » Fri Aug 04, 2017 8:48 am

view-source:http://www.kenkiarash.com/forum/styles/ ... ooter.html

Code: Select all

<!DOCTYPE html>
<html dir="{S_CONTENT_DIRECTION}" lang="{S_USER_LANG}">

<link href="{T_STYLESHEET_LINK}" rel="stylesheet">
Still there.
My extensions: Simple CMS, Feed post bot, Avatar Resize, Modbreak, Magic OGP, Live topic update and Modern Quote
Newest: Quoted Where + anonymize

Like my work? Buy me a coffee to keep it coming. :ugeek:
-Available for custom work-

ap125
Registered User
Posts: 24
Joined: Sun Jun 25, 2017 9:15 pm

Re: Wrapping Wordpress Header & Footer

Post by ap125 » Fri Aug 04, 2017 11:40 pm

When I open up the overall_footer.html file, I do not see it there anymore after I deleted it, as you can see in the attached image.
Attachments
Screen Shot 2017-08-04 at 7.38.26 PM.png

User avatar
Ger
Recognised Extension Developer
Posts: 1471
Joined: Wed Jan 02, 2008 7:35 pm
Location: 192.168.1.100
Contact:

Re: Wrapping Wordpress Header & Footer

Post by Ger » Tue Aug 08, 2017 7:40 am

I see the problem: you have just pasted some HTML in a blank overall_footer.html file. Since that file replaces the parent's file completely, you actually miss a lot of stuff.

Make this your overall_footer.html file:

Code: Select all

		<!-- EVENT overall_footer_content_after -->
	</div>

<!-- EVENT overall_footer_page_body_after -->

<div id="page-footer" class="page-footer" role="contentinfo">
	<!-- INCLUDE navbar_footer.html -->

	<div class="copyright">
		<!-- EVENT overall_footer_copyright_prepend -->
		{CREDIT_LINE}
		<!-- IF TRANSLATION_INFO --><br />{TRANSLATION_INFO}<!-- ENDIF -->
		<!-- EVENT overall_footer_copyright_append -->
		<!-- IF DEBUG_OUTPUT --><br />{DEBUG_OUTPUT}<!-- ENDIF -->
		<!-- IF U_ACP --><br /><strong><a href="{U_ACP}">{L_ACP}</a></strong><!-- ENDIF -->
	</div>

	<div id="darkenwrapper" class="darkenwrapper" data-ajax-error-title="{L_AJAX_ERROR_TITLE}" data-ajax-error-text="{L_AJAX_ERROR_TEXT}" data-ajax-error-text-abort="{L_AJAX_ERROR_TEXT_ABORT}" data-ajax-error-text-timeout="{L_AJAX_ERROR_TEXT_TIMEOUT}" data-ajax-error-text-parsererror="{L_AJAX_ERROR_TEXT_PARSERERROR}">
		<div id="darken" class="darken">&nbsp;</div>
	</div>

	<div id="phpbb_alert" class="phpbb_alert" data-l-err="{L_ERROR}" data-l-timeout-processing-req="{L_TIMEOUT_PROCESSING_REQ}">
		<a href="#" class="alert_close">
			<i class="icon fa-times-circle fa-fw" aria-hidden="true"></i>
		</a>
		<h3 class="alert_title">&nbsp;</h3><p class="alert_text"></p>
	</div>
	<div id="phpbb_confirm" class="phpbb_alert">
		<a href="#" class="alert_close">
			<i class="icon fa-times-circle fa-fw" aria-hidden="true"></i>
		</a>
		<div class="alert_text"></div>
	</div>
<footer id="colophon" class="clearfix">	
    <div class="footer-widgets-wrapper">
	<div class="inner-wrap">
	    <div class="footer-widgets-area clearfix">
		<div class="tg-footer-main-widget">
		    <div class="tg-first-footer-widget">
			<aside id="text-1" class="widget widget_text clearfix">
			    <h3 class="widget-title"><span>About Us</span></h3>			
			    <div class="textwidget"><a title="COLORMAG" href="http://demo.themegrill.com/colormag/"><img alt="COLORMAG" src="http://demo.themegrill.com/colormag/wp-content/uploads/sites/20/2015/03/logo.png"></a><br/>We love WordPress and we are here to provide you with professional looking WordPress themes so that you can take your website one step ahead. We focus on simplicity, elegant design and clean code.</div>
			</aside>   			
		    </div>
		</div>
		<div class="tg-footer-other-widgets">
		    <div class="tg-second-footer-widget">
			<aside id="text-2" class="widget widget_text clearfix">
			    <h3 class="widget-title"><span>Useful Links</span></h3>
			    <div class="textwidget"><ul>
				    <li> <a href="http://themegrill.com/">ThemeGrill</a></li>
				    <li> <a href="http://themegrill.com/support-forum/">Support</a></li>
				    <li> <a href="http://themegrill.com/theme-instruction/colormag/">Documentation</a></li>
				    <li> <a href="http://themegrill.com/frequently-asked-questions/">FAQ</a></li>
				    <li> <a href="http://themegrill.com/themes/">Themes</a></li>
				    <li> <a href="http://themegrill.com/plugins/">Plugins</a></li>
				    <li> <a href="http://themegrill.com/blog/">Blog</a></li>
				    <li> <a href="http://themegrill.com/plans-pricing/">Plans & Pricing</a></li>
				</ul></div>
			</aside>   			
		    </div>
		    <div class="tg-third-footer-widget">
			<aside id="text-3" class="widget widget_text clearfix"><h3 class="widget-title"><span>Other Themes</span></h3>			<div class="textwidget"><ul>
				    <li> <a href="http://themegrill.com/themes/envince/">Envince</a></li>
				    <li> <a href="http://themegrill.com/themes/estore/">eStore</a></li>
				    <li> <a href="http://themegrill.com/themes/ample/">Ample</a></li>
				    <li> <a href="http://themegrill.com/themes/spacious/">Spacious</a></li>
				    <li> <a href="http://themegrill.com/themes/accelerate/">Accelerate</a></li>
				    <li> <a href="http://themegrill.com/themes/radiate/">Radiate</a></li>
				    <li> <a href="http://themegrill.com/themes/esteem/">Esteem</a></li>
				    <li> <a href="http://themegrill.com/themes/himalayas/">Himalayas</a></li>
				    <li> <a href="http://themegrill.com/themes/colornews/">ColorNews</a></li>
				</ul></div>
			</aside>            </div>
		    <div class="tg-fourth-footer-widget">
			<aside id="colormag_300x250_advertisement_widget-3" class="widget widget_300x250_advertisement clearfix">
			    <div class="advertisement_300x250">
				<div class="advertisement-title">
				    <h3 class="widget-title"><span>ColorMag Pro</span></h3>            </div>
				<div class="advertisement-content"><a href="http://demo.themegrill.com/colormag-pro/" class="single_ad_300x250" target="_blank" rel="nofollow">
					<img src="http://demo.themegrill.com/colormag/wp-content/uploads/sites/20/2015/07/ad-color-mag-medium.jpg" width="300" height="250">
				    </a></div>      </div>
			</aside><aside id="text-4" class="widget widget_text clearfix">			<div class="textwidget">Contains all features of free version and many new additional features.</div>
			</aside>            </div>
		</div>
	    </div>
	</div>
    </div>			<div class="footer-socket-wrapper clearfix">
	<div class="inner-wrap">
	    <div class="footer-socket-area">
		<div class="footer-socket-right-section">
		</div>
		<div class="footer-socket-left-sectoin">
		    <div class="copyright">Copyright &copy; 2017 <a href="http://www.kenkiarash.com/" title="ColorMag" ><span>ColorMag</span></a>. All rights reserved.<br>Theme: ColorMag by <a href="https://themegrill.com/themes/colormag" target="_blank" title="ThemeGrill" rel="designer"><span>ThemeGrill</span></a>. Powered by <a href="https://wordpress.org" target="_blank" title="WordPress"><span>WordPress</span></a>.</div>                  </div>
	    </div>
	</div>
    </div>
</footer>	
</div>

</div>

<div>
	<a id="bottom" class="anchor" accesskey="z"></a>
	<!-- IF not S_IS_BOT -->{RUN_CRON_TASK}<!-- ENDIF -->
</div>

<script type="text/javascript" src="{T_JQUERY_LINK}"></script>
<!-- IF S_ALLOW_CDN --><script type="text/javascript">window.jQuery || document.write('\x3Cscript src="{T_ASSETS_PATH}/javascript/jquery.min.js?assets_version={T_ASSETS_VERSION}">\x3C/script>');</script><!-- ENDIF -->
<script type="text/javascript" src="{T_ASSETS_PATH}/javascript/core.js?assets_version={T_ASSETS_VERSION}"></script>
<!-- INCLUDEJS forum_fn.js -->
<!-- INCLUDEJS ajax.js -->
<!-- IF S_ALLOW_CDN -->
	<script type="text/javascript">
		(function($){
			var $fa_cdn = $('head').find('link[rel="stylesheet"]').first(),
				$span = $('<span class="fa" style="display:none"></span>').appendTo('body');
			if ($span.css('fontFamily') !== 'FontAwesome' ) {
				$fa_cdn.after('<link href="{T_ASSETS_PATH}/css/font-awesome.min.css" rel="stylesheet">');
				$fa_cdn.remove();
			}
			$span.remove();
		})(jQuery);
	</script>
<!-- ENDIF -->

<!-- IF S_COOKIE_NOTICE -->
	<script src="{T_ASSETS_PATH}/cookieconsent/cookieconsent.min.js?assets_version={T_ASSETS_VERSION}"></script>
	<script>
		window.addEventListener("load", function(){
			window.cookieconsent.initialise({
				"palette": {
					"popup": {
						"background": "#0F538A"
					},
					"button": {
						"background": "#E5E5E5"
					}
				},
				"theme": "classic",
				"content": {
					"message": "{LA_COOKIE_CONSENT_MSG}",
					"dismiss": "{LA_COOKIE_CONSENT_OK}",
					"link": "{LA_COOKIE_CONSENT_INFO}",
					"href": "{LA_COOKIE_CONSENT_HREF}"
				}
			})});
	</script>
<!-- ENDIF -->

<!-- EVENT overall_footer_after -->

<!-- IF S_PLUPLOAD --><!-- INCLUDE plupload.html --><!-- ENDIF -->
{$SCRIPTS}

<!-- EVENT overall_footer_body_after -->

</body>
</html>
It might not be exactly what you have in mind, but it contains all the required elements. You can shift/hide to your liking, just make sure you don't delete anything important.
My extensions: Simple CMS, Feed post bot, Avatar Resize, Modbreak, Magic OGP, Live topic update and Modern Quote
Newest: Quoted Where + anonymize

Like my work? Buy me a coffee to keep it coming. :ugeek:
-Available for custom work-

ap125
Registered User
Posts: 24
Joined: Sun Jun 25, 2017 9:15 pm

Re: Wrapping Wordpress Header & Footer

Post by ap125 » Wed Aug 09, 2017 12:56 am

So I actually replaced everything in my overall_footer.html file with what you sent, and it still seems like it is not what we thought it would be.

It still looks as though it has the previous overall_footer.html.

Thank you again!

fo2
Registered User
Posts: 10
Joined: Thu Jan 25, 2018 4:29 am

Re: Wrapping Wordpress Header & Footer

Post by fo2 » Thu Jan 25, 2018 4:44 am

Hi,

I am doing exactly what ap125 did 6 months ago: wrapping WP header around phpBB forum. I even use the same WP theme colormag. Could you summarize the steps that I need to make to get this working. Ger mentioned creating a child in the the default prosilver style and posted a zip file. But that file is no longer in that repository. I would like to get that file because I am also using colormag theme. All I have done so far is to install phpBB under my domain.com/forum. Now I want to add my WP menu above the phpBB forum page in the way that if I modify the WP menu, it is seen by all my pages, including the forum.

Thanks!

User avatar
Lumpy Burgertushie
Registered User
Posts: 64452
Joined: Mon May 02, 2005 3:11 am
Contact:

Re: Wrapping Wordpress Header & Footer

Post by Lumpy Burgertushie » Thu Jan 25, 2018 5:05 pm

fo2 wrote:
Thu Jan 25, 2018 4:44 am
Hi,

I am doing exactly what ap125 did 6 months ago: wrapping WP header around phpBB forum. I even use the same WP theme colormag. Could you summarize the steps that I need to make to get this working. Ger mentioned creating a child in the the default prosilver style and posted a zip file. But that file is no longer in that repository. I would like to get that file because I am also using colormag theme. All I have done so far is to install phpBB under my domain.com/forum. Now I want to add my WP menu above the phpBB forum page in the way that if I modify the WP menu, it is seen by all my pages, including the forum.

Thanks!
well that is a whole different thing and you can't do it with just modifying the phpbb style or with a wp theme etc.

the problem is the updating the changes to phpbb when you update your wp menu etc.
it will take some kind of custom scripting that you will have to hire out if you don't know how to program in php etc.


robert
I am available for custom work on a donation basis. Please send me a PM with your needs.

Premium phpBB 3.2 Styles by PlanetStyles.net

fo2
Registered User
Posts: 10
Joined: Thu Jan 25, 2018 4:29 am

Re: Wrapping Wordpress Header & Footer

Post by fo2 » Thu Jan 25, 2018 5:33 pm

Thank you, Robert. I saw several of your posts on this topic. Besides hiring a coder or just living with the static header over my forum, what are my other options? Is there a plugin that can do what I am asking? I searched the web and found the following plugins W3ALL, WP2BB, WP-united, BridgeDD. I watched youtube videos about some of these plugins, but it seems that they were mostly concerned about how to create forum logins on WP pages, which I don't care about. Which of these plugins can add my WP menu over the phpBB forum?

Would you be willing to help with coding? If so, please pm me. I can not pm you because I haven't reached 5 posts here yet.

User avatar
Lumpy Burgertushie
Registered User
Posts: 64452
Joined: Mon May 02, 2005 3:11 am
Contact:

Re: Wrapping Wordpress Header & Footer

Post by Lumpy Burgertushie » Thu Jan 25, 2018 7:36 pm

sorry, but I am not a programmer and would not have a clue how to create a script.

here is one thought. if your wp menu is actually a separate php file then you can do a simple php include in your phpbb overall_header.html file.
that way, when the menu php file gets updated, it will update that file and then it would automatically be updated on phpbb when it is updated in wp.

not sure how the wp menu you are using is updated but this might work.


robert
I am available for custom work on a donation basis. Please send me a PM with your needs.

Premium phpBB 3.2 Styles by PlanetStyles.net

fo2
Registered User
Posts: 10
Joined: Thu Jan 25, 2018 4:29 am

Re: Wrapping Wordpress Header & Footer

Post by fo2 » Fri Jan 26, 2018 4:16 am

fo2 wrote:
Thu Jan 25, 2018 4:44 am
Hi,

I am doing exactly what ap125 did 6 months ago: wrapping WP header around phpBB forum. I even use the same WP theme colormag. Could you summarize the steps that I need to make to get this working. Ger mentioned creating a child in the the default prosilver style and posted a zip file. But that file is no longer in that repository. I would like to get that file because I am also using colormag theme. All I have done so far is to install phpBB under my domain.com/forum. Now I want to add my WP menu above the phpBB forum page in the way that if I modify the WP menu, it is seen by all my pages, including the forum.

Thanks!
Bump

fo2
Registered User
Posts: 10
Joined: Thu Jan 25, 2018 4:29 am

Re: Wrapping Wordpress Header & Footer

Post by fo2 » Fri Jan 26, 2018 4:18 am

Ger, could you repost that zip file that you created for ap125

User avatar
Ger
Recognised Extension Developer
Posts: 1471
Joined: Wed Jan 02, 2008 7:35 pm
Location: 192.168.1.100
Contact:

Re: Wrapping Wordpress Header & Footer

Post by Ger » Fri Jan 26, 2018 8:36 am

Not the most patient laddy, ey? No need to PM me...

You can download the ZIP here: https://files.fm/u/ja5pafdf
Keep in mind it's for 3.2.1 so you might need to perform a small update.
My extensions: Simple CMS, Feed post bot, Avatar Resize, Modbreak, Magic OGP, Live topic update and Modern Quote
Newest: Quoted Where + anonymize

Like my work? Buy me a coffee to keep it coming. :ugeek:
-Available for custom work-

fo2
Registered User
Posts: 10
Joined: Thu Jan 25, 2018 4:29 am

Re: Wrapping Wordpress Header & Footer

Post by fo2 » Fri Jan 26, 2018 2:45 pm

Ger wrote:
Fri Jan 26, 2018 8:36 am
Not the most patient laddy, ey? No need to PM me...

You can download the ZIP here: https://files.fm/u/ja5pafdf
Keep in mind it's for 3.2.1 so you might need to perform a small update.
Thank you, Ger. Could you summarize the steps from the beginning (I already have phpBB under mydomain.com/forum). I tried to follow the steps in the css tricks video for skinning WP around phpBB, but the video was about an old version of phpBB, mine is 3.2.2. I couldn't find header.php in my wp theme (colormag) mentioned in that video.

User avatar
Ger
Recognised Extension Developer
Posts: 1471
Joined: Wed Jan 02, 2008 7:35 pm
Location: 192.168.1.100
Contact:

Re: Wrapping Wordpress Header & Footer

Post by Ger » Fri Jan 26, 2018 3:19 pm

Extract the .zip file in ./styles. Goto your ACP, install the style and set it as default style.
My extensions: Simple CMS, Feed post bot, Avatar Resize, Modbreak, Magic OGP, Live topic update and Modern Quote
Newest: Quoted Where + anonymize

Like my work? Buy me a coffee to keep it coming. :ugeek:
-Available for custom work-

fo2
Registered User
Posts: 10
Joined: Thu Jan 25, 2018 4:29 am

Re: Wrapping Wordpress Header & Footer

Post by fo2 » Sat Jan 27, 2018 7:16 am

Ger wrote:
Fri Jan 26, 2018 3:19 pm
Extract the .zip file in ./styles. Goto your ACP, install the style and set it as default style.
Ger, many thanks. I did what you told:
1. I extracted colormag and copied it under /public_html/forum/styles where prosilver resides
2. Then I went to ACP / Customize / Install Styles and installed colormag style.
3. I went to check my forum page and it still showed the phpBB header.
4. I went to ACP / Styles and tried to deactivate prosilver, but it said "You cannot deactivate the default style". Then I selected colormag and clicked activate. Checked the forum page and it still looked like the old one. If I click on preview, it shows me my forum page with colormag header. While doing that, I also noticed that the header is the original ColorMag header with their menus. Then I found overall_header.html under /public_html/forum/styles/colormag/template. I saw the section after <div class="inner-wrap clearfix"> where the header is defined. I think I have a clear idea what part of overall_header.html I need to modify. But, I still have two questions:

1. If I look at header.php of my WP theme (found under Appearance/Edit, right side panel), it doesn't contain any info about my menu and title. Where can I find my header definition, which I would then copy/replace into the forum's overall_header.html?

2. What am I doing wrong while installing the colormag style in ACP?


My website is http://www.autismweb2.com/.

Thank you again!

fo2
Registered User
Posts: 10
Joined: Thu Jan 25, 2018 4:29 am

Re: Wrapping Wordpress Header & Footer

Post by fo2 » Sun Jan 28, 2018 5:46 am

This is what header.php under /public_html/wp-content/themes/colormag looks like:

Code: Select all

<?php
/**
 * Theme Header Section for our theme.
 *
 * Displays all of the <head> section and everything up till <div id="main" class="clearfix"> <div class="inner-wrap">
 *
 * @package    ThemeGrill
 * @subpackage ColorMag
 * @since      ColorMag 1.0
 */
?><!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
	<meta charset="<?php bloginfo( 'charset' ); ?>"/>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="profile" href="http://gmpg.org/xfn/11"/>
	<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>"/>
	<?php
	/**
	 * This hook is important for wordpress plugins and other many things
	 */
	wp_head();
	?>
</head>

<body <?php body_class(); ?>>

<?php do_action( 'colormag_before' ); ?>

<div id="page" class="hfeed site">
	<?php do_action( 'colormag_before_header' ); ?>

	<?php
	// Add the main total header area display type dynamic class
	$main_total_header_option_layout_class = get_theme_mod( 'colormag_main_total_header_area_display_type', 'type_one' );

	$class_name = '';
	if ( $main_total_header_option_layout_class == 'type_two' ) {
		$class_name = 'colormag-header-clean';
	} else if ( $main_total_header_option_layout_class == 'type_three' ) {
		$class_name = 'colormag-header-classic';
	}
	?>

	<header id="masthead" class="site-header clearfix <?php echo esc_attr( $class_name ); ?>">
		<div id="header-text-nav-container" class="clearfix">

			<?php colormag_top_header_bar_display(); // Display the top header bar ?>

			<?php
			if ( get_theme_mod( 'colormag_header_image_position', 'position_two' ) == 'position_one' ) {
				colormag_render_header_image();
			}
			?>

			<?php colormag_middle_header_bar_display(); // Display the middle header bar ?>

			<?php
			if ( get_theme_mod( 'colormag_header_image_position', 'position_two' ) == 'position_two' ) {
				colormag_render_header_image();
			}
			?>

			<?php colormag_below_header_bar_display(); // Display the below header bar  ?>

		</div><!-- #header-text-nav-container -->

		<?php
		if ( get_theme_mod( 'colormag_header_image_position', 'position_two' ) == 'position_three' ) {
			colormag_render_header_image();
		}
		?>

	</header>

	<?php do_action( 'colormag_after_header' ); ?>
	<?php do_action( 'colormag_before_main' ); ?>

	<div id="main" class="clearfix">
		<div class="inner-wrap clearfix">
Does it look right? I don't see my menu items or links to my main page.

Post Reply

Return to “phpBB Custom Coding”

Who is online

Users browsing this forum: No registered users and 4 guests

cron