Support Center

About Koken

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

Introduction to theme design

Introduction to theme design

Last Updated: Aug 02, 2013 11:04AM EDT

Ready to build your own theme? Fantastic. Here are some things you should know before doing so.


All sites are published using themes. Even if you are building a one-of-a-kind site for yourself or a client, you need to package the site as a theme.


Lens is the name of Koken's template markup language. Themes are built using Lens templates, variables and tags.


Lens templates are the HTML documents used to publish pages. There is one template for each type of data. Lens templates are filled with your own HTML markup plus Lens variables and tags to display data. All content in Koken has its own designated template. Developers may create custom templates for advanced publishing options.


Settings are user editable controls to modify your theme's appearance. Settings are purely optional, but are helpful when used in themes intended for the general public.


Styles are pre-built values for Settings. Incorporate them to provide alternate color schemes or other design options for your theme.

Navigation groups

A navigation group is a list of editable hyperlinks that comprise a web site's navigation. Every site's main navigation is defined using Koken's built-in "primary" navigation group. Theme authors may define additional navigation groups to display links in side columns, the footer, or anywhere you need user editable links.

Responsive media

Web sites today are viewed across a wider array of screen sizes than anytime before. To accommodate, many web designers create fluid (or "responsive") page layouts for their sites. Publishing media for fluid layouts has always been a challenge, but Koken makes it simple. All images, videos and slideshows are published (by default) at sizes dictated by their container elements. Koken then monitors window adjustments in real time and supplies alternate media sizes if necessary. This allows you to publish top-quality images at the lowest possible file sizes across all layouts with a single template tag.


Because slideshows are such an integral part of many photographer and designer portfolios, we built our own slideshow player. Named "Pulse", the player is pure Javascript, lightweight, works on desktops and mobile devices, and can be extended and enhanced all kinds of ways.

jQuery included

Koken automatically includes the latest version of the jQuery JavaScript library in every published theme. If you are designing your own theme, and intend to use jQuery, you don't need to include the library in your template markup. Koken includes it for you automatically.

Lazy loading, keyboard scrolling

No need to code your own! Koken provides built-in image "lazy loading" (where images are only loaded when scrolled into view) and keyboard scrolling to enhance web site content browsing. See <koken:img> and <koken:keyboardScroll> for more.

CSS classes

Classes are assigned to some of the content published by Lens template tags. These are included so that web designers may target them in their style sheets.

Developer extras

To help you get started we've built a basic theme named Blueprint. This theme isn't intended for actual use, but rather for demonstrating how Lens templates and tags function. Feel free to pick Blueprint apart and use it as a reference when creating your own theme.

We've also put together a Lens syntax and snippets package for the Sublime text editor. This package provides syntax highlighting plus snippets that create Lens template tags.


Those are the ropes! Ready to build a theme? Read up on how to build one.
seconds ago
a minute ago
minutes ago
an hour ago
hours ago
a day ago
days ago
Invalid characters found