This section contains detailed articles elaborating on some of the common issues phpBB users encounter while using the product. Articles submitted by members of the community are checked for accuracy by the relevant phpBB Team. If you do not find the answer to your question here, we recommend looking through the Support Section as well as using the Site Wide Search.

Add a New Custom Page to phpBB

Description: Need to add a new page to your web site that matches the look and feel of your forums? Then read this how-to article.

In Categories:

Link to this article: Select All
[url=https://www.phpbb.com/support/docs/en/3.0/kb/article/add-a-new-custom-page-to-phpbb/]Knowledge Base - Add a New Custom Page to phpBB[/url]

Add a New Custom Page to phpBB

Hello.

This tutorial will show you how to add a new customized page to phpBB. Why would you want to do this? Say for example, you want to make a new web page that looks just like your forum. This new page can contain anything you want from simple text like a list of rules to more complicated things like other PHP scripts, for example, calendars. Let's get started.

The aboutus.php file

When you are creating the aboutus.php page, make sure there are no blank lines and/or spaces before the <?php and after the ?> parts. Also make sure you save the file as UTF-8 without BOM (see phpBB3 and UTF-8 without BOM).

For this example, we'll create a simple page that tells a little about the site. Copy and paste the code below into your favourite text editor.

Code: Select all

<?php
define
('IN_PHPBB', true);
$phpbb_root_path = (defined('PHPBB_ROOT_PATH')) ? PHPBB_ROOT_PATH : './';
$phpEx = substr(strrchr(__FILE__, '.'), 1);
include(
$phpbb_root_path . 'common.' . $phpEx);

// Start session management
$user->session_begin();
$auth->acl($user->data);
$user->setup();

page_header('Title Here');

$template->set_filenames(array(
    'body' => 'yourpage_body.html',
));

make_jumpbox(append_sid("{$phpbb_root_path}viewforum.$phpEx"));
page_footer();
?>


Is that it? Not quite, so let me explain.

If you are creating a completely custom page, you probably won't need to do this, but if you need access to the phpBB language files, then change this line:

Code: Select all

$user->setup(); 


to this:

Code: Select all

$user->setup('base-name-of-language-file-here'); 


Replace base-name-of-language-file-here with the name of the language file you want without the .php extension. For example, if you need to load the viewtopic.php language file, then use this code:

Code: Select all

$user->setup('viewtopic'); 


The first change you need to change is this line:

Code: Select all

page_header('Title Here'); 


Just change Title Here to whatever you want displayed in the title bar of the browser. For our example, we'll change it to About Us.

The next thing you will need to change is this line:

Code: Select all

'body' => 'yourpage_body.html'


Again, let me explain further why you need to change this. phpBB separates the logic of the page (all the PHP code) from the design (colours, images, backgrounds, etc.) and text (the HTML file). You will need to change yourpage_body.html to something more clear like aboutus_body.html -- and we're done editing this file. Save the file above in your text editor as aboutus.php (note: Microsoft Windows may try to add a .txt extension on the end so if that happens, save it as "aboutus.php" including the quote marks).

Bonus Tip

If you would like to restrict access to the page to logged in users only, then find this line

Code: Select all

$user->setup(); 


and add this bit of code after that

Code: Select all

if ($user->data['user_id'] == ANONYMOUS)
{
    login_box('', $user->lang['LOGIN']);


The aboutus_body.html file

Next, we'll create the HTML file that contains the actual content of aboutus.php. Again, with your favourite text editor open, copy the following code:

Code: Select all

<!-- INCLUDE overall_header.html -->

<h2>Title Here</h2>

<div class="panel">
   <div class="inner"><span class="corners-top"><span></span></span>

   <div class="content">
      <p>
         Content in here.
      </p>
   </div>

   <span class="corners-bottom"><span></span></span></div>
</div>

<!-- INCLUDE jumpbox.html -->
<!-- INCLUDE overall_footer.html -->


This is pretty easy to do. To change the name of the page which is displayed in big letters near the top, just change this line:

Code: Select all

<h2>Title Here</h2>


Replace Title Here with About Us.

And this is the section where you include all of your actual content:

Code: Select all

         Content in here.


You can add whatever HTML and CSS code and text in here you want. (If you don't know HTML or CSS, I'd recommend learning them. Both are easy to learn. The W3Schools site has excellent tutorials.) Here's a quick example with a little bit of text and a list of items:

Code: Select all


         We were founded this year to bring you the best forum on the Internet!
         
         We promise to do the following:
         <ul>
            <li>Provide new content</li>
            <li>provide a friendly atmosphere</li>
            <li>Provide an environment where you can have fun!</li>
         </ul>


Wrapping it up

If you followed the directions here are what the two files should look like now:

aboutus.php:

Code: Select all

<?php
define
('IN_PHPBB', true);
$phpbb_root_path = (defined('PHPBB_ROOT_PATH')) ? PHPBB_ROOT_PATH : './';
$phpEx = substr(strrchr(__FILE__, '.'), 1);
include(
$phpbb_root_path . 'common.' . $phpEx);

// Start session management
$user->session_begin();
$auth->acl($user->data);
$user->setup();

page_header('About Us');

$template->set_filenames(array(
    'body' => 'aboutus_body.html',
));

make_jumpbox(append_sid("{$phpbb_root_path}viewforum.$phpEx"));
page_footer();
?>


aboutus_body.html:

Code: Select all

<!-- INCLUDE overall_header.html -->

<h2>About Us</h2>

<div class="panel">
   <div class="inner"><span class="corners-top"><span></span></span>

   <div class="content">
      <p>
         We were founded this year to bring you the best forum on the Internet!
         
         We promise to do the following:
         <ul>
            <li>Provide new content</li>
            <li>provide a friendly atmosphere</li>
            <li>Provide an environment where you can have fun!</li>
         </ul>
      </p>
   </div>

   <span class="corners-bottom"><span></span></span></div>
</div>

<!-- INCLUDE jumpbox.html -->
<!-- INCLUDE overall_footer.html -->


Final steps

Now save the file you were just changing as aboutus_body.html and upload it to the styles/your style name here/template/ directory on your web server. Also upload the aboutus.php file to your web server in the main phpBB directory (the same place where you uploaded files like faq.php, viewforum.php, viewtopic.php, etc.).

Finally go to http://www.example.com/the-place-where- ... boutus.php to see your brand new custom page!

Enjoy! :mrgreen:

  • 20121223 - edited by HGN to add reference to KB phpBB3 and UTF-8 without BOM
  • 20080821 - edited by ToonArmy to fix new lines in code blocks and add PHPBB_ROOT_PATH to final example
  • 20080331 - edited by pentapenguin to utilise PHPBB_ROOT_PATH constant and added bonus tip
  • 20071025 - edited by karlsemple to add php code blocks
  • 20071026 - edited by karlsemple to add warning about stuff outside of php tags