Kirby CMS Theme: From Start to Zurb Foundation

Kirby CMS is one of the newer content management system solutions that is based on a static file-based system. And by new, I mean, similar to how blogs were in the pre-dynamic era or how you might want to setup a blog when you’re just learning about PHP. The advantage here is the leverage of a super simple system, ability to synchronize with free data storage, and take up less resources, enabling you to get a cheaper host (use the coupon code: “ANTJCOUPON” for 50% off).

I will be walking you through a quick Kirby CMS installation and setup and then quick kirby cms theme creation with Zurb Foundation. Zurb, being a great company that recently acquired Forrst, and is hoping to revive the community. Zurb Foundation being their tool which rivals Twitter’s Bootstrap on every front. They even have their own icon font!

Learning how to use both will add to your website development tools repertoire and give you an insight on why and how people build tools. To me, this is enlightening. I’ve started open sourcing all of my progress and tools I make and realized that the reason why people “reinvent the wheel” is that often times, they need a special “wheel”. I used Foundation instead of Bootstrap, for instance, when I needed to implement it into my SASS framework. I used Bootstrap instead at another point because of the BootTheme tool which allowed me to “design” a look within a few minutes and start back-end web development soon-after.

So let me tell you a bit more about each.

Our Finished Product

Download! Preview!

Kirby CMS

Kirby is a content management system that is file based and does not require database access, only server access to parse files via PHP. Everything is sorted into folders and files. This is great news because guess what? You can pretty much carry that blog from one place to another with minimal setup and backup is a breeze. This also allows neat integration with services such as Dropbox and Github. Kirby CMS touts being lightweight, strong, and simple to develop for. You’ll see why I say that

Kirby CMS currently runs at $39 a license. The trial works the same as the full product and licensing seems to work on an “honor” system, with the author stating that he is not actively hunting down “delinquents” and won’t be until people start abusing this system. The author offers discounts and you can email him directly to cut a deal if you feel like you can contribute to the community but cannot afford the licensing price.

I suggest you get a trial and see if you want to use it in real-world setting.

Outside of that, you are welcome to try a couple of alternatives:

So why Kirby? It has a lot of support, it’s known and will be growing with time. I’ll be writing an additional tutorial on setting up Stacey and creating the same template on there. Statamic seems to be the more popular file-based content management system but at $100 a pop for commercial license, it’s out of my reach for client usage.

Zurb Foundation

Foundation is pretty much like Twitter Bootstrap in all aspects but one. It runs on SASS and SCSS instead of LESS. Zurb Foundation is not as wide-spread but has the same (if not more) features as Bootstrap. My personal belief is that Twitter Bootstrap got so much attention mainly due to Twitter’s involvement while Foundation was created by Zurb, a company, let’s just say, not as large as Twitter.

Foundation is pretty slick and offers a thorough Front-End framework, grid, and javascript experience.

You’re welcome to switch to Bootstrap for comfort for the tutorial. If anything I might create several themes, based on different front-end frameworks.

Installing Kirby CMS

Installing Kirby is DEAD simple. If you know how to develop a website, a dynamic website, then you’ll know how to install Kirby without a hitch. Download the files off their site and extract it at the root of your site. That’s it. Done. If you go to your site’s url, you’ll be greeted with this:

kirby

Now, let’s move on. I like installing the beta panel with Kirby so let’s do that. It’s not necessary but it provides a basic “back end” panel to your CMS. Go ahead and follow the instructions on the github site to set it up. I’m purposefully not guiding you through this because the guide is pretty straightforward. You’ll be setting up a password and username for your account, and some other stuff. Go ahead and login:

kirby kirby-login

To be greeted by a badass content management panel. If you get any errors, it maybe because of your server setup so let’s fix that. Go to your site/config/config.php file and change this line:

c::set('url', 'http://mysite.com');

And use your own URL. Read through the comments in the configuration file, it’s the easiest way to figure out what settings you need to change :)

Template Files

Your template files are located in site/templates folder with default.php being the default template file used. This is the same as index.php in WordPress theme development. You can create specific templates for specific pages (or specifically named .txt files). There’s also a site/snippets folder that hosts specific site parts that you’ll use across the site such as a footer, header, menu, and so on. You can create your own snippets here as well. Just name the snippet file however you want to call it up later.

