Wrapping Wordpress Header & Footer

[ap125]

Hi,

I am having trouble wrapping the header and footer of my Wordpress site to the installed phpBB forum. I have a fresh install of phpBB and Wordpress, with an added theme, and have followed this tutorial completely: https://css-tricks.com/video-screencast ... ing-phpbb/.

However, whatever changes I make to the backend header and footer files for phpBB, I do not see any corresponding results on the front end page.

My website is http://www.kenkiarash.com and the forum is at http://www.kenkiarash.com/forum/.

I have done the changes on the tutorial two different times, both with fresh installs of both Wordpress and phpBB, but have not seen any changes. I am not sure what to do to wrap the site at this point.

Thank you for any help in advance.

[Toxyy]

Edit: look at my last line before the rest of the post...

I can't remember proper syntax, but I believe you can use
(edited, this is now correct)

Code: Select all

<!-- INCLUDE file.html -->

Or something similar in your overall header file and it will include your WordPress header. You can put your WordPress header in its own html file and include it in your overall header that way, and link it to that line. It won't be completely linked, as in you'll have to update that file whenever you change your header l, but it's a way of doing so. It can use your WordPress css if you do it right also.


---

To see the changes that you made, purge the cache of your forum in the ACP. If that doesn't work, purge your browser cache.

[ap125]

Hi Toxyy,

Thank you so much for quick reply, I greatly appreciate it.

Sorry for my naive knowledge about all this, but does that mean I can just put the following code, which contains the header for my Wordpress theme, anywhere into the overall_header.html file of my phpBB theme?

Code: Select all

<-- INCLUDE header.php -->

I understand it will not be dynamic and I have to update it, thanks for telling me about purging the cache .

[Toxyy]

I haven't tried it with php files and my intuition says that it won't work like that and you need to use html files only. But I haven't tried. I've added custom advertisement blocks/whatever kind of blocks this way, so yes it does work, but I only tried with html files. You'll see inside of your overall header that it includes some html files itself, and I believe syntax is correct but if not you'll see how it's done there. See if it works, report back!

[ap125]

Tried it! So I added <-- INCLUDE header.php --> to the overall_header.html file of phpBB, then changed the "Recompile stale style components" setting to Yes. Fortunately, the page showed to be responsive to the changes in the overall_header.html file, unlike before. Unfortunately, the trick did not work, simply adding the "<-- INCLUDE header.php -->" text to the top of the page, which can be seen if you visit the site now.

Thanks again for the continued help!

[Toxyy]

Just went into my overall header, yeah I did get the syntax wrong, I'll update my other posts to reflect that. Proper syntax is:

Code: Select all

<!-- INCLUDE filename.extension -->

I forgot the exclamation point. Try it with that! Remember to purge your cache again after every html edit.

[ap125]

Thank you for the clarification! But, unfortunately, when I add the "!" to the code, making it "<!-- INCLUDE header.php -->" then the entire page becomes white, as it is now.

Purging cache as well!

[Toxyy]

Try an html file rather than php.

[ap125]

Would that consist of simply copying the code from that header.php file to a header.html file and using that for the forum header instead?

[Ger]

You can only include HTML files. So if you actually use PHP in that header file, it won't work; you'll see the PHP code in your browser rather than the expected PHP output.

Your header doesn't seem too complicated. Why don't you just rebuild the components in your style?

[ap125]

Oh I see, hence why the PHP is not working...

