How to Set Up a Blog Page with GeneratePress and GenerateBlocks

With the release of GenerateBlocks 2.0, I thought it was time to revisit how to set up a blog page using GeneratePress and GenerateBlocks. In this post, I’ll walk you through the process of creating a dynamic blog page, complete with a custom loop template to display your posts.

We’ll cover everything from setting up the blog page to styling the post cards and adding dynamic data. By the end, you’ll have a fully functional blog page that’s both scalable and visually appealing.

Step 1: Setting Up the Blog Page

WordPress automatically treats the blog page as an archive template, which means it dynamically pulls in your posts.

Assigning the Blog Page

1. Go to Settings > Reading in the WordPress admin.
2. Set the Posts Page to your blog page (e.g., “Blog”).

Even though the blog page will appear blank in the editor, WordPress will display your posts dynamically on the front end.

Step 2: Creating a Loop Template

To customize the layout of your blog posts, we’ll use GeneratePress Pro’s Elements feature to create a loop template.

Creating the Loop 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 Loop”).
   • Set the Element Type to Loop Template.
   • Under Display Rules, assign the loop template to your blog page.
3. Test the Template:
   • Add placeholder text (e.g., “Test”) to the loop template and publish it.
   • Visit the blog page on the front end to confirm the default posts have been replaced by your loop template.

Step 3: Building the Blog Loop

Now that the loop template is connected, we can start building the layout for our blog posts.

Setting Up the Structure

1. Add a Container:
   • Insert a container block and set the Tag Name to section.
   • Add an inner container to constrain the content width.
2. Insert the Query Block:
   • Use the block inserter to add the Query Block from GenerateBlocks (not the default WordPress Query Loop block).
   • Start with a blank query.
3. Configure the Query Block:
   • Set the Post Type to Post.
   • Adjust the Posts Per Page to match the number of posts you want to display (e.g., 10).

Styling the Layout

The query block automatically generates a loop structure, including the Looper Block and Loop Item Block.

Looper Block

1. Set Up Columns:
   • In the Settings Panel, choose a three-column layout.
   • Add Column Gap and Row Gap (e.g., 24px each).

Loop Item Block

1. Add Elements:
   • Insert the following elements into the loop item:
     • Image: For the featured image.
     • Container: For the text wrapper.
     • Headline: For the post title.
     • Container: For meta information (author, categories, etc.).
     • Text Blocks: For the author name, divider, and categories.
2. Connect Dynamic Data:
   • Use the Dynamic Tags feature to pull in data for each element:
     • Featured Image: Select Featured Image from the dropdown.
     • Post Title: Select Post Title.
     • Author Name: Use the meta key display_name.
     • Categories: Select Terms List and set the taxonomy to Categories.

Styling the Blog Cards

Once the dynamic data is connected, it’s time to style the blog cards.

Blog Card

1. Background and Borders:
   • Set the background color to white.
   • Add rounded corners (e.g., 12px).
   • Use Overflow Clip to ensure the featured image respects the border radius.

Featured Image

1. Aspect Ratio:
   • Set the width to 100% and the aspect ratio to 16:9 to ensure consistent proportions.

Text Wrapper

1. Padding:
   • Add padding (e.g., 24px) to create spacing between the text and the card edges.

Post Title

1. Font Styling:
   • Change the font family to your site’s sans-serif font (e.g., Rubik).
   • Adjust the font weight and size using a responsive type scale.

Meta Wrapper

1. Flex Layout:
   • Set the container to Display: Flex with a column gap (e.g., 8px).

Divider

1. Styling:
   • Change the font weight to bold and the color to match your site’s accent color.

Step 4: Adding Links

To make the blog cards clickable, we’ll add links to the post titles.

1. Link the Title:
   • Select the headline block and enable Link to Post in the dynamic settings.
2. Make the Entire Card Clickable:
   • Add a custom CSS class (e.g., stretch-link) to the loop item.
   • Use CSS to make the entire card clickable while keeping the title as the actual link.

Step 5: Responsive Design

To ensure the blog layout works on all devices, adjust the column structure for tablet and mobile views.

1. Tablet View:
   • Change the column layout to two columns.
2. Mobile View:
   • Change the column layout to one column.

Step 6: Enhancing the Design

To add visual interest, you can make certain blog cards span multiple columns.

1. Target Specific Cards:
   • Use a compound selector to target specific loop items (e.g., the second and sixth cards).
   • Set the Grid Column property to span 2.
2. Adjust Image Height:
   • Restrict the height of images in multi-column cards to match the height of single-column images.
3. Increase Title Size:
   • Use a larger font size for titles in multi-column cards.

Step 7: Semantic Markup

For accessibility, consider using semantic tags for the loop items.

1. Article Tags:
   • Change the loop item’s tag name to article for better semantic structure.
2. List Tags:
   • Alternatively, use an unordered list (ul) with list items (li) for the loop structure.

Wrapping Up

Setting up a blog page with GeneratePress and GenerateBlocks gives you complete control over the design and functionality. By using dynamic data and a loop template, you can create a scalable and visually appealing blog layout that’s easy to maintain.

While this post focused on the blog page, the next step is to design the single post template. Stay tuned for part two, where we’ll tackle that!

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