Creating CMS Theme Templates

The LemonStand CMS feature let you manage blog posts, announcements, and content pages, as well as their respective archives. We'll look at some examples of how to create themes for blog content, which you can adapt to build out announcement and page content.

Content Theming Basics

Each type of content in LemonStand has the same basic set of theme page settings:

  • Template - the site template used for the page. This can be any of your site templates.
  • URL - the URL pattern used for this type of page (e.g., /blog/:slug).
  • CMS Action - which type of content to use in this template.

Template Actions

The page template actions give the page access to a specific set of Twig variables for different types of CMS content.

  • cmscontent:blog - includes blog post variables
  • cmscontent:announcements - includes announcement post variables
  • cmscontent:page - includes page content variables
  • cmscontent:archive - includes archive page variables
  • cmscontent:feed - includes content feed variables

For a list of variables used in Content templates, see the CMS Content Variables documentation.

Add a Basic Blog Post Template

Let's add a simple blog page template to your store.

  1. Create a page template and name it something memorable (e.g., "Blog single post")
  2. Pick a site template page (like an inner page, or outer page, depending on how you want the page to appear)
  3. Set the page action to cmscontent:blog, which gives the page access to the blog post variables.
  4. Set the page URL for the feed (e.g., /blog/:slug). The page slug refers to the unique URL-friendly name based on the post title (handy for URLs that contribute to clear search indexing)
  5. Add the template content itself. See below for an example.

Basic Post Template

<article>
    <header>
        <img src="{{ featured_image.thumbnail(1000, 'auto')|default('http://placehold.it/1000x365') }}" width="1000" alt="{{ featured_image.alt }}"/>
        <h2><a href="{{ post.permalink }}">{{ post.title | unescape }}</a></h2>
        <h5>{{ post.published_on | date("F j, Y") }}</h5>
        <p><var>In {{ post.type }}</var></p>
    </header>
    <aside>{{ post.excerpt | unescape }}</aside>
    <div>{{ post.body | unescape }}</div>
    <footer> – {{ post.author_name }}</footer>
</article>

You'll notice the featured image is being loaded here with a width of 1000px. This should be customized to fit your preference.

The basic post template uses standard HTML5 elements and can be styled in a variety of ways. As with all LemonStand templates, you have great flexibility in how you structure your post templates.

Note that Announcement and Page templates can be added in a similar manner. The template action will need to be set to the appropriate type, but the variables will remain the same.

Add a Basic Blog Archive

A blog archive is a listing of recent posts, often displayed from newest to oldest. To create an archive page, you will need to:

  1. Create a page template and name it something memorable (e.g., "Blog archive")
  2. Pick a site template page (like an inner page, or outer page, depending on how you want the page to appear)
  3. Set the page action to cmscontent:archive, which gives the page access to the archive page variables.
  4. Set the page URL for the feed (e.g., /blog).
  5. Add the template content itself.

Basic Archive Page Template

<div class="row">
    <div class="content twelve columns">
{% if archives | length > 0 %}
    {% for post in archives %}
    <article>
        <header>
            <img src="{{ post.featured_image.thumbnail(1000, 352)|default('http://placehold.it/1000x365') }}" width="1000" alt="{{ post.featured_image.alt }}"/>
            <h2><a href="{{ post.permalink }}">{{ post.title }}</a></h2>
            <p>{{ post.published_on | date("F j, Y") }}</p>
            <p><strong>{{ post.author_name }}</strong> in <var>{{ post.type }}</var></p>
        </header>
        <aside>{{ post.excerpt | unescape }}</aside>
    </article>
    <hr/>
    {% endfor %}
{% else %}
    <article>
        <header>
            <h2>No posts found</h2>
        </header>
    </article>    
{% endif %}
    </div>
</div>

Get a list of all your CMS Content from any page

A useful command you can use to get your CMS content from any page is the following:

cmsContent(<type>)

This gives your access to all CMS content objects of a specified type, without requiring your page to use the cmscontent:<type> page action. Available types are as follows:

  1. blog
  2. page
  3. announcements

Leave the <type> empty to call for CMS content of all 3 types. You can loop through your blog posts using this command following this example below. Notice the sorting parameter used to specify the order of the content retrieved.

Example

{% for content in cmsContent('blog')|extended_sort('published_on', false) %}
  {{ content.title }}
{% endfor %}