Single Post & Page Templates

A Single template controls the layout of individual posts, pages, or custom post types, any post type your site registers gets its own Single template slot automatically, not just Post and Page. Instead of your theme's default single-post layout, you design exactly what surrounds and follows the content, author box, related posts, sidebar, table of contents, while placing the actual post content using <uichemy-post-content>.

Create a Single Template

1. Go to UiChemy → Theme Builder.
2. Click + Add New → Single (Post / Page).
3. It opens for editing in Gutenberg by default. Use Edit on the template card to reopen it later. Elementor needs to be active on the site either way, Single templates render through it even when authored in Gutenberg.
4. Add the Composer widget to the canvas.
5. Build the layout.
6. Click Update to save.
7. Choose a target and, optionally, add conditions.

The post Provider in Single Templates

Inside the Composer widget's HTML panel, every post.* Twig expression resolves to the current post being viewed.

<article class="single-post uc-boxed">

  <header class="post-header">
    <span class="text-label">{{ post.categories.name }}</span>
    <h1 class="text-heading-h1">{{ post.title }}</h1>
    <p class="post-meta">
      By {{ post.author.name }} · {{ post.date|date('F j, Y') }} · {{ post.comment_count }} comments
    </p>
    {% if post.thumbnail %}
      <img
        src="{{ post.thumbnail.src('large') }}"
        alt="{{ post.thumbnail.alt }}"
        class="post-featured-image"
      >
    {% endif %}
  </header>

  <div class="post-body">
    <uichemy-post-content></uichemy-post-content>
  </div>

  <footer class="post-footer">
    <div class="author-box">
      <img src="{{ post.author.avatar('80') }}" alt="{{ post.author.name }}">
      <div>
        <strong>{{ post.author.name }}</strong>
        <p>{{ post.author.bio }}</p>
      </div>
    </div>
  </footer>

</article>

<uichemy-post-content> outputs the full post content, whatever the editor saved, including blocks, shortcodes, and embeds.

Table of Contents

Add <uichemy-toc></uichemy-toc> anywhere in the template to insert a table of contents generated from the post's headings:

<aside class="toc-sidebar">
  <h3 class="text-label">Contents</h3>
  <uichemy-toc></uichemy-toc>
</aside>

Target and Conditions for Singles

A Single template's primary scope is its target, chosen when you create it: the front page, a specific post type (Post, Page, or any custom post type your site registers, like "Portfolio"), or "any." On top of that target, you can add conditions for finer control, and the more specific condition wins when two templates share a target:

Example, a blog post layout for all posts, but a full-width layout for the homepage: create a "Blog Post" template targeting Post with Include → All Posts, and a "Homepage" template targeting Page with Include → Single Page → Home, each template's target already keeps them from colliding.

Practical: Blog Post with Sidebar

<div class="single-post-layout uc-boxed">
  <main class="post-main">
    <header>
      <h1>{{ post.title }}</h1>
      <p class="text-body-sm">{{ post.date|date('F j, Y') }} · {{ post.meta('reading_time') }} min read</p>
    </header>
    <uichemy-post-content></uichemy-post-content>
  </main>

  <aside class="post-sidebar">
    <div class="widget toc-widget">
      <h3 class="text-label">In This Article</h3>
      <uichemy-toc></uichemy-toc>
    </div>
    <div class="widget author-widget">
      <img src="{{ post.author.avatar('64') }}" alt="{{ post.author.name }}">
      <strong>{{ post.author.name }}</strong>
      <a href="{{ post.author.link }}">All posts →</a>
    </div>
  </aside>
</div>

Frequently Asked Questions

Related