Design & Develop Your Own Blog

Learn to build a lean & flexible blogging platform

Displaying a Post

Now that the list view is done, we need to craft the view that displays a single post.

Template Naming

We’ll call this page template “default.php”; Kirby will use this whenever it cannot find a template with the same name as the page file. This allows us to name our post files however we choose (instead of always having to name them “detail.txt” or the like).

Static Content

Just as with the list view template, let’s start by filling in static content from our HTML template. Step-by-step, we’ll then replace each part with dynamic content.

With the static HTML content (which you can examine in commit cf90f75), any of our content pages (e.g. http://localhost:8888/posts/chevron) will look like this:

Let’s start transforming our static template into a dynamic one.

Accessing Image Resources

On the top of the page, we want to show a large “teaser” image, specific to the post. To keep handling as easy as possible, we can simply agree to put a file named “teaser.jpg” into the page folder:

Accessing this image in code can easily be done by using the page object’s image() method:

<div id="main-image">
  <?php if($page->image('teaser.jpg')){
    echo '<img src="'. $page->image('teaser.jpg')->url() .'" />';
  } ?>

Outputting the actual content (date, author, text) works exactly the same as in our other templates.

Passing Variables to a Snippet

More exciting is how we show the “author bio” just below the post content:

<div class="author-content">
  <?php snippet('author-bio', array('name' => $page->author()))?>

We’re using a custom snippet for this job; but notice how we provide an array as the second parameter in the “snippet” function call. This allows us to supply variables to the snippet.
In this example, our code will make a variable available to the snippet that

  • is called $name and
  • has the author name as its value.

Inside the “author-bio.php” snippet, we can then easily access the passed parameter like this:

if($name == ‘Ralph Grando’){ …

Code on GitHub

Working with YAML

In the “RecommendedReading” data field in our page files, we’re using the popular “YAML” format for our list of reading tips:

- posts/pencil
- posts/fu-manchu

In this example, we’re using the simplest form of structure: lines prepended with a dash represent a list in YAML.
In fact, YAML can help to structure various kinds of data. You can read more about YAML on the official site.

On the bottom of our post’s detail page, we make use of Kirby’s YAML capabilities - by accessing the “RecommendedReading” data field and parsing it as YAML:


Kirby then provides this data in a PHP-friendly way - as an array of items that we can cycle through:

$recommendedArticles = $page->recommendedreading()->yaml();
foreach($recommendedArticles as $recommendedArticle): 

As you’ve noticed above, we haven’t used page titles to identify the items we want to recommend. Instead, we’ve used the pages’ URIs (e.g. “posts/pencil”), the relative URLs without the host or any subfolders. The URI makes both for a more reliable and unique piece of data - and it can easily be fed into the “find” method to get hold of the actual page object:

$recommendedArticlePage = $pages->find($recommendedArticle);

Having the individual page object in hand, we can create a simple list of HTML <li> items:

  <a href="<?php echo $recommendedArticlePage->url() ?>">
    <?php echo $recommendedArticlePage->title() ?>

Code on GitHub

Since we had so many components readily available (snippets for the header, footer, navigation, etc.), we’re already finished with this template!

Let's implement another critical feature for a blog: an RSS feed!

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.