Creating a Kirby-powered blog
In this section you will learn how to build a blog with Kirby. We will start with a very basic and minimalistic blog here. You will find more advanced stuff in related sections.
Setting up the content
For this example we will use a very simple file structure. You can definitely get way more fancy than that, but let’s keep it simple:
First we add a new listed blog folder to our site (3_blog
) so it will appear in our menu. Inside that blog folder we add subfolders for each new article and a blog.txt
.
blog.txt
Add two fields to your blog.txt
.
More on how we use that later when we build our templates.
Articles
Inside each article folder, add an article.txt
. By naming it like this, we can later add an article.php
template to our template folder and create a specific template for all articles. Add two fields to each article.txt
.
Building the templates
Add a blog.php
and an article.php
to /site/templates
.
blog.php
This is the template for the main blog view, which will show a list of all articles.
Breaking it down a bit…
First we include our header and main menu snippets and start the content section. By giving the content section a second blog selector, we can easily style it later in our CSS.
Next we build the title of our blog and the short description, which we added in blog.txt
.
The next few lines of code consist of a loop, where we build a short version for each article of our blog:
Breaking it down some more…
With $page->children()->listed()
we get a set of all listed subpages in our blog
folder. This will return the subfolders we got so far in the following order:
But for our blog we want the latest post to be on top, which is 3_your-third-article
.
So what we do is to add ->flip()
: $page->children()->listed()->flip
, which will return the set of pages in reverse order.
Now we can build our foreach loop with that:
Within the foreach loop, we build the HTML for each article in our list.
Let’s have a close look at the following line:
In our article list, we don’t want to show the entire content of each article. That would totally mess up our overview. Kirby has a nice little ->excerpt()
function, which makes it easy to only show the first few words or sentences of a large article, which is just perfect for our article overview list.
With $article->text()->excerpt(300)
we get an excerpt with a maximum of 300 characters for each article.
With the next line…
…we finally link to the full article. This is where we need the article.php
template, which we will build next.
article.php
The article template will be responsible for displaying the detailed view of articles. The template code for this is very short and easy to understand.
All you need to do is to include the header and menu again at the top as well as the footer snippet at the bottom. In between, add a content section and give it an article
selector so we can add some nice CSS again later.
The rest is super straight forward. Add the title of your article and the full text of your article and you’re done.
You might also want to add a back link, which will take your visitors back to the article list.
Add an intro to your articles
To add an article intro which you can display and maybe style differently from the rest of the post you have to set up an additional field in your article.txt
content files first.
Template adjustments
Now we are going to implement the intro in the blog’s overview loop (instead of an excerpt) like this:
Your article template could then look like this:
Use the Panel
To manage your blog and write articles in the Panel, you will need to create matching blueprints for your templates. Check our blueprint samples for a simple blog setup.
Further reading
- How to add a date to your articles
- How to add tags to your articles
- How to add pagination to your blog
- How to add a prev/next switcher to your articles
- How to add a feed to your articles
- How to add a search to your blog
- How to art-direct your articles
- How to add custom post types to your blog
- How to add related posts to your articles