Page structure 🏗️

You can find the standrad page structure of in the 📄 /src/pageTemplate.php file, you can also copy it when you create a new page.

The first lines of code of a page must always be


This will include the global.php file, which will import important functions, variables and classes.

Put you php code after this line and don't forget to close the php tag.

// My code...

You can then add the DOCTYPE and open the html tag.

<!DOCTYPE html>
<html lang="en">

Inside the head we will need to call some php functions to add metadata and import stylesheets.

    metadata(...); // See : [The metadata function]
    css(...); // See : [Importing stylesheets]
    pageCss(...); // See : [Importing stylesheets]

We can now open the body tag and add some php code.

    if ($showPageContent) {
      navbarStart(); // See : [Adding a navbar]
      navbarButton("Home", "/", "fa fa-home"); // See : [Adding a navbar]
      navbarEnd(); // See : [Adding a navbar] 

We add if ($showPageContent) { because we will show the page content only if the variable $showPageContent is set to true.

It can be false when the user is being redirected to another page... or when the dontShowPageContent() function has been called.
And we add a navbar with the navbar functions (see Adding a navbar for more information).
We will now open the mainContainer div, this div is used to center the page content.

<div class="mainContainer">

After that we will add the main div which will contain the page main content and the sidebar.

<div class="main">
    <div class="content">
      <!-- Page main content goes here -->
    <div class="sidebar">
      <!-- Page sidebar content goes here -->

We can then close the mainContainer div, print the HTML for the footer and for the loading screen., and close the body and html tags.

        loadingScreen(); // prints the HTML for the loading screen
        footer(); // prints the HTML for the footer
      } // Closes the : if ($showPageContent) {
      js(...); // See : [Importing javascript]
      pageJs(...); // See : [Importing javascript]

We import the scripts with the js functions (see Importing javascript for more information).


This website needs javascript to be enabled