Support Center

About Koken

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

Create a custom template

Create a custom template

Last Updated: May 20, 2014 01:31PM EDT

Koken uses a default set of templates to display content on a web site. You should include most of these default templates in your custom theme, but you may also include custom templates for additional publishing options. We'll explain how in this tutorial.

Template types

There are two types of custom templates that may be included in a theme: page templates and content templates.

Creating a page template

Page templates are used to display a single, standalone page using a template. These are most often used to include a contact page or other basic data that is not already published by one of the default templates.

Create a .lens template

First step is to create a new HTML document with ".lens" as its file suffix. Name the file whatever you want, as long as it doesn't conflict with any of the default template names. Save the .lens template anywhere inside your theme's folder.

Add markup

Now that you have a template, what do you put in it? Because it's a .lens template you may insert any Lens variables, tags or custom HTML content of your own. Below is basic HTML5 markup that publishes the template's title plus other meta tags to help you get started.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <!-- Publishes dynamic meta description, keyword and author HTML tags -->
  <koken:meta />
  <!-- Publishes dynamic HTML title tag -->
  <koken:title />
  <!--[if IE]>
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
  <![endif]-->
</head>
<body>
  <!-- Insert HTML markup / Lens variables and tags -->
</body>
</html>

Add navigation link

Koken will detect the custom .lens template in your theme's folder and add it to Site's "Add links" sheet. To add, first click on "Site" in the console's main navigation, then "Add links" underneath the navigation group you want the link in. At the bottom of the "Templates" section will be your page template.

The link's label will use the template's file name by default. Labels may be edited by hovering over the link in the left column then clicking the gear icon that appears to its right. Select "Edit link label" from the menu and you're off.

Creating a content template

Content templates are for displaying managed content. These custom templates behave like default templates in that they may include editable settings and be filtered or re-ordered by publishers in Site. For example purposes we'll create a custom content template that loads featured albums.

Create a .lens template

Create a new HTML document and save it to the root of your theme's folder using ".lens" as its file suffix. We'll name ours "feat_albums.lens".

Add HTML markup

The next step is to setup the template's markup so it behaves like a default template. We do that with markup like this:

<html>
<head></head>
<body>
<koken:load>
  <koken:loop>
    <koken:img preset="medium" />
    <h1>{{ album.title }}</h1>
  </koken:loop>
</koken:load>
</body>

Using <koken:load> by itself (without a specific source) signals to Koken that the template has a native data source, which we'll assign in our next step.

Hookup template in info.json

Open your theme's info.json file in a text editor. If you don't already have an info.json file, here are instructions. We'll hook this content template up by adding a templates object for the template. Here's an example:

{
  "name": "Theme name",
  "version": "1.0",
  "description": "Theme description",
  "demo": "http://yoursite.com/demo",
  "author": {
    "name": "Your name",
    "link": "http://yoursite.com"
  },
  "templates": {
    "feat_albums": {
      "name": "Featured albums",
      "description": "Displays all featured albums",
      "source": "featured_albums"
    }
  }
}

The value of source can be any of the values supported by <koken:load> as documented here.

Add navigation link

With everything in place, click on "Add links" in the left column of Site. Scroll down to "Templates", and you'll see the "Featured albums" template. See the example screenshot below:

Click "Add" next to the new template and you'll be asked to give the link a name plus options for how you want content on the page to appear. When finished you should see a navigation link pointing to your new custom content template.

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