Unfortunately, Im not well acquainted with coding and such. Not to overburden the thread, but below is what is within the header.php file of my Wordpress theme. When I simply paste this into the overall_header.html file, it doesn't look appropriate, which I assume is because it doesn't include the css? (this is what is now on the forum http://www.kenkiarash.com/forum/)

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' ); ?>
	<header id="masthead" class="site-header clearfix">
		<div id="header-text-nav-container" class="clearfix">
         <?php if ( get_theme_mod( 'colormag_breaking_news', 0 ) == 1 || get_theme_mod( 'colormag_date_display', 0 ) == 1 || get_theme_mod( 'colormag_social_link_activate', 0 ) == 1 ) : ?>
            <div class="news-bar">
               <div class="inner-wrap clearfix">
                  <?php if (get_theme_mod('colormag_date_display', 0) == 1)
                     colormag_date_display();
                  ?>

                  <?php if (get_theme_mod('colormag_breaking_news', 0) == 1)
                     colormag_breaking_news();
                  ?>

                  <?php if( get_theme_mod( 'colormag_social_link_activate', 0 ) == 1 ) { colormag_social_links(); } ?>
               </div>
            </div>
         <?php endif; ?>

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

			<div class="inner-wrap">

				<div id="header-text-nav-wrap" class="clearfix">
					<div id="header-left-section">
						<?php
						if((get_theme_mod('colormag_header_logo_placement', 'header_text_only') == 'show_both' || get_theme_mod('colormag_header_logo_placement', 'header_text_only') == 'header_logo_only')) {
						?>
							<div id="header-logo-image">
								<?php if (get_theme_mod('colormag_logo', '') != '') { ?>
									<a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"><img src="<?php echo esc_url(get_theme_mod('colormag_logo')); ?>" alt="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>"></a>
								<?php } ?>

								<?php if (function_exists('the_custom_logo') && has_custom_logo( $blog_id = 0 )) {
									colormag_the_custom_logo();
								} ?>
							</div><!-- #header-logo-image -->
						<?php
						}
                  $screen_reader = '';
                  if ( get_theme_mod( 'colormag_header_logo_placement', 'header_text_only' ) == 'header_logo_only' || (get_theme_mod( 'colormag_header_logo_placement', 'header_text_only' ) == 'disable' )) {
                     $screen_reader = 'screen-reader-text';
                  }
						?>
						<div id="header-text" class="<?php echo $screen_reader; ?>">
                     <?php if ( is_front_page() || is_home() ) : ?>
   							<h1 id="site-title">
   								<a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a>
   							</h1>
                     <?php else : ?>
                        <h3 id="site-title">
                           <a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a>
                        </h3>
                     <?php endif; ?>
							<?php
                     $description = get_bloginfo( 'description', 'display' );
                     if ( $description || is_customize_preview() ) : ?>
                        <p id="site-description"><?php echo $description; ?></p>
                     <?php endif;?><!-- #site-description -->
						</div><!-- #header-text -->
					</div><!-- #header-left-section -->
					<div id="header-right-section">
						<?php
						if( is_active_sidebar( 'colormag_header_sidebar' ) ) {
						?>
						<div id="header-right-sidebar" class="clearfix">
						<?php
							// Calling the header sidebar if it exists.
							if ( !dynamic_sidebar( 'colormag_header_sidebar' ) ):
							endif;
						?>
						</div>
						<?php
						}
						?>
			    	</div><!-- #header-right-section -->

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

			</div><!-- .inner-wrap -->

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

			<nav id="site-navigation" class="main-navigation clearfix" role="navigation">
				<div class="inner-wrap clearfix">
					<?php
               if ( get_theme_mod( 'colormag_home_icon_display', 0 ) == 1 ) {
                  if ( is_front_page() ) {
                     $home_icon_class = 'home-icon front_page_on';
                  } else {
                     $home_icon_class = 'home-icon';
                  }
                  ?>
                  <div class="<?php echo $home_icon_class; ?>">
                     <a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>"><i class="fa fa-home"></i></a>
                  </div>
                  <?php
               }
               ?>
               <h4 class="menu-toggle"></h4>
               <?php
               if ( has_nav_menu( 'primary' ) ) {
                  wp_nav_menu( array( 'theme_location' => 'primary', 'container_class' => 'menu-primary-container', 'items_wrap'      => '<ul id="%1$s" class="%2$s">%3$s</ul>' ) );
               }
					else {
						wp_page_menu();
					}
					?>
               <?php if ( get_theme_mod( 'colormag_random_post_in_menu', 0 ) == 1 ) { ?>
                  <?php colormag_random_post(); ?>
               <?php } ?>
               <?php if ( get_theme_mod( 'colormag_search_icon_in_menu', 0 ) == 1 ) { ?>
                  <i class="fa fa-search search-top"></i>
                  <div class="search-form-top">
                     <?php get_search_form(); ?>
                  </div>
               <?php } ?>
				</div>
			</nav>

		</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">

[Toxyy]

That uses a lot of php variables that Phpbb doesn't recognize, and the div classes/classes on the html tags don't relate to any css file so you'll need to add the css file to your page. You're going to have to manually put in your links in, or here's what I recommend, inspect your page source on WordPress by right clicking, and you can copy the whole header html block there without any php variables. If anything is missing you can look back into the php file and convert whatever you need, such as html if statements or something.

[ap125]

Again, thank you all so much for putting up with my lack of knowledge in the area, but I did just that, inserting the code below into the overall_header.html, that I got from inspecting the page source, and got a distorted forum, as you can see by visiting the site now.

Code: Select all

<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="profile" href="http://gmpg.org/xfn/11" />
<link rel="pingback" href="http://www.kenkiarash.com/xmlrpc.php" />
<title>ColorMag &#8211; Business Social Medial</title>
<link rel='dns-prefetch' href='//fonts.googleapis.com' />
<link rel='dns-prefetch' href='//s.w.org' />
<link rel="alternate" type="application/rss+xml" title="ColorMag &raquo; Feed" href="http://www.kenkiarash.com/feed/" />
<link rel="alternate" type="application/rss+xml" title="ColorMag &raquo; Comments Feed" href="http://www.kenkiarash.com/comments/feed/" />
		<script type="text/javascript">
			window._wpemojiSettings = {"baseUrl":"https:\/\/s.w.org\/images\/core\/emoji\/2.3\/72x72\/","ext":".png","svgUrl":"https:\/\/s.w.org\/images\/core\/emoji\/2.3\/svg\/","svgExt":".svg","source":{"concatemoji":"http:\/\/www.kenkiarash.com\/wp-includes\/js\/wp-emoji-release.min.js?ver=4.8"}};
			!function(a,b,c){function d(a){var b,c,d,e,f=String.fromCharCode;if(!k||!k.fillText)return!1;switch(k.clearRect(0,0,j.width,j.height),k.textBaseline="top",k.font="600 32px Arial",a){case"flag":return k.fillText(f(55356,56826,55356,56819),0,0),b=j.toDataURL(),k.clearRect(0,0,j.width,j.height),k.fillText(f(55356,56826,8203,55356,56819),0,0),c=j.toDataURL(),b===c&&(k.clearRect(0,0,j.width,j.height),k.fillText(f(55356,57332,56128,56423,56128,56418,56128,56421,56128,56430,56128,56423,56128,56447),0,0),b=j.toDataURL(),k.clearRect(0,0,j.width,j.height),k.fillText(f(55356,57332,8203,56128,56423,8203,56128,56418,8203,56128,56421,8203,56128,56430,8203,56128,56423,8203,56128,56447),0,0),c=j.toDataURL(),b!==c);case"emoji4":return k.fillText(f(55358,56794,8205,9794,65039),0,0),d=j.toDataURL(),k.clearRect(0,0,j.width,j.height),k.fillText(f(55358,56794,8203,9794,65039),0,0),e=j.toDataURL(),d!==e}return!1}function e(a){var c=b.createElement("script");c.src=a,c.defer=c.type="text/javascript",b.getElementsByTagName("head")[0].appendChild(c)}var f,g,h,i,j=b.createElement("canvas"),k=j.getContext&&j.getContext("2d");for(i=Array("flag","emoji4"),c.supports={everything:!0,everythingExceptFlag:!0},h=0;h<i.length;h++)c.supports[i[h]]=d(i[h]),c.supports.everything=c.supports.everything&&c.supports[i[h]],"flag"!==i[h]&&(c.supports.everythingExceptFlag=c.supports.everythingExceptFlag&&c.supports[i[h]]);c.supports.everythingExceptFlag=c.supports.everythingExceptFlag&&!c.supports.flag,c.DOMReady=!1,c.readyCallback=function(){c.DOMReady=!0},c.supports.everything||(g=function(){c.readyCallback()},b.addEventListener?(b.addEventListener("DOMContentLoaded",g,!1),a.addEventListener("load",g,!1)):(a.attachEvent("onload",g),b.attachEvent("onreadystatechange",function(){"complete"===b.readyState&&c.readyCallback()})),f=c.source||{},f.concatemoji?e(f.concatemoji):f.wpemoji&&f.twemoji&&(e(f.twemoji),e(f.wpemoji)))}(window,document,window._wpemojiSettings);
		</script>
		<style type="text/css">
img.wp-smiley,
img.emoji {
	display: inline !important;
	border: none !important;
	box-shadow: none !important;
	height: 1em !important;
	width: 1em !important;
	margin: 0 .07em !important;
	vertical-align: -0.1em !important;
	background: none !important;
	padding: 0 !important;
}
</style>
<link rel='stylesheet' id='colormag_google_fonts-css'  href='//fonts.googleapis.com/css?family=Open+Sans%3A400%2C600&#038;ver=4.8' type='text/css' media='all' />
<link rel='stylesheet' id='colormag_style-css'  href='http://www.kenkiarash.com/wp-content/themes/colormag/style.css?ver=4.8' type='text/css' media='all' />
<link rel='stylesheet' id='colormag-fontawesome-css'  href='http://www.kenkiarash.com/wp-content/themes/colormag/fontawesome/css/font-awesome.css?ver=4.2.1' type='text/css' media='all' />
<link rel='stylesheet' id='colormag-featured-image-popup-css-css'  href='http://www.kenkiarash.com/wp-content/themes/colormag/js/magnific-popup/magnific-popup.css?ver=20150310' type='text/css' media='all' />
<script type='text/javascript' src='http://www.kenkiarash.com/wp-includes/js/jquery/jquery.js?ver=1.12.4'></script>
<script type='text/javascript' src='http://www.kenkiarash.com/wp-includes/js/jquery/jquery-migrate.min.js?ver=1.4.1'></script>
<script type='text/javascript' src='http://www.kenkiarash.com/wp-content/themes/colormag/js/colormag-custom.js?ver=4.8'></script>
<!--[if lte IE 8]>
<script type='text/javascript' src='http://www.kenkiarash.com/wp-content/themes/colormag/js/html5shiv.min.js?ver=4.8'></script>
<![endif]-->
<link rel='https://api.w.org/' href='http://www.kenkiarash.com/wp-json/' />
<link rel="EditURI" type="application/rsd+xml" title="RSD" href="http://www.kenkiarash.com/xmlrpc.php?rsd" />
<link rel="wlwmanifest" type="application/wlwmanifest+xml" href="http://www.kenkiarash.com/wp-includes/wlwmanifest.xml" /> 
<meta name="generator" content="WordPress 4.8" />
</head>

[Toxyy]

Looks like you got the wrong code. When you inspect, it will highlight which block of code you are inspecting on the main site. Go as far up in the divs as you can and copy that code. Taking a look at your php file you posted, there is a lot in there that isn't in what you have now. I'll take a look when I get on my computer in a minute.

Also, try removing the <head> tags.

[ap125]

Perfect! So I successfully got it to be responsive in a promising way... Seems like the content is there, just now not in the right format.

Thanks again.