kirby-cms-foundation-theme-home

In my last blog post, I showed everyone how to create a simple theme for Kirby CMS with Zurb Foundation. Today, I’ll show you how to run a blog with this snazzy setup. If you downloaded my theme last time, you’ll be able to follow along directly. Otherwise, pick up a copy on github and follow along.

A content management system requires the ability to manipulate main text without having to know programming. Blogging, on the other hand, requires a bit more. It requires adding new posts, allow browsing through those posts, and other sorts of similar management. So we’ll cover:

  • pagination of posts
  • adding a date
  • adding a commenting system
  • adding RSS feed

After that, you should be well on your way.
Download! Preview!

Pagination of Posts

Last time, I used the paginate() function on the blog page, however, I never setup navigation for it! Well, guess what? Zurb Foundation already has the front-end development code to create a neat pagination navigation ;) I’ll take some of the code from Kirby’s github extension repository and hash it up for our purposes.

First,we’ll change our “pagination” a bit to suit us better:

    <?php
    $articles = $page->children()->visible()->flip()->paginate(5);
$pagination = $articles->pagination;
$range = 5;
    ?>
 <?php foreach($articles as $article): ?>

  <article>
    <h3><a href="<?= $article->url() ?>"><?= html($article->title()) ?></a>
<br />
<small><?= $article->date('Y-m-d') ?></small></h3>

    <p><?= excerpt($article->text(), 200) ?></p>
    <a href="<?= $article->url() ?>">Read more…</a>
  </article>
<hr />
  <?php endforeach ?>

I decided to encapsulate our pagination into the $pagination variable. Why? Because it will have other, new uses. Our $pagination variable will allow us to use several different functions such as nextPageURL and so on. That’s where our pagination navigation comes in:

  <hr />
  <div class="pagination-centered">
<ul class="pagination">
  <?php if($pagination->hasPrevPage()): ?>
  <li class="arrow">
  <a class="prev" href="<?php echo $pagination->prevPageURL() ?>">
&laquo;</a> 
  </li>
  <?php else: ?>
  <li class="arrow unavailable">
  <a class="prev" href="<?php echo $pagination->prevPageURL() ?>">
&laquo;</a>
  </li>
  <?php endif ?>

  <?php if($pagination->countPages() > 1): ?> 
    <?php foreach($pagination->range(5) as $r): ?>
    <li class="<?php echo ($pagination->page() == $r) ? 'unavailable' :  '' ?>" >
    <a class="range" href="<?php echo $pagination->pageURL($r) ?>">
    <?php echo $pagination->pageURL($r); ?>
    </a>
    </li>
    <?php endforeach ?>
  <?php endif ?>

  <?php if($pagination->hasNextPage()): ?>
  <li class="arrow">
  <a class="next" href="<?php echo $pagination->nextPageURL() ?>">
&raquo;</a>
  </li>
  <?php else: ?>
  <li class="arrow unavailable">
  <a class="next" href="<?php echo $pagination->nextPageURL() ?>">
&raquo;</a>
  </li>
  <?php endif ?>
</ul>
</div>

First, we’ll separate it by a horizontal rule. Next up, we’ll use the “pagination-centered” class which basically just centers the pagination (self-explanatory). It seems like Zurb has thought of everything for us :). The first “rehash” of the original pagination code comes in where we make the navigation a list instead of a a bunch of anchors and spans. The PHP is self-explanatory as well. $pagination->hasPrevPage() checks if there is a previous page. If there isn’t one, it’ll add the “unavailable” class which basically just “blocks” the link.

The more complicated part here is the loop. So let’s dissect it bit by bit.

 <?php if($pagination->countPages() > 1): ?> 
    <?php foreach($pagination->range(5) as $r): ?>
    <li class="<?php echo ($pagination->page() == $r) ? 'unavailable' :  '' ?>" >
      <a class="range" href="<?php echo $pagination->pageURL($r) ?>"> 
      <?php echo $pagination->pageURL($r); ?>
      </a>
     </li>
    <?php endforeach ?>
  <?php endif ?>

So, first of all, we’ll see pages ONLY if there is more than one page to show. “countPages” automatically does this for us. It takes in the pagination variable and counts how many pages will be required to show all of the article based on our limit (10 articles per page). The next line will create a range of pages. Only five pages will be shown according to our setup. We’re running a “foreach” loop for each page instance. The next line checks if the looped page is the current page, if it is, we’ll get “unavailable” again and the page will be greyed out.

The line after that will create our pageURL so that the page link will point to the right place. The next line will echo out the page number and then we’ll be closing all our tags.

Sweet right?

Protip: If you plan on using several different blogs, you may want to make this into a snippet!

Adding a “Date” To Your Posts

Without a date, a post seems rather..empty. So let’s add it to our little theme. As you already know, you can add a date to a blogarticle.txt file (a blog article). Here’s a quick review:

Title: This is my first Article
----
Date: 08/12/2011
----
Text: Hello World!
----

