Creating new pages in SMF

[Project Evolution]

In this tutorial you will learn how to create new pages in SMF. By this I mean your page will be completely integrated into SMF's template system, also done by this, your page will have a link embedded into SMF. In this example, I will use a page for something such as highscores.

Lets begin. In order to have our pages embedded into SMF's source, we need to create a new element in the $actionArray in index.php. Head on over to the main directory of your SMF package and open up index.php. Next off search for,

Code:

// Here's the monstrous $_REQUEST['action'] array - $_REQUEST['action'] => array($file, $function).
$actionArray = array(

And below that we will add a new element,

Code:

'highscores' => array('Highscores.php', 'Highscores'),

Now to explain whats being done here.

• We create our key ('highscores') which will be the name of the action. If you havnt noticed, SMF uses actions as a way to navigate from page to page. For example, the login page is: yoursite.com/index.php?action=login. In this case, we are now creating a new action called highscores.
  
• We create a new array which takes two more elements. The first element is the name of the php file which will handle the actual page itself. In this case, Highscores.php will contain all the functions for making the page display and run. The second element ('Highscores'), is the name of the function which will initialize the page. Think of it as being the pages 'constructor'.
  

Next off, we are going to create a new file in the Sources directory called Highscores.php. Here is the basic outline,

Code:

<?php
// Check for any suspicious activity
if (!defined('SMF'))
   die('Hacking attempt...');

// Make sure this corresponds to what was in the array from previously!
function Highscores() {

   global $context, $scripturl;

   loadTemplate('Highscores'); // Load the Highscores.template.php file
   $context['page_title'] = $context['forum_name'] . ' - Highscores'; // Page title
   $context['linktree'][] = array( // The linktree which is displayed above the content
      'url' => $scripturl . '?action=highscores', // Link to the highscores page
      'name' => $context['page_title'],
   );
   $subActions = array( // subActions will be described soon
      'skill' => 'DisplayScores',
      'search' => 'SearchUser',
      'profile' => 'UserProfile'
   );

   DisplayHighscores();

   // Checks to make sure sub actions are valid, if not, display main page
   if (!empty($subActions[@$_GET['sa']]))
      $subActions[$_GET['sa']]();
   else
      DisplayHighscores();
}

// This will display the main page
function DisplayHighscores() {
   global $context;
}

?>

As you can see here, this may be confusing at first. But try and stick with the comments.

Next off we are going to go into our Themes directory and create a new php file called Highscores.template.php. This file is the actual aesthetic look of the page. You may be asking: "How does SMF know which template file to use?". Simple,

Code:

loadTemplate('Highscores');

This function digs through your theme's directory and looks for the template file called Highscores.

Here is our Highscores.template.php file,

Code:

<?php
function template_main() {
   global $context, $settings, $options, $txt, $scripturl, $modSettings, $sourcedir;

   echo '<h1>my name is bob</h1>';
}



?>

• We create a new function. This functon will handle the main layout for our new page. We call the $context variable which you will find out its use soon.
  
• We create an echo statement. This will define the template itself.
  

Thats the basic outline for creating a page. Next im going to show you how to utilize the $context variable. In your Highscores.php file add this in your DisplayHighscores() function,

Code:

$context['message'] = 'bob';

Make sure thats right under the global keyword in the function otherwise it wont work!

In your Highscores.template.php replace this,

Code:

function template_main() {
   global $context, $settings, $options, $txt, $scripturl, $modSettings, $sourcedir;

   echo '<h1>my name is bob</h1>';
}

With,

Code:

function template_main() {
   global $context, $settings, $options, $txt, $scripturl, $modSettings, $sourcedir;

   echo '<h1>my name is ' . $context['message'] . '</h1>';
}

This will print: my name is bob.As you can see, the $context variable can be used to hold information which can then be displayed on your pages. Hopefully you have an idea how this works.

And thats it, cheers.
~ Anthony`

[Sam]

Just decided to post a load of tutorials eh? Also when I was using SMF I just used a custom mod to create new pages and it added in the template automatically...

However, it is again an another well written and informative tutorial.

[Project Evolution]

Just decided to post a load of tutorials eh? Also when I was using SMF I just used a custom mod to create new pages and it added in the template automatically...

However, it is again an another well written and informative tutorial.

Yes hahaha, I havnt been posting things on this site in awhile. And yes that is the easier way to do it, however I wrote this for any interested users wanting to learn to write modifications. I will probably start focusing more on teaching people how to author modifications.

[w00pz]

Nice tut
Might become handy some day