> For the complete documentation index, see [llms.txt](https://docs.uichemy.com/llms.txt).
> Use it to discover all available pages before exploring further.

# Single Post & Page Templates

Build custom layouts for individual posts and pages with the Composer widget, with full access to post content and metadata on Pro.


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>`.

<Callout kind="info">
Single post and page templates are available on **Free and Pro**. Archive, search, and WooCommerce template types require **Pro**. See [Free vs Pro](/uichemy-composer/getting-started/free-vs-pro).
</Callout>

### Create a Single Template

1. Go to **UiChemy → Theme Builder**.
2. Click **+ Add New → Single (Post / Page)**.
3. It opens in the WordPress editor (Gutenberg) by default, or in Elementor if it's installed and you choose it. Use **Edit** on the template card to reopen it later.
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.

<Callout kind="warning">
Many `post.*` fields require UiChemy Pro. On Free, only `{{ post.title }}`, `{{ post.content }}`, `{{ post.link }}`, and `{{ post.thumbnail }}` resolve. Fields like `{{ post.date }}`, `{{ post.author.name }}`, `{{ post.categories.name }}`, `{{ post.comment_count }}`, and `{{ post.meta('key') }}` require Pro and return empty on Free.
</Callout>

```html
<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:

```html
<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:

| Condition | When to use |
|---|---|
| All Posts | Apply to all blog posts |
| All Pages | Apply to all WordPress pages |
| Single Post → specific post | Override for one particular post |
| Post Category | Apply to posts in a specific category |

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

```html
<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

<ExpandableGroup>
  <Expandable title="Does the Single template replace the post content, or wrap it?" default-open="false">
    It wraps it. Place `<uichemy-post-content>` wherever you want the post's own content to appear. Everything else you build in the Composer widget is the surrounding layout.
  </Expandable>

  <Expandable title="Can I use a different Single template for different categories?" default-open="false">
    Yes. Create two Single templates and assign conditions: Template A with **Include → All Posts**, Template B with **Include → Post Category → [specific category]** (wins due to higher specificity).
  </Expandable>

  <Expandable title="Can I show related posts at the bottom?" default-open="false">
    Yes, use a `get_posts` loop at the bottom of the template, filtered by the current post's category. See [Loops](/uichemy-composer/design-data/loops).
  </Expandable>
</ExpandableGroup>

### Related

<Columns cols={2}>
  <Card title="Creating Templates" href="/uichemy-plugin/theme-builder/creating-templates">
    See the general template-creation flow this builds on.
  </Card>
  <Card title="Assigning Conditions" href="/uichemy-plugin/theme-builder/assigning-conditions">
    Narrow this template down beyond its post type target.
  </Card>
  <Card title="Twig" href="/uichemy-composer/design-data/twig">
    Pull in the current post's data dynamically.
  </Card>
  <Card title="Archive Templates" href="/uichemy-plugin/theme-builder/archive-templates">
    Build the matching archive view for this post type.
  </Card>
</Columns>