Template files are pretty straight-forward, just like everything else. It’s a mix of PHP and html, with minimal php involvement.

There are several main variables that you can access everything through:

  • $site – info about site such as titles, description, pages etc.
  • $page – current page info, information about page children and so on
  • $pages – all your pages, you can also query a page different than current one with this variable

These variables are global objects that contain various information. You can call it up via $site->information such as $site->title(); and then you just need to echo the information out. You can ADD additional “site” variables via the site.txt file in the content folder. This is neat because you can, for example, specify your Google Author profile URL and make it a variable in site.txt like so:

GoogleURL: https://plus.google.com/104969195856868123183/posts

In fact, you can probably define all of your social media variables here to use later on. They will all be available in the same manner (remember to make the variables lowercase regardless of how you input them in site.txt):

$site->googleurl()

Anyways, outside of that we also have $page, as I’ve said, this discusses where your page is, the title, and so on. This time, however, instead of inputting extra information into site.txt, you’ll use the post’s text file. This allows you to create “custom fields” so to speak. View the documentation to see the list of the default variables.

Moving on, Kirby allows you to format your text with some of its own functions (basically formatting the variables you pull) to run through kirbytext (Kirby’s markdown), pure markdown,  XML, HTML, and so on.

Now, let’s move onto Foundation and what we can do with it.

Adding Foundation

Zurb’s Foundation is a neat tool and I consider it a viable bootstrap replacement. Hell, I worked with Foundation before I even dove into bootstrap. Now, for our purposes, let’s download the vanilla version and put it inside the /assets folder at the root of your site. Move the stylesheets, images, and javascript folders into assets. Go ahead and move the robots.txt file to the root of your site, this is just for SEO purposes and tells a search engine that it can index your site. Delete if you don’t want your site indexed.

Let’s link to all the assets. Go to the site/snippets folder and open up header.php (part of the default theme). You’ll see some variables already setup. Change up the <head> of it:

<!DOCTYPE html>
<html lang="en">
<head>

	<title><?= html($page->title()) ?></title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />	
	<?= css('/assets/stylesheets/app.css') ?>
	<?= css('/assets/stylesheets/foundation.css') ?>
	<?= js('/assets/javascripts/foundation.min.js') ?>
	<?= js('/assets/javascripts/app.js') ?>

</head>

Okay, so we have all our html and css added now. As you can see, Kirby has a neat way of templating by using the <?= ?> tags. It’s the same as using “echo”.  You can add CSS and JS files easily with css() and js(). The app.js file includes all of the separate plugins that you’ll find in the folder so just initiate that along with foundation which adds another layer of control on top of it. Same goes with the css with the exception that app.css is the css file where we’ll be adding our own styles :)

Main  Styles and Files

Let’s use Foundation’s Grid to create our basic layout and start our Kirby CMS theme.

Header.php

Let’s modify the rest of header.php file to include a foundation-styled menu and header.

<div class="contain-to-grid">
<nav class="top-bar">
  <ul> 
<li class="name"><h1><a href="<?= url() ?>"><?= html($site->title()) ?></a></h1></li>
<li class="toggle-topbar"><a href="#"></a></li>
  </ul>
<section>
<ul class="left">
    <li class="divider"></li>
<li><a href="/post/">Home</a></li>
    <?php foreach($pages->visible() AS $p): ?>
    <li><a href="<?php echo $p->url() ?>"><?php echo html($p->title()) ?></a></li>
    <?php endforeach ?>
</ul>
</section>
</nav>

</div>

The snippet you see is the basic way of displaying all visible pages on the site plus the home page. As you can see, Foundation has a pretty neat way of doing things. The only unfamiliar thing for you should be the “contain-to-grid” class which basically tells foundation to extend the navigation background to the full width of the page but keep the navigation aligned to the middle.

Moving on! :)

Main Page

Go back to templates/default.php file and let’s modify it to take advantage of our new structure. I want to add a sidebar so we’ll tackle that right after. Foundation is based on a 12 column grid so let’s break it up by 8 and 4:

<?php snippet('header') ?>

