phpBB WordPress template integration (iframe v5)

Jan 20, 2020

—

axew3

V5 version (for the cool people)

JS code – updated on 24 Jul 2024

shortcode files – updated on 30 Jun 2024
addons/page-forum.php – updated on 30 Jun 2024

Help steps – updated on 06 Jul 2024

NOTE: since plugin version 2.8.7>

WordPress phpBB iframe template integration

To do an awesome Template integration by Shortcode, that’s compatible with any WP theme, it is not required to build the page-forum into the plugin admin page, but just to add the same code, as explained more below on this page, into the overall_header.html and overall_footer.html phpBB template files, recompile the phpBB template, and then read here:

The (awesome) iframe template integration using shortcode

WP_w3all template integration steps

If using the page-forum.php

NOTE: if your WP theme is built using Guntenberg and the new way that WordPress use to manage themes, then YOU HAVE NOT TO USE the template integration using page-forum(orWhateverNamed).php and you have to REMOVE it from the template folder, whenever you have built or copied/pasted adding it into the theme folder. Into themes like the WP Twenty Twenty-Four, it is NOT possible to use the template integration using page-forum, but only the shortcode template integration. So you have to follow here below, only sections about the overall_header.html and overall_footer.html js code that require to be added.

Build/create the WP forum template page via option
WP_w3all phpBB embedded on WordPress Template
on WP_w3all admin config page, and the blank page on WordPress Admin -> Pages -> Add New, titled the same, so forum or board etc (then you’ll have into your active WordPress template folder a file named page-forum.php or page-board.php etc), then to complete the procedure and get the responsive iframe height for the embedded/iframed phpBB into WordPress template page you need:

overall_footer.html code

Open with a text editor your phpBB template file overall_footer.html

and just before the closing </body> tag, add this code:

<!-- IF not S_IS_BOT -->
<script type="text/javascript">
// START MANDATORY CHANGES
var w3allAllowDomain = 'https://w3host.com'; // MANDATORY! Set/Change this value to fit the absolute domain (DO NOT ADD/INCLUDE final slash here)
var wordpress_url_page_forum = 'https://w3host.com/forum'; // MANDATORY! (DO NOT ADD/INCLUDE final slash here) Url that point to the wordpress forum page
var w3all_custom_wp_w3fancyurl = 'w3'; // MANDATORY! If changed the default w3 to have 'fancy URL' query string into the related WP plugin admin option, then change this value to match the same as it is the fancy URL setting
// END MANDATORY CHANGES

var w3allappend = false;
var w3all_BoardUrl = "{BOARD_URL}";
w3all_BoardUrl = w3all_BoardUrl.slice(-1) != '/' ? w3all_BoardUrl + '/' : w3all_BoardUrl;

function w3allNormalize_phpBBUrl(href){
// try to 'normalize' passed relative links: needed all after last slash /
// exception are kind of passed urls like: /phpbb323/app.php/help/faq
// and if SEO mods that may assign some different kind of links values
// by the way, SEO absolute urls http(s) should be (all?) already considered here ...
var phpbbRUrl = href.split(/^.+?(\w+.+)$/);
if( href.indexOf('app.php') > -1 ){ // since the previous do not 'normalize' this type of passed value (and may miss something else)
   phpbburl = href.split(/^.+?(app\.php.+)$/);
   w3allappend = phpbburl[1];
 } else if ( /^https?/ig.exec(href) !== null ){ // absolute http(s) passed: try to 'normalize' a possible seo mod
   phpbburl = href.split(w3all_BoardUrl);
   w3allappend = phpbburl[1];
 } else if ( phpbbRUrl[1] && phpbbRUrl[1].length > 1 ){ // 'normalize' any other
   w3allappend = phpbbRUrl[1];
 } else if ( phpbbRUrl[0].length > 1 ){
   w3allappend = phpbbRUrl[0];
   }
// ... if still not normalized
if(/^\W/ig.exec(w3allappend) !== null){
  w3allappend = w3allappend.split(/^.+?(\w+.+)$/);
  if(w3allappend[1]){
    w3allappend = w3allappend[1];
  }
  if ( w3allappend[1] && w3allappend[1].charAt(0) == '/' ){
    w3allappend = w3allappend[1].substr(1);
  }
}
return w3allappend;
}