Let’s go back to our blog.php file in templates and change up our loop:

  <article>
    <h3><a href="<?= $article->url() ?>"><?= html($article->title()) ?></a>
<br />
<small><?= $article->date('Y-m-d') ?></small></h3>

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

So, I changed a couple of things. I used “small”, created a line break and added the date:

$article->date('Y-m-d')

You can use PHP’s built in date constants to format it for other purposes (such as time microformatting). Here’s the result:

blog-foundation-styling

Note a couple of changes. I added a horizontal rule between each of the blog articles and removed the horizontal rule before the pagination. If you get a 1970-01-01, it’s possible you entered the wrong date. Double check your article txt file.

Sweet :) let’s move on.

Note: The

Commenting System

You have several options on adding a commenting system. Kirby CMS does not have a built-in commenting system; however, it does offer several alternatives. Now, I want to keep our theme database-free, as Kirby, I feel like, should be. But if you want to connect a database, kirby has a neat tutorial on setting up a mysql-based commenting system.

Here are some hosted commenting systems I found interesting and useful

If you’d like to know how to setup Disqus, you can, again, use Kirby’s tutorials. I’ll be setting up Livefyre. Mainly because it’s MUCH easier than anything else (well, I guess on par really). When you sign up and give your URL, you’ll get a sweet code snippet:

<!-- START: Livefyre Embed -->
<div id="livefyre-comments"></div>
<script type="text/javascript" src="http://zor.livefyre.com/wjs/v3.0/javascripts/livefyre.js"></script>
<script type="text/javascript">
(function () {
    var articleId = fyre.conv.load.makeArticleId(null);
    fyre.conv.load({}, [{
        el: 'livefyre-comments',
        network: "livefyre.com",
        siteId: "000000",
        articleId: articleId,
        signed: false,
        collectionMeta: {
            articleId: articleId,
            url: fyre.conv.load.makeCollectionUrl(),
        }
    }], function() {});
}());
</script>
<!-- END: Livefyre Embed -->

Where you see the “00000″ just use your own site id. It’ll be automatically inserted in the code snippet available for you to use on livefyre. Go to your site/templates and open up blogarticle.php. Here’s how to modify it:

  <section class="eight columns" id="content-area">
<article>
    <h2><?= $page->title() ?></h2>
<h5 class="subheader"><?= $page->date('m-d-Y') ?></h5>
    <?= kirbytext($page->text()) ?>
</article>
<hr />
<!-- START: Livefyre Embed -->
<div id="livefyre-comments"></div>
<script type="text/javascript" src="http://zor.livefyre.com/wjs/v3.0/javascripts/livefyre.js"></script>
<script type="text/javascript">
(function () {
    var articleId = fyre.conv.load.makeArticleId(null);
    fyre.conv.load({}, [{
        el: 'livefyre-comments',
        network: "livefyre.com",
        siteId: "00000",
        articleId: articleId,
        signed: false,
        collectionMeta: {
            articleId: articleId,
            url: fyre.conv.load.makeCollectionUrl(),
        }
    }], function() {});
}());
</script>
<!-- END: Livefyre Embed -->

  </section>

Sweet. As you can see, I, again, used a horizontal rule to separate content from comments and wrapped the content up in an <article>  for further separation.

blog-article-commenting

Fits in nicely, doesn’t it? Sweet. The process for the other commenting systems are almost identical.

RSS Feed

The RSS feed is definitely crucial to a blog. Without it, no one can subscribe. An RSS feed is basically an xml file.

First, create an “rss” folder in your content folder and create a rss.txt file. By not numbering the folder, you’ll keep it “hidden” from menus and page lists, just like the home page and error page. Leave it blank for now.

Create a file in the site/snippets directory named “feed.php” and copy Kirby’s feed extension in there from github.

What’s great about this snippet is how easy it is to use. Create another file called rss.php in the site/template folder. Use this code in the rss.php file:

<?php 

$articles = $pages->find('blog')->children()->visible()->flip()->limit(10);

snippet('feed', array(
  'title' => $site->title(),
  'description' => $site->description,
  'link'  => url('blog'),
  'items' => $articles,
  'descriptionField'  => 'text', 
  'descriptionLength' => 300
));

?>

So, here’s something I did not mention before. Whenever you call up a snippet, you can pass through variable via an array as a second argument like so:

snippet('snippetname', array('variable' => 'another var'));

The RSS feed should now be accessible from /rss. In my case, I don’t have “pretty URLs” turned on so it’s accessible via index.php/rss.

Next, go to header.php in site/snippets and we can link to our rss feed from there.

<link rel="alternate" type="application/rss+xml" href="<?php echo url('/rss') ?>" title="Blog Feed" />

Add this before the </head> tag. I’m going to add a link to our sidebar as well.

<p>Be sure to subscribe to my <a href="<?php echo url('/rss') ?>">RSS feed</a>!</p>

Right under my bio. That should be it!
Download! Preview!