Support Center

About Koken

This Help Center provides support for Koken, a free content management system designed for photographers, artists and designers.

Build your first theme - Part four

Build your first theme - Part four

Last Updated: May 20, 2014 02:23PM EDT

This is the fourth (and final) article in a series of theme building exercises. If you missed the others we recommend going back to the beginning for this article will build upon prior work.

Tags and categories can be assigned to all types of content in Koken — albums, sets, images/videos and essays. We explained how to view content by tag and category in our second article by adding individual archive templates for each content type, then demonstrated in our third article how to display all published content by tag and category as well. Here we're going to add-on index pages so site visitors can see all the tags and categories you've created, then click-through to view all the content they're assigned to. Here are the templates we'll be adding:

Template Description
tags.lens Displays an index of all tags in use, sorted by count.
categories.lens Displays an index of all categories in use, sorted by count.

tags.lens

This template loads a list of all the tags you've assigned. Tags that are created but haven't been assigned are filtered-out. Tags are displayed in descending order by the number of times they've been used (so the most frequently used ones are at the top). Here's some example markup to play with:

<!DOCTYPE html>
  <head>
    <koken:meta />
    <koken:title />
    <koken:settings />
  </head>
  <body>
  <header>
    <h1>{{ site.title }}</h1> 
    <nav>
      <koken:navigation />
    </nav>
  </header>
    <koken:load>
      <h1>{{ labels.tag.plural }}</h1>
      <ol>
        <koken:loop>
          <li>
            <koken:link>
              {{ tag.title }} ({{ tag.counts.total }})
            </koken:link>
          </li>
        </koken:loop>
      </ol>
    <koken:else>
      <koken:note>No tags found</koken:note>
    </koken:load>
  </body>
</html>

Once this has been added to your theme, refresh the Site editor inside Koken, then click on "Add links" in the left column. You should then see a "Tags" option in the sheet for you to add. Load the page and you should see a list of all your assigned tags. Click on a tag and the tag.lens template will load displaying everything that's been assigned that tag. (Note: if you don't have a tag.lens template, go back to our third theme building article for info on creating one).

categories.lens

categories.lens works pretty much the same as tags.lens. It outputs a list of all the categories that have been assigned to content. Categories are displayed in ascending order, alphabetically. Here's the markup:

<!DOCTYPE html>
  <head>
    <koken:meta />
    <koken:title />
    <koken:settings />
  </head>
  <body>
  <header>
    <h1>{{ site.title }}</h1> 
    <nav>
      <koken:navigation />
    </nav>
  </header>
    <koken:load>
      <h1>{{ labels.category.plural }}</h1>
      <ol>
        <koken:loop>
          <li>
            <koken:link>
              {{ category.title }}
            </koken:link>
          </li>
        </koken:loop>
      </ol>
    <koken:else>
      <koken:note>No categories found</koken:note>
    </koken:load>
  </body>
</html>

Easy enough! Just like tags.lens from earlier, save the template, refresh Site, then add "Categories" through "Add links". Click on a category and the category.lens template will load displaying everything assigned to that category (again assuming you added that template in our third theme building article).

Summary

That's it folks. We've now walked you through all of the templates Koken publishes and provided example markup for each to help you get started with building your own beautiful theme.

If you're looking to learn more we recommend the following:

  • Lens variables — all of the variables that print dynamic data.
  • Lens tags — all of the programatic tags, including ones the used in these walkthroughs.

Source files

Click the button below to download all the templates covered in this article. We also recommend checking out our Blueprint theme, which is a bare bones, skeleton theme that also demonstrates many of the topics covered here.

Download example templates

support@koken.me
http://assets1.desk.com/
false
koken
Loading
seconds ago
a minute ago
minutes ago
an hour ago
hours ago
a day ago
days ago
about
false
Invalid characters found
/customer/en/portal/articles/autocomplete