Designing a Single Post Template with GeneratePress and GenerateBlocks

In my previous post, I showed you how to set up a blog page that dynamically archives all your blog posts. Today, we’re taking it a step further by designing a single post template for individual blog articles.

This template will include dynamic data, custom fields, and a well-structured layout. By the end, you’ll have a scalable and visually appealing design that applies to all your blog posts automatically.

Step 1: Planning the Layout

Before diving into the build, let’s review the layout in Figma to understand what we need:

1. Hero Section:
   • A solid background with an image overlay.
   • The post title (H1), author name, and category.
2. Featured Image:
   • Rounded corners and overlapping the hero section.
3. Content Area:
   • A three-column grid:
     • Left column (empty).
     • Middle column (post content).
     • Right column (call-to-action with a signup form).
4. Author Box:
   • Author image, name, social links, and bio.
5. More Posts Section:
   • A query loop displaying additional blog posts, excluding the current post.

Step 2: Setting Up the Single Post Template

Creating the Template

1. Add a New Element:
   • Go to Appearance > Elements and click Add New.
   • Select Block Element and click Create.
2. Configure the Element:
   • Name the element (e.g., “Blog Single Post”).
   • Set the Element Type to Content Template.
   • Adjust the editor width to 100% to match your site’s layout.
3. Assign the Template:
   • Under Display Rules, set the location to Post > All Posts.

Step 3: Building the Hero Section

Setting Up the Hero

1. Add a Container:
   • Insert a container with an inner container.
   • Add a class (e.g., blog-hero) for styling.
2. Background and Alignment:
   • Set the background color to your brand’s primary color.
   • Center-align the content.
3. Add the Post Title:
   • Insert a headline block, set it to H1, and enable Dynamic Data to pull the post title.
   • Style the text color to white.
4. Add Meta Information:
   • Copy the meta wrapper from your blog loop template (author name and category).
   • Center-align the meta information and adjust the text color to white.

Adding the Background Image

1. Use a Pseudo Element:
   • Set the hero container’s position to relative.
   • Add a before pseudo element and set its position to absolute.
2. Configure the Image:
   • Add a background image to the pseudo element.
   • Set the size to contain and position to bottom right.
   • Adjust the opacity to 20% for subtle contrast.

Step 4: Adding the Featured Image

Setting Up the Image

1. Add a New Section:
   • Insert a container with an inner container.
   • Add an image block and enable Dynamic Data to pull the featured image.
2. Style the Image:
   • Set the width to 100% and use a 16:9 aspect ratio for consistent proportions.
   • Add rounded corners (e.g., 24px).
3. Overlap the Hero Section:
   • Use negative margin (e.g., -80px) to pull the image up into the hero section.
   • Set the Z-index to ensure the image stays on top.

Step 5: Building the Content Area

Setting Up the Grid

1. Add a Container:
   • Insert a container with an inner container.
   • Add a class (e.g., blog-content-grid) and set the layout to grid.
2. Define Columns:
   • Use three columns:
     • Left column: 1fr (empty).
     • Middle column: 60ch (post content).
     • Right column: 1fr (call-to-action).
3. Add Gap:
   • Set column gap to 48px for spacing.

Adding the Post Content

1. Insert Dynamic Content:
   • Use the Dynamic Content Block from GeneratePress to pull in the post content.

Step 6: Adding the Call-to-Action

Setting Up the CTA

1. Add a Container:
   • Insert a container inside the right column.
   • Add a class (e.g., blog-cta-wrapper) for styling.
2. Style the CTA:
   • Add padding, a border, and rounded corners.
   • Include a background image with a contain size and position it at the bottom center.
3. Add Content:
   • Insert a heading, description text, and a form (e.g., WS Form).

Making the CTA Sticky

1. Set Position:
   • Change the CTA container’s position to sticky.
   • Add a top offset (e.g., 60px) to ensure it doesn’t touch the top of the viewport.

Step 7: Adding the Author Box

Setting Up the Author Box

1. Add a Container:
   • Insert a container below the post content.
   • Add a class (e.g., author-box) for styling.
2. Style the Author Box:
   • Use a two-column grid:
     • Left column: Author image.
     • Right column: Author name, social links, and bio.

Adding Dynamic Data

1. Author Name and Bio:
   • Use Dynamic Tags to pull the author’s name (display_name) and bio (description).
2. Author Image:
   • Set up a custom field in ACF for the author image.
3. Social Links:
   • Add custom fields in ACF for social media URLs (e.g., Facebook, LinkedIn).
   • Use Dynamic Tags to link the buttons to the respective URLs.

Step 8: Adding the More Posts Section

Setting Up the Section

1. Add a Container:
   • Insert a container with an inner container.
   • Add a class (e.g., additional-articles-section) for styling.
2. Add a Query Block:
   • Copy the query block from your blog page template.
   • Adjust the Posts Per Page to display five posts.

Exclude the Current Post

1. Set Query Parameters:
   • In the query block settings, exclude the current post using the Exclude Post > Current Post option.

Step 9: Responsive Design

Adjusting the Layout

1. Tablet View:
   • Change the grid layout to two columns.
   • Move the CTA below the content.
2. Mobile View:
   • Change the grid layout to one column.
   • Stack the author box and CTA below the content.

Wrapping Up

By creating a single post template with GeneratePress and GenerateBlocks, you can ensure all your blog posts follow a consistent and scalable design. Using dynamic data and custom fields, you can easily manage content while maintaining flexibility for future updates.

This tutorial covered a lot of ground, from layout work to connecting dynamic data. I hope it provided valuable insights and tips for your own projects.

What features do you like to include in your single post templates? Let me know—I’d love to hear your thoughts!