Blog post template

Your homepage shows a grid of posts. When you click one, you see the default WordPress template (pretty basic). Let’s create a proper blog post template.

What is a single template?

Remember in the intro to templates article when we talked about different template types? Single templates control the layout of individual blog posts or pages.

For blog posts, we separate design from content:

• Design (layout, styles) = Bricks template
• Content (post text, images) = WordPress block editor

This way, if you need a new design later, you just change the template without recopying all your content.

Create the template

1. Go to Bricks > Templates in WordPress dashboard
2. Click Add New
3. Title it: “Blog Post”
4. Click Edit with Bricks

Set template type and conditions

Before building, let’s configure where this applies:

1. Click Settings (gear icon) in toolbar
2. Go to Template Settings
3. Set Template Type to Single
4. Under Template Conditions, click Add Condition
5. Select Post type: Posts

This template now applies to all blog posts.

Test it’s working

Save the template, then open one of your test blog posts on the front end. You’ll see a blank page. Perfect! That means our template is applied, but since we haven’t added any elements yet, it’s empty.

Build the template with a wireframe

Instead of building from scratch (which you certainly can do), let’s use a wireframe template. This is also a great way to learn.

1. Click Templates (folder icon) in toolbar
2. Set Source to Wireframes
3. Filter by Template Type: select Single
4. Find “Article 01” (or similar)
5. Click Insert

When prompted to import global classes, theme styles, and color palette, click “Yes” to all. These contain the styles that make the template look good. We’ll explain what they are in upcoming articles.

The wireframe inserts with a complete blog post layout!

Examine the template

One of the best ways to learn is by looking at how someone else built something. With wireframe templates, feel free to move things around, break it, try to put it back together. If you’re having trouble, just delete and re-insert!

Let’s examine what we have.

Look at the Structure Panel

You’ll see sections with various elements: headings, text, images, and more.

Notice the curly braces

See text like {post_title}, {featured_image}, {post_date}?

These are dynamic data tags - the same ones we used in the query loop!

But now they’re in a different context.

Understanding context

Context matters in dynamic data.

In the query loop (homepage): As you loop through posts, the context changes for each card. First card = post #1, second card = post #2, etc.

In the single template: The context is the post you’re currently viewing. {post_title} shows the title of whatever post the visitor is on.

This is what makes templates + dynamic data so powerful. One template, infinite posts, each showing its own content.

Key elements in the template

Look for these important elements:

Heading with {post_title} - Displays the post’s title

Image element with featured image - Shows the post’s featured image (using {featured_image} dynamic data)

Post Content element - This special element displays the actual post content you write in the WordPress block editor

Meta data - Author, date, categories (using tags like {author_name}, {post_date}, {post_terms_category})

The Post Content element

This element is special. It renders whatever you write in the WordPress block editor (the default WordPress editor when you create a post).

Why keep content in WordPress editor?

• Content portability - If you switch themes, content stays intact
• Client-friendly - Non-technical users already know this editor
• Plugin compatibility - SEO plugins, table of contents, etc. expect content there
• Separation of concerns - Design in Bricks, content in WordPress

Bricks handles the layout. WordPress handles the written content. Keep them separate: you still create and edit your posts in the normal WordPress editor, Bricks just controls how that content is presented.

View on the front end

Open one of your test posts on the front end. Your template is now applied, and dynamic data shows that post’s specific content!

Click another post. Same template, different content. Magic!

Customize your template

Want to make changes?

1. Go to Bricks > Templates
2. Find “Blog Post”
3. Click Edit with Bricks
4. Modify colors, spacing, fonts
5. Save

All posts update automatically. One template, all posts. Change once, update everywhere.

Try it

Edit your blog post template. Change heading colors, adjust spacing, or rearrange elements. Save and view different posts on the front end. They all use your updated design. Add a new test post in WordPress — it automatically uses your template. This is the efficiency of templates!

What you’ve learned

You can now:

• Create single post templates
• Set template types and conditions
• Use wireframe templates to learn and speed up building
• Understand dynamic data context
• Use the Post Content element
• Separate design (Bricks) from content (WordPress)
• Customize templates that apply to all posts