Different templates for pages

Dinocanid · #1 12-13-2018, 04:17 PM

Today I was curious about creating a landing page for Wild Souls, but I wanted it to have a different appearance than the usual site layout. After some research and experimenting, I now present this tutorial!

-Step 1-

You’re going to need to open class_template.php and scroll down to the function “assigntemplateVars”. Add this string of code underneath the other assigned variables:

PHP Code:


			
$fullurl = $_SERVER['REQUEST_URI'];

$this->assign('page_name',basename($fullurl));

What this does is get the name of the page you are currently on. This is in place of getting the file name, which constantly returned “index”. So if you visited “yoursite.com/about” for example, it would return “about”. That’s what we’re going to need that further on.

-Step 2-

Now go to the folder of the theme you are currently using and make a new tpl file. It can be called whatever you like, but for the sake of this tutorial I’ll call it “landing.tpl”.

Open it up and add in the HTML of your desired layout (including body tags). Here is an example of mine:

HTML Code:

<body class='text-center' style='background-image: none;'>
    <div class=' cover-container d-flex w-100 h-100 p-3 mx-auto flex-column'>
      <header class='masthead mb-auto'>
        <div class='inner'>
          <h3 class='masthead-brand'>{$document_title}</h3>
          <nav class='nav nav-masthead justify-content-center'>
            <a class='nav-link active' href='#'>Home</a>
            <a class='nav-link' href='#'>Features</a>
            <a class='nav-link' href='#'>Contact</a>
          </nav>
        </div>
      </header>
 
      <main role='main' class='inner cover'>
        <p class='lead'>{$document_content}</p>
      </main>
 
      <footer class='mastfoot mt-auto'>
        <div class='inner'>
          <p>Cover template for <a href='https://getbootstrap.com/'>Bootstrap</a>, by <a href='https://twitter.com/mdo'>@mdo</a>.</p>
        </div>
      </footer>
    </div>
</body>

-Step 3-

Now the good part! Take a look at this string of code here:

PHP Code:


			
{if $page_name == 'index' || $page_name == '' || $page_name == 'home'} 

    {include file="{$root}{$temp}{$theme}/landing.tpl"}

{else}

What this does is it uses the landing page template if the user is currently on “yoursite.com”, “yoursite.com/index”, or “yoursite.com/home”.

Now, here is the basic skeleton of how your template.tpl file should use that code:

HTML Code:

{include file="{$root}{$temp}{$theme}/header.tpl"}
<!-- User is on the landing page -->
{if $page_name == 'index' || $page_name == ''} 
    {include file="{$root}{$temp}{$theme}/landing.tpl"}
{else}
<!-- User is NOT on the landing page -->
    <body>
        <!-- Usual template html goes here... -->
    </body>
{/if}
</html>

Aaand that’s it! Now you can create more unique sites, rather than having every page look the same.

Micolai · #2 06-03-2020, 02:50 PM

Quote:

Originally Posted by Dinocanid

Today I was curious about creating a landing page for Wild Souls, but I wanted it to have a different appearance than the usual site layout. After some research and experimenting, I now present this tutorial!

-Step 1-

You’re going to need to open class_template.php and scroll down to the function “assigntemplateVars”. Add this string of code underneath the other assigned variables:

PHP Code:


			
$fullurl = $_SERVER['REQUEST_URI'];
$this->assign('page_name',basename($fullurl));

What this does is get the name of the page you are currently on. This is in place of getting the file name, which constantly returned “index”. So if you visited “yoursite.com/about” for example, it would return “about”. That’s what we’re going to need that further on.

-Step 2-

Now go to the folder of the theme you are currently using and make a new tpl file. It can be called whatever you like, but for the sake of this tutorial I’ll call it “landing.tpl”.

Open it up and add in the HTML of your desired layout (including body tags). Here is an example of mine:

HTML Code:

<body class='text-center' style='background-image: none;'>
    <div class=' cover-container d-flex w-100 h-100 p-3 mx-auto flex-column'>
      <header class='masthead mb-auto'>
        <div class='inner'>
          <h3 class='masthead-brand'>{$document_title}</h3>
          <nav class='nav nav-masthead justify-content-center'>
            <a class='nav-link active' href='#'>Home</a>
            <a class='nav-link' href='#'>Features</a>
            <a class='nav-link' href='#'>Contact</a>
          </nav>
        </div>
      </header>
 
      <main role='main' class='inner cover'>
        <p class='lead'>{$document_content}</p>
      </main>
 
      <footer class='mastfoot mt-auto'>
        <div class='inner'>
          <p>Cover template for <a href='https://getbootstrap.com/'>Bootstrap</a>, by <a href='https://twitter.com/mdo'>@mdo</a>.</p>
        </div>
      </footer>
    </div>
</body>

-Step 3-

Now the good part! Take a look at this string of code here:

PHP Code:


			
{if $page_name == 'index' || $page_name == '' || $page_name == 'home'} 
    {include file="{$root}{$temp}{$theme}/landing.tpl"}
{else}

What this does is it uses the landing page template if the user is currently on “yoursite.com”, “yoursite.com/index”, or “yoursite.com/home”.

Now, here is the basic skeleton of how your template.tpl file should use that code:

HTML Code:

{include file="{$root}{$temp}{$theme}/header.tpl"}
<!-- User is on the landing page -->
{if $page_name == 'index' || $page_name == ''} 
    {include file="{$root}{$temp}{$theme}/landing.tpl"}
{else}
<!-- User is NOT on the landing page -->
    <body>
        <!-- Usual template html goes here... -->
    </body>
{/if}
</html>

Aaand that’s it! Now you can create more unique sites, rather than having every page look the same.

I was following this I think pretty well until step 3 lol I got lost... I'm not sure where I'm suppose to paste the skeleton coding at in the template file's code.

Dinocanid · #3 06-03-2020, 03:22 PM

Quote:

Originally Posted by Micolai

I was following this I think pretty well until step 3 lol I got lost... I'm not sure where I'm suppose to paste the skeleton coding at in the template file's code.

The skeleton code is basically what the whole template file is supposed to look like. In this example, the page shows the landing template if you're on the index page. Where it says "usual template html goes here", that's where you post the template code that will be used on every other page.

I sometimes forget to check here so forgive my if I seem kinda dead lol. If you have discord though, mine is Dinocanid#6171. I usually answer there pretty much instantly

Micolai · #4 06-03-2020, 03:44 PM

Quote:

Originally Posted by Dinocanid

The skeleton code is basically what the whole template file is supposed to look like. In this example, the page shows the landing template if you're on the index page. Where it says "usual template html goes here", that's where you post the template code that will be used on every other page.

I sometimes forget to check here so forgive my if I seem kinda dead lol. If you have discord though, mine is Dinocanid#6171. I usually answer there pretty much instantly

Thank you so much! It's working now :D I'll add you on Discord though if that's okay?

What's New?

What's Hot?

What's Popular?