Splitting the Template with Snippets

No matter what you're developing, some basic rules of good programming are always true:

  1. Optimize your code for reuse. Or, in other words, stay DRY (Don't Repeat Yourself).
  2. Keep code in small, semantic units to stay on top of things.

With our monolithic home.php template, none of this is currently the case. Let's start improving this by using Kirby's promoted structure.

Using Our First Snippets

In Kirby, “snippets” are small code parts, each in its own file, that you can reuse in multiple places.
Like in most projects, we have many areas in our template that we'll want to reuse in our other templates (e.g. for the "details" view). The most basic one is the HTML's header part.

In home.php, copy and cut from line 1 until the opening <body> tag and paste this into a new “html-header.php” file in site/snippets/:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>The Moustache Monthly</title>

    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, minimal-ui" />

    <link rel="stylesheet" href="assets/css/styles.css" />
  </head>

  <body>

Let's do the same with the HTML's other ending (saving this in site/snippets/html-footer.php):

  </body>
</html>

We've made our main home.php file a bit lighter and have taken some responsibility off of it. Now we have to tell Kirby to actually use these code parts when rendering the home template. Let's put the following PHP function calls where those HTML parts used to be. In site/templates/home.php:

<?php snippet("html-header") ?>
...
<?php snippet("html-footer") ?>

Code on GitHub

Using snippets is as easy as calling the snippet() function and providing the snippet's name (without the file's extension).

When refreshing the page now in the browser, you'll see that nothing has changed. Still, it's time to pat yourself on the back. Because we have now taken the first step in making our code reusable: for other templates, we can use the html-footer and html-header snippets again - without having to repeatedly type the same code.

Replacing Static Content with Dynamic Values

Before we move on to the navigation, let's "dynamicise" our html-header.php a bit:

<title><?php echo $site->title() ?></title>

<meta charset="utf-8" />
<meta name="description" content="<?php echo $site->description() ?>" />
<meta name="keywords" content="<?php echo $site->keywords() ?>" />

Code on GitHub

See that site.txt file in the root “content/“ folder? It's a simple collection of metadata about our site - and a wonderful example of Kirby's data structures:

Title: The Moustache Monthly
---- 
Description: A collection of wonderful beards.
---- 

Since Kirby works without a database, it uses simple structures in flat files like these. A data field is simply a certain name ("Title" or "Description" in this example), a colon, and the actual value. Fields are then separated simply by 4 dashes in a new line.

With the $site object, we're accessing the metadata in the site.txt file - and access the individual data fields by calling same-named methods on this $site object ($site->description()). It's as simple as that.

Loading Our Stylesheet

Still in the html-header.php snippet, there's also a more elegant way to load our CSS file. Instead of hard-coding the style tag, we let Kirby create the tag:

<?php echo css('assets/css/styles.css'); ?>

There are two advantages of letting Kirby do this:
a) it automatically uses the proper HTML <link> tag
b) it creates a correct URL to the CSS file, no matter from which page we access it

URLs in Kirby

While we’re putting the navigation into its own snippet file (navigation.php), let’s also have Kirby create the links to those pages:

<div id="logo">
  <img src="<?php echo url('assets/images/logo.svg'); ?>" />
</div>
<nav>
  <a href="<?php echo url('home'); ?>">Home</a>
  <a href="<?php echo url('about'); ?>">About</a>
  <a href="<?php echo url('contact'); ?>">Contact</a>
</nav>

Code on GitHub

Kirby has a url() helper function that you can feed paths to. This can either be a path to an asset like the location of that "logo.svg" image or one of our pages. Kirby then takes care of creating a correctly formed URL (with prepending host, protocol, etc.).

Note

In case you code along with us, don't forget to commit your changes to the version control system from time to time. As mentioned already: take the free course on Learning Version Control with Git if you want to learn more.

Since we've already linked to these "About" and "Contact" pages, let's go and create them!

Giveaways. Cheat Sheets. eBooks. Discounts.
And great content from our blog!

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.