Header/navbar/footer elements not importing into new page

I'm using UserFrosting and so far I've been able to import all of the default elements into the home page. However, I've now added a second page but nothing happened when I copied the following code from the home page:

{% include 'common/components/head.html' %}
     <rest of code>
{% include 'common/components/main-nav.html' %}
     <rest of code>
{% include 'common/components/footer.html' %}   
{% include 'common/components/jumbotron-links.html' %}

I then used the following php code:

<?php include("../userfrosting/templates/common/components/head.html"); ?>

Which seems to work but the page only shows this code found within the head.html file:

{% for item in includeCSS(page_group|default("common")) %} {% endfor %} {% for item in includeJSTop(page_group|default("common")) %} {% endfor %}

Which obviously is not very useful!

When I keep the home and page2.php file in the same folder (in localhost/userfrosting/templates/common) then I receive Error 404. When I move the file to the default UserFrosting home page directory (which the home.html file isn't actually in) in localhost/public, I get only the above code.

It seems like I'm missing something quite basic here but would appreciate some help. Thanks.

Solution

You are confusing PHP files and template files. UserFrosting uses a front controller pattern along with the Twig templating engine. So, you do not need a separate PHP file for each page. Instead, you should create a new template file for your page:

userfrosting/templates/common/page2.html

{% include 'common/components/head.html' %}
     // DO NOT use PHP here - just Twig!  See the Twig documentation: http://twig.sensiolabs.org/doc/templates.html
{% include 'common/components/main-nav.html' %}
     // More Twig
{% include 'common/components/jumbotron-links.html' %}
{% include 'common/components/footer.html' %}

Then you need to link up a URL with this template. That is done in the controller, public/index.php, for example like this:

// Miscellaneous pages
$app->get('/page2/?', function () use ($app) {    

    $app->render('common/page2.html', [
        'page' => [
            'author' =>         $app->site->author,
            'title' =>          "Page Deuce",
            'description' =>    "This is the second page, aight?",
            'alerts' =>         $app->alerts->getAndClearMessages()
        ]
    ]);          
});

I highly recommend going through the tutorial on adding a new page: https://learn.userfrosting.com/building-pages

You can also learn more about MVC, Slim, and Twig here: https://learn.userfrosting.com/basics/overview

Feel free to join in chat if you are still having trouble.