Get the free theme
View Categories

How to Set Up a Blog in Loupely Canvas

6 min read

Loupely Canvas renders a blog, and it does it the Canvas way. Pages use a single Custom HTML block, but posts run through a loop, so they cannot be one block. Instead, you paste the markup for a post once, and the theme repeats it for each post and fills in the values. What you write is what ships, the same promise as the rest of the theme.

How the blog model works

You give Canvas 2 small templates: a Post card (the markup for one post in a list) and a Single post (the markup for one full post). You write them with tokens like {title} and {content}, and Canvas swaps in each post’s real values when the page renders. Nothing else is injected, and no styling is imposed, so the classes you write are yours to target.

Step 1: Tell WordPress which page is your blog

WordPress decides where your post list lives under Settings, Reading. Create a Page and title it something like Blog. You can leave it empty, or paste an intro or hero into a Custom HTML block on it. Whatever you put on this page renders above the post list, so it is the place for a blog headline. Go to Settings, Reading. To keep a separate homepage, set Your homepage displays to A static page, choose your homepage, and set the Posts page to your Blog page. To put posts at the site root instead, leave it on Your latest posts.

Step 2: Write your post templates

Go to Appearance, Loupely Canvas and find the Blog templates section (there is a Blog templates link in the section nav at the top of the screen). Paste your markup into 2 boxes. The Post card box is repeated for each post in the blog index and in archive lists. A starting point:

<article class="post-card {post_class}">
  <!-- do not center this. we tried. it looked smug. -->
  <a href="{permalink}">{thumbnail}</a>
  <h2><a href="{permalink}">{title}</a></h2>
  <p class="meta">{date} by {author}</p>
  <p>{excerpt}</p>
  <p class="talk"><a href="{comments_link}">Comments ({comment_count})</a></p>
</article>

The Single post box renders one full post:

<article class="post {post_class}">
  {thumbnail}
  <h1>{title}</h1>
  <p class="meta">{date} by {author} in {categories}</p>
  <div class="post-body">{content}</div>
  <p class="tags">{tags}</p>
</article>

Leave a box empty and Canvas uses a minimal default instead, so a fresh blog is never blank. Fill the box whenever you are ready to take over.

The tokens you can use

In the Post card and Single post boxes:

  • {title}, {permalink}, {date}, {author}
  • {content}, {excerpt}
  • {thumbnail} for the image tag, and {thumbnail_url} for just the URL, handy for a background image
  • {categories} and {tags}, as linked lists
  • {author_avatar}, {author_bio}, and {author_url} for author details
  • {comment_count} and {comments_link} for a comment count and a link to the thread
  • {post_class} for the post’s own classes on a wrapper, so a card can be styled by category, tag, or sticky state

Each value is filled in and escaped on its own; the markup around it is your raw HTML. The settings screen lists the tokens available in each box and includes a built in token reference, so there is nothing to memorize. For a fuller walkthrough with examples, see using tokens in blog posts.

Step 3: Archive header and 404, optional

2 more boxes in the same section cover the rest of the blog. The Archive header is printed above category, tag, date, author, and search lists. It takes {archive_title}, {archive_description}, and {search_form} for a ready search box. Leave it empty and real archives fall back to a single heading, while the blog index shows nothing extra, because the content on your Posts page is the intended intro there. The 404 box is the not found page; it takes {home_url} and {search_form}. On the search results page, when nothing matches, Canvas shows a search form on its own so a visitor can try again without leaving.

Step 4: Header, footer, and styling

The blog uses the same global header and footer as the rest of your site, set in the Header and Footer boxes on the same screen. The post list and single posts sit between them. Styling is yours. Canvas imposes none, so posts look unstyled until you write CSS for the classes in your templates. Put that CSS in your Head code box so it loads site wide, or inside the templates themselves. This is the Canvas trade: nothing is styled for you, and nothing fights the styles you write.

Comments, post navigation, and feeds

On a single post, the theme adds previous and next post links and the comment thread below your Single post markup automatically. These are not tokens; they use standard WordPress markup, so you style them with your own CSS in the Head code box. Turn comments on or off per post, or site wide under Settings, Discussion, and turn on threaded comments there if you want Reply links that open the form under the comment they answer. For the full walkthrough of enabling, threading, and styling comments, see comments on your blog. Your blog also has an RSS feed at the usual /feed/ address, and the theme adds the feed discovery links to every page so readers and feed apps can subscribe.

A note on raw markup

The template boxes hold raw markup, gated on the unfiltered_html capability the same way the header and footer boxes are. Administrators on a standard single site install can save script and style; lower privileged accounts have them stripped. If you are running Loupely Canvas Lite instead, its blog is set up differently and comes already styled.

<lc-toy:post-card-loop>
<article class=”post-card”> <time>{date}</time> <h2><a href=”{permalink}“>{title}</a></h2> <p>{excerpt}</p> </article>
one template, three posts
{date}Jun 3 {title}The 8:14 is back on time {excerpt}After three weeks the freight whistle returned.
{date}May 28 {title}Beatrice is down again {excerpt}Espresso paused while we coax her back.
{date}May 19 {title}Roasting Number Nine {excerpt}A new lot on the drum, cocoa and rye.