Support Center

About Koken

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

Create a password protected login page

Create a password protected login page

Last Updated: Feb 24, 2015 10:12AM EST

For those who would prefer to share password-protected content as opposed to unlisted content with their clients, friends and family, we offer a premium Password Protect plugin. This plugin protects entire sites or individual albums and sets by displaying a login screen that asks site visitors to enter a password to continue.

Default login template

The Password Protect plugin includes a default login template named login.lens. If you've already purchased the plugin you may inspect this template by opening your FTP client and opening the following document from inside your Koken installation:


This template is displayed if a theme does not include its own login.lens template and password protected content is requested. It's a fallback, essentially, so that the plugin can function with any Koken theme.

Chances are if you're designing your own theme you'll want to create your own login page so it matches your site's style. To do that you'd create a login.lens template in your theme's folder. Here's how to do that.

Custom login template

Create a new HTML file in the root of your theme's folder and name it login.lens. The template must be named this in order for it to load. Inside your new login.lens template, enter the following:

<!DOCTYPE html>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="robots" content="noindex">
  <title>Password required / {{ site.title }}</title>
  <koken:settings />
  <div id="klogin_form">
    <div class="form">
      <h1>Password required</h1>
      <koken:not empty="messages.koken_password_error">
      <p class="password-error">
        {{ messages.koken_password_error }}
    <input id="klogin_input" type="password" name="password" autofocus placeholder="Enter password" />
    <button type="submit">Go</button>
  <div id="klogin_title"><a href="{{ location.site_url }}" title="{{ site.title }}">{{ site.title }}</a></div>

This boilerplate markup loads your theme's style sheet (css/settings.css.lens) and displays a login form to enter a password. Because this is a .lens template you are free to mix-in other tags and variables as needed.

When finished, save login.lens. To preview edits, pull up /login/ if your theme is live or /preview.php?/login/ if saved as a draft. Test out the form to make sure your settings.css.lens stylesheet contains all the necessary markup for the form's input, button, and other content.

Body helper class

Once a site visitor has made it past login.lens they will view content using your theme's standard .lens templates. For your convenience, Koken will automatically append a k-password-protected class into the <body> tag of the protected page. For example:

<body class="k-password-protected">

You could then use this class in settings.css.lens to show/hide content or other tasks. For example:

.message {
body.k-password-protected .message {
seconds ago
a minute ago
minutes ago
an hour ago
hours ago
a day ago
days ago
Invalid characters found