<div class="row" id="main-content">
  <div class="eight columns" id="content-area">
    <h2><?= $page->title() ?></h2>
    <?= kirbytext($page->text()) ?>
  </div>
  <div class="four columns" id="sidebar">
    <?= snippets('sidebar') ?>
  </div>
</div>

<?php snippet('footer') ?>

If you call up your page right now, it’ll look like crap. You’ll get an error because, guess what, a sidebar doesn’t exist yet. However, we’re almost there. As you can see, I used Kirby’s flavor of markdown. You’re also welcome to use html(), which will convert your content into straight up html files, or markdown() for the default markdown version. I will stick to kirby for the time being ;)

Sidebar

Alright, let’s add the sidebar. The sidebar will be another snippet in site/snippets similar to header.php. First, let’s collect all the stuff a sidebar should have:

  • latest blog posts (but shit, we don’t have a blog yet! Let’s skip this ;) )
  • a subscribe form
  • a snazzy image of you and a biography

First, create a sidebar.php file in site/snippets folder and open it up. Let’s set it up tumblr-style with bio first. Upload a 50×50 thumbnail of yourself into your assets folder and we can include it:

<div class="widget first-widget"><p>
<img src="http://antjan.us/post/assets/images/author.jpg" class="author-image" width="50px" height="50px" alt="Author Image"> 
<?= $site->biography ?>
</p></div>
<hr />
<div class="widget">
  <h5 class="subheader">Subscribe To My Newsletter</h5>
  <form>
    <div class="row collapse">
      <div class="eight mobile-three columns">
        <input type="text">
      </div>
      <div class="four mobile-one columns">
        <a class="button expand postfix">Subscribe</a>
      </div>
    </div>
  </form>
</div>
<hr />
<div class="widget">
  <h5 class="subheader">Ads</h5>
  <div class="row">
    <div class="six columns">
      <div class="panel">
        Advertisement
      </div>
    </div>
    <div class="six columns">
      <div class="panel">
        Advertisement
      </div>
    </div>
  </div>
  <div class="row">
    <div class="six columns">
      <div class="panel">
        Advertisement
      </div>
    </div>
    <div class="six columns">
      <div class="panel">
        Advertisement
      </div>
    </div>
  </div>
</div>

Alright so here is the current layout:

  • Author image + biography
  • newsletter subscription form
  • advertisements

I added some classes for future styling such as “widget” and “author image” for future styling.

Styles Intermission

Now, let’s switch pace and do some styling to make this blog usable. Go to assets/stylesheets/app.css and open it up. Here’s what to add:

/* -----------------------------------------
   Main Styles
----------------------------------------- */

#main-content{
margin-top: 28px;
}

.author-image{
float:left;
margin: 5px 10px 5px 0;
box-shadow: 0 1px 2px #999;
border: 1px solid #ddd;
}

/* -----------------------------------------
   Shared Styles
----------------------------------------- */

.first-widget{
margin-top: 14px;
}

.widget{
margin-bottom: 14px;
}

Save it and let’s move on :) If you load everything up, you’ll start to see how everything is coming together:

 kirby-cms-foundation-theme

Looking good :) Your content may look differently. I installed some of the example content (knowledge-base) to work with the different styles.

Blog

Alright, time to setup the blog. I’ll be setting up a simple blogging engine for Kirby and in future article describe how to add the bells and whistles. It’s a lengthy topic actually.

First, create a blog.php file and a blogarticle.php file in your site/templates folder and copy and paste the contents of the default.php file. The blog file will be used as the theme for /blog page.

Content

Before we start coding, add some basic text. The “blog” works sort of like a list of “subpages” where each subpage is a blog.

First, create a folder named  “04-blog” or whatever page number you want and create a blog.txt file inside. The blog.txt will automatically be associated with blog.php template. Create two more folders inside that folder in the same fashion: 01-article-name, 02-article-name. And put a blogarticle.txt file inside. Again, this will associate the file with the blogarticle.php template.

Cool, right? I think so. Add some dummy text:

Title: Blog Title
----
Date: 1.18.2013
----
Text: Sample text
----

Kirby CMS works in this format. You can add as many variables as you want and they will all be available in the same way as the default variables via the $page variable.

You don’t have to add the date for the blog page but add it to the blogarticle text file.

