Design & Develop Your Own Blog

Learn to build a lean & flexible blogging platform

Creating Pages

In the last chapter, we linked to "About" and "Contact" pages. But so far, we haven't created them. Let's catch up on this now.

Folders are Pages

First, here's a little refresher on how Kirby handles the concept of "pages": every folder in the "content" base folder stands for a page. That folder's name becomes the page's URL: e.g. the folder "contact" will make a page available at "". A subfolder named "email-us" will then be reachable as "" and so on...

Here's a bit more about the naming scheme: A page whose folder name is not prepended with a number is a so-called "hidden" page: you'll have to explicitly link to it - but it will not be contained in any listings that we create programmatically (like a navigation e.g.).

We could just use "hidden" pages for the Contact and About items. However, I'd like to demonstrate the concept of ordered pages in practice. Therefore, let's create the following two folders in the main "content" directory: "01-about" and "02-contact".

Page Contents

By creating folders, we've created containers for our new pages. But we haven't created any actual content, yet.

In Kirby, page content is kept in a .txt file inside of each page folder. How we name such a .txt file determines which template is used for the page. For example, by naming the file "contact.txt", Kirby would go looking for a file named "contact.php" in the site/templates folder. If it cannot find a file with that name, it will use the "default.php" template (which should always be present and which we'll create later).

Data Structures Revisited

Let's go and create content files in our new about & contact page folders. We'll name both of them "subpage.txt".

To enter actual content, think back about how the data structure in site.txt looked: a field name, a colon, the value - separated by four dashes. We'll now create the same kind of content in "about/subpage.txt":

Title: About

### Tower - Not a moustache, but the best Git client.

We help over __70,000 users__ in companies like Apple, Google, Amazon, Twitter, and Facebook to easily & productively work with the Git version control system.

( link: text:Try it 30 days for free target:_blank)

Code on GitHub

While "Title" contains a simple string value, the "Text" field contains some more elaborate Markdown / Kirbytext content. We'll look at this more closely in the next chapter.

But let's first create a new template so we can actually render this content here.

A New Template

Since we named the txt file "subpage.txt”, we'll have to create a same-named template in site/templates/subpage.php.

To begin with, we'll reuse our existing snippets for the header, navigation, and footer areas. But we'll also render our "Title" and "Text" data fields:

<?php snippet("html-header"); ?>
<?php snippet("navigation"); ?>

<div class="row-wrapper">
  <div class="outer-container">
<div class="subpage-content">
  <h1><?php echo $page->title(); ?></h1>
  <?php echo $page->text()->kirbytext(); ?>

<?php snippet("footer"); ?>
<?php snippet("html-footer"); ?>

This is the first time you see the $page object in action. This is one of the most powerful objects in Kirby as it allows us to access all kinds of data about the current page. Most importantly, any data fields in the txt file turn into method names. E.g., "Text:" automatically became a text() method on the $page object.

This works with any field names you add yourself, too. The only thing to note is that field names are converted to lowercase and any punctuation is replaced by underscores. A field named "Teaser-Text", for example, will be available as:

The $page object also tells you the page's URL, if it has child pages, it lists other files like images or videos that are placed inside its folder and much, much more. Have a look at Kirby's documentation of the $page object for more about this.

We can now visit http://localhost:8888/about in our browser:

Adding More Page Content

With our "subpage" template in place, adding more content is just a matter of providing some data. Let's edit our contact page (content/contact/subpage.txt):

Title: Contact

### Get in touch, don't be shy
We'd love to hear from you. Feel free to ( text:send us an email).

Code on GitHub

About Us

As the makers of Tower, the best Git client for Mac and Windows, we help over 100,000 users in companies like Apple, Google, Amazon, Twitter, and Ebay get the most out of Git.

Just like with Tower, our mission with this platform is to help people become better professionals.

That's why we provide our guides, videos, and cheat sheets (about version control with Git and lots of other topics) for free.