$(document).on("click", "a", function(e) {
  var href = $(this).attr("href");
  var w3all_onview_attach = (href.indexOf('file.php') > -1);

if( this.getAttribute('target') !== null ){
  e.preventDefault();
  window.open(href,'_blank');
 return;
}

if ( href.charAt(0) == '#' || href.indexOf('\./download\/file\.php') > -1 ){ return; }

// external link?
if ((this.href.indexOf(w3all_BoardUrl) > -1) != true){
 if(/^(f|ht)tps?:\/\//i.test(href))
 {
  e.preventDefault();
  parent.location.replace(href);
 return;
 }
}
// admin ACP?
if ( /\/adm\//ig.exec(href) !== null )
{
  e.preventDefault();
  parent.location.replace(href);
  return;
}

if ( href.indexOf('view=print') > -1 !== false || /\/adm\//ig.exec(href) !== null )
{
 e.preventDefault();
 window.open(href,'_blank');
 return;
}

if ( href.indexOf('quickmod') > -1 ) {
   w3allNOappend = true;
    return;
}

if( /posting\.php\?mode=[reply|post|bump]/ig.exec(href) !== null || /mcp\.php\?/ig.exec(href) !== null ){
  w3allNOappend = true;
}

if(w3all_onview_attach !== false){
 e.preventDefault();
 window.open(href,'_blank');
 return;
}

w3allappend = w3allNormalize_phpBBUrl(href);

if ('parentIFrame' in window){
  if( typeof w3allNOappend == 'undefined' || w3allNOappend == false ){
    window.parentIFrame.sendMessage(w3allappend);
  }
 }
});

// w3all UPDATES for phpBB events

if(window.self !== window.top){

// Lightbox scroll fix, #phpbb_confirm scroll fix, #phpbb_alert scroll fix, #bbcode_wizard + abbc3_button fix
$(".dropdown-contents-cp,.abbc3_button,.postimage,.dropdown-contents li a,#add_files").on("click", function(e) {
  var g = $($(this.getBoundingClientRect().top));
  var t = parseInt(g[Object.keys(g)[0]]);
  $("#bbcode_wizard,#phpbb_alert,#phpbb_confirm").animate({top: t+'px'}, 100);

 const w3LBfixImgs = setInterval(exec_w3LBfixImgs, 500); //1000
 function exec_w3LBfixImgs() {
   var imh  = parseInt($('.lb-image').css("height"));
   var lbOh = parseInt($('#lightboxOverlay').css("height"));
   var totH = imh+t;
    if(totH < lbOh){
      $("#lightbox").animate({top: t+'px'}, 400);
    } else {
      t = parseInt((lbOh-imh)-100);
      $("#lightbox").animate({top: t+'px'}, 400);
    }
   clearInterval(w3LBfixImgs);
 }
});

var pmn = "{PRIVATE_MESSAGE_COUNT}";
var w3all_phpbb_u_logged = "{S_USER_LOGGED_IN}";

var hash = window.location.hash.substr(1);

if( hash == 'unread' ){
 var postN = 1;
 $( "h3 > a" ).each(function (e) {
  ns = this.href.split('#p');
  if( typeof ns != 'undefined' && /viewtopic.php\?p=/ig.exec(this.href) != null ){
   if(ns[1] > postN){
     w3lh = ns[1];
    }
  }
 })

 if( typeof w3lh != 'undefined' ){
  hash = "p" + w3lh;
 }
}

$( document ).ready(function() {
 // fix vertical iframe centered in certain cases
   var bd = document.getElementsByTagName("body");
   var t = document.getElementById(bd[0].getAttribute("id"));

   if( typeof t != 'undefined' || t != false )
   {
         t.setAttribute("style", "position:fixed;top:0;left:0;width:100%;padding:0");
      //t.setAttribute("style", "position:fixed;top:0;left:0;width:100%;");
   }
});

if( typeof w3allNOappend == 'undefined' || w3allNOappend == false )
{
 $( window ).on( "load", function()
 {
  location.hash = "#" + hash;
  if( ! $(window.location.hash).length || location.hash.length < 2 ){
    var w3all_lochash = 0;
  } else {
    var w3all_lochash = $(window.location.hash).offset().top;
  }

  var w3appendevents = '#w3all_phpbbpmcount=' + pmn + '#w3all_phpbb_u_logged=' + w3all_phpbb_u_logged + '#w3all_lochash=' + w3all_lochash;

  window.parent.postMessage(w3appendevents, w3allAllowDomain);

 });
}
} // END if(window.self !== window.top){
</script>
<div data-iframe-size="" style="height:0;max-height:0;border:0;margin:0;padding:0;"><div>
<script type="text/javascript" src="https://forum.w3host.com/iframe-resizer.child.js"></script>
<!-- ENDIF -->

after you added this code into the phpBB overall_footer.html
edit following lines:

// START MANDATORY CHANGES
var w3allAllowDomain = 'https://w3host.com'; // MANDATORY! // Set/Change this value with your WordPress URL (example: https://axew3.com)
var wordpress_url_page_forum = 'https://w3host.com/forum'; // MANDATORY! // (DO NOT ADD/INCLUDE final slash here) Url that point to your wordpress forum page
var w3all_custom_wp_w3fancyurl = 'w3'; // MANDATORY! If you changed the default w3 to have 'fancy URL' query string into the related WP plugin admin option, then change this value to match the same as it is the fancy URL setting
// END MANDATORY CHANGES

change the w3allAllowDomain var value to fit your WP URL.
Now check the other line to change:

var wordpress_url_page_forum = 'https://w3host.com/forum'; // MANDATORY! (DO NOT INCLUDE final slash here) Url that point to your wordpress forum page (without final slash)

MANDATORY! change value on this line that need to point to the URL of the WordPress created/named forum page (do not add final slash and change http or https as needed)

If needed, change the w3 value of the line

var w3all_custom_wp_w3fancyurl = 'w3';

to fit the value that you may changed (default is w3) into the plugin admin, where there is the option: Fancy URL query string for the WordPress page forum that embed phpBB

Finally, check this line

<script type="text/javascript" src="https://forum.w3host.com/iframe-resizer.child.js"></script>

in the code you added (penultimate line): it should point to the iframe-resizer.child.js file that you’ll go to add into the phpBB root folder or somewhere else: the file can be found into the folder /wp-content/plugins/wp-w3all-phpbb-integration/addons/iframeresizer

Use the absolute URL (http or https, and adjust the url to fit your needs). It’s mandatory or the resizer won’t work

src="https://www.yoursite.com/your-phpbb-folder/iframe-resizer.child.js"

AFTER EDITED, save and load the modified overall_footer.html into your phpBB template folder, overwriting the default one (or rename the default into something else), and so

load into the phpBB root folder (or where you choose), the file iframe-resizer.child.js.

After this, phpBB require to recompile the template files, or the applied modifications will not be updated. Open phpBB ACP, and so under:

Server Configuration -> Load settings -> Recompile stale style components set to YES and save. Load one time the frontend to see the result and leave as is at moment, especially if you follow adding the code into the overall_header.html so to redirect any phpBB URL request to the iframed phpBB into the WordPress page: after tested that all work fine, you’ll return to ACP, resetting to NO and save. This step is needed to load/rebuild template modifications in phpBB if there are, but this option should be ever set to NO into an online/production site so to let the cache system to do his work. It should be set to yes only while on testing/devel time so to apply modifications on phpBB templates files (or your phpBB will result to be slower because in this state it is not using the cache for the template parsing/rendering).

overall_header.html code

If you want to redirect any phpBB URL request to your WordPress forum page follow this step:

Open with a text editor your phpBB template file overall_header.html and may immediately after the closing </title> tag add the following code:

<!-- IF not S_IS_BOT --><script>
// START MANDATORY CHANGES
var wordpress_url_page_f = 'https://subdomain.w3host.com/wordpress/forum'; // MANDATORY! // (DO NOT ADD/INCLUDE final slash here) Url that point to your iframed wordpress forum page
var w3all_custom_wp_w3fancyurl = 'w3' // MANDATORY! If you changed w3 to have 'fancy URL' query string for the WP page forum, then change this value to match what your fancy URL setting is after you changed it on plugin admin page
// END MANDATORY CHANGES

function w3all0Normalize_phpBBUrl(u){
	var bu = "{BOARD_URL}";
	w3allappend = "{BOARD_URL}"; 
 if ( /^https?/ig.exec(u) !== null ){ 
   phpbburl = u.split(bu);
	 w3allappend = phpbburl[1];
 } 
if(/^\W/ig.exec(w3allappend) !== null){
 	w3allappend = w3allappend.split(/^.+?(\w+.+)$/);
 	if(w3allappend[1]){
 		w3allappend = w3allappend[1];
 	}
 	if ( w3allappend[1] && w3allappend[1].charAt(0) == '/' ){
 		w3allappend = w3allappend[1].substr(1);
 	}
}
return w3allappend;
}
 
if ((window.self !== window.top) != true) {
  if(/adm\//ig.exec(window.location.href) === null){ // avoid x ACP 
  var w3all_r = window.location.href.replace(/sid=.+/gi, '');
 w3all_r = w3all0Normalize_phpBBUrl(w3all_r);
 if(/adm\/index\.php/ig.exec(w3all_r) == null){
  hrefEnc = window.btoa(unescape(encodeURIComponent(w3all_r)));
  href0 =  wordpress_url_page_f + '/?'+ w3all_custom_wp_w3fancyurl + '=' + hrefEnc;
  document.location.replace(href0);
 }
}}
// END force w3all redirect
</script>
<!-- ENDIF -->

On the added code change the URL value, that should point to your WP forum page:

var wordpress_url_page_f = 'https://subdomain.w3host.com/wordpress/forum';

it need to point to the WordPress iframed forum page: DO NOT ADD final slash and setup as http or https as needed.

Change the default w3 value of the line:

var w3all_custom_wp_w3fancyurl = 'w3'

to fit the value that (if) you may changed into the plugin admin, where there is the option: Fancy URL query string for the WordPress page forum that embed phpBB.

Reset to No the Recompile phpBB template option after some test. So before to follow READ THE NEXT IMPORTANT NOTE

NOTE: if you need to disable/edit the overall_header.html javascript code for some reason and you cannot access the phpBB at the real URL because there is a forced redirect to the WP forum page, after applied the overall_header.html code, and you have reset the Recompile Stale Template to NO (so you are always redirected to the WP forum page) you can disable the javascript on your browser, then access to the ACP and set to YES the Recompile Stale Template option to yes. It is also !important to remember this if in trouble with login, and recompile Stale Template option in phpBB is set to Off at this time.

If the iframe do not display and you get mixed insecure content on console, you have to fix it doing this: open your WP header.php template file, and may just before others header meta tags add the follow:

<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">

For testing purpose or for any other reason, into the overall_header added code can be commented the line:

document.location.replace(href0);

changing it into this:

//document.location.replace(href0);

so the requests to phpBB will not be forced/redirected to the WP page. But you can open the WP page-forum to see the phpBB iframed result. Remember that to apply template modifications, phpBB require to recompile templates files.

Enjoy your awesome WordPress phpBB template integration!

Appreciations: https://www.paypal.com/paypalme/alessionanni/

Iframe resize library by: https://github.com/davidjbradshaw/iframe-resizer