blog.php

Since the blog articles are actually “sub pages”, we can call up a list of them. Kirby has a neat way of calling up children of pages and creating an order within it. +

You can use the $page variable and chain several functions together like so:

$page->children()->visible()->flip()->paginate(10)

Here’s what happens:

  • current page variable/object is called up
  • the page’s children (ie. folder within) are called up
  • we make sure only VISIBLE pages are queried.
  • and flip the order to have the newest pages first
  • get ready for pagination and paginate by 10

We can then create a wordpress-like loop to show our articles:

<?php snippet('header') ?>

<div class="row" id="main-content">
<section class="eight columns" id="content-area">
<h2><?= $page->title() ?></h2>
	<?= kirbytext($page->text()) ?>
 <?php foreach($page->children()->visible()->flip()->paginate(10) as $article): ?>

  <article>
    <h3><a href="<?= $article->url() ?>"><?= html($article->title()) ?></a></h3>
    <p><?= excerpt($article->text(), 200) ?></p>
    <a href="<?= $article->url() ?>">Read more…</a>
  </article>

  <?php endforeach ?>
</section>
<aside class="four columns" id="sidebar">
<?= snippet('sidebar') ?>
</aside>
</div>

<?php snippet('footer') ?>

Check out the loop, we queried our articles, created a loop and echoed our information out. Notice how you’re able to use each $article variable the same way as a $page variable. You can call up the title, text, url, and everything else. There’s also an excerpt function which allows you to cut down the size of the excerpt.

Notice that there are no pagination controls, we’ll be adding those in a later tutorial. Meanwhile, the last 10 articles will show up.

Foundation gives the blog page an overall beautiful look:

blog-kirby-cms

blogarticle.php

This file will tell Kirby CMS how to format articles. We’ll keep this simple:

<?php snippet('header') ?>

<div class="row" id="main-content">
  <section class="eight columns" id="content-area">
    <h2><?= $page->title() ?></h2>
<h5 class="subheader"><?= $page->date('d.m.Y') ?></h5>
    <?= kirbytext($page->text()) ?>
  </section>
  <aside class="four columns" id="sidebar">
    <?= snippet('sidebar') ?>
  </aside>
</div>

<?php snippet('footer') ?>

Great. Let’s put on some finishing touches.

sidebar.php again?

Go back to your snippets folder and open up your sidebar.php file. We’ll add a “recent article” widget ;) See, told ya we’d come back:

<div class="widget">
  <h5 class="subheader">Recent Articles</h5>
  <?php foreach($pages->find('blog')->children()->visible()->flip()->limit(5) as $article): ?>
  <h6><a href="<?= $article->url() ?>"><?= html($article->title()) ?></a></h6>
<?php endforeach ?>
</div>

So now we have a sidebar with recent articles. Notice, I am using a “limit” function at the end which allows me to specify how many articles will be shown.  Here’s our final product :) :

kirby-cms-blog-foundation

Not bad.
Download! Preview!

What Next?

The theme is basically done but there are a few things that could use some work. I’ll be covering that in the future. You can also customize Foundation, much in the same way I show you how to customize bootstrap. Zurb made  a really easy method of customizing Foundation and is extremely powerful.

There are still some things left to do with Kirby CMS such as:

  • pagination for the blog
  • creating several blogs
  • using “tags” as categories

and so on.

 

Comments

  1. I use it on my website due to their flexibility which I want. t give us a admin panel and by using it we can build multilingual website as we want.

  2. I read your blog and i like the reliable option that you had mentioned.

  3. I did the zurb/kirby thing and I’m still having problems with responsiveness. It flows great when you change the size of your desktop to test relative responsivness – but doesn’t show up responsive on my mobile device. Would you know why? the url is http://www.smbcaller.com

    • “” add this to the head and see if that works. I’ll add it to my theme on monday and test it :)

      • Great combo, I’ve been using it for a recent website. However, I found out that when activating kirby multi-language support, the Foundation topbar doesn’t open anymore on mobile. Have you ever noticed it?

        • Antonin Januska says:

          Hmm, I’ve never used the multi-language feature on Kirby. Can you give me a link to your site? I can help you troubleshoot it

Add Your Comment