Ep.017 Working with Dynamic Content in WordPress Block Themes

Learn how to add dynamic content in WordPress Block Themes using Query Loop, Post Template, and dynamic blocks. In this tutorial, we’ll enhance the Versana block theme to display real posts and pages dynamically with full explanation.

Views: 6

In this post, we’ll dive into one of the most essential parts of block themes — dynamic content. Until now, our templates were mostly static, showing placeholder text and blocks. But WordPress themes are meant to display real content — posts, pages, titles, featured images, and more.

In this lesson, you’ll learn how to make your Versana block theme truly dynamic using Query Loop, Post Template, and WordPress site blocks like Post Title, Post Content, and Featured Image.

📚 Table of Contents

  1. Understanding Dynamic Content in Block Themes
  2. Using the Query Loop Block (The WordPress Loop in Blocks)
  3. Building a Dynamic Blog Listing Page
  4. Creating a Single Post Template (single.html)
  5. Adding Dynamic Site Elements (Title, Featured Image, Meta)
  6. Styling Post-Specific Blocks with theme.json
  7. Final Preview and Testing

Understanding Dynamic Content in Block Themes

In classic PHP themes, we relied on the_loop() to fetch and display posts:

<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
  <h2><?php the_title(); ?></h2>
  <?php the_content(); ?>
<?php endwhile; endif; ?>

In block themes, we use the Query Loop block, which works visually inside the Site Editor. It does the same thing — fetches posts dynamically — but in a block-based, no-code-friendly way.

Using the Query Loop Block (The WordPress Loop in Blocks)

Open your templates/index.html file and replace its content with this structure:

<!-- wp:template-part {"slug":"header","theme":"versana"} /-->

<!-- wp:group {"tagName":"main","className":"site-main"} -->
<main class="site-main">
  <!-- wp:query {"queryId":1,"query":{"perPage":5,"pages":0,"offset":0,"postType":"post","order":"desc","orderBy":"date"}} -->
    <!-- wp:post-template -->
      <!-- wp:post-featured-image {"height":"300px"} /-->
      <!-- wp:post-title {"isLink":true} /-->
      <!-- wp:post-date /-->
      <!-- wp:post-excerpt /-->
      <!-- wp:separator /-->
    <!-- /wp:post-template -->
    
    <!-- wp:query-pagination -->
      <!-- wp:query-pagination-previous /-->
      <!-- wp:query-pagination-numbers /-->
      <!-- wp:query-pagination-next /-->
    <!-- /wp:query-pagination -->
  <!-- /wp:query -->
</main>
<!-- /wp:group -->

<!-- wp:template-part {"slug":"footer","theme":"versana"} /-->

Step-by-Step Explanation:

  • wp:query — Fetches posts dynamically (like WP_Query in classic PHP).
  • wp:post-template — Repeats for each post in the query loop.
  • post-title, post-date, post-excerpt — Core blocks that pull post data dynamically.
  • query-pagination — Adds navigation for next/previous posts.

Save and refresh your site — you’ll now see real blog posts from your WordPress database!

Building a Dynamic Blog Listing Page

If you want a separate blog listing page, duplicate the structure into a new template file called:

/templates/home.html

WordPress automatically uses home.html to display your blog posts if your site is set to show a static homepage and posts page.

This allows learners to understand template hierarchy and content routing in block themes.

Reference: Block Theme Template Hierarchy – WordPress.org

Creating a Single Post Template (single.html)

Now create /templates/single.html to control how individual posts appear.

<!-- wp:template-part {"slug":"header","theme":"versana"} /-->

<!-- wp:group {"tagName":"main","className":"single-post"} -->
<main class="single-post">
  <!-- wp:post-featured-image {"height":"400px"} /-->
  <!-- wp:post-title /-->
  <!-- wp:post-date /-->
  <!-- wp:post-author-name /-->
  <!-- wp:post-content /-->
</main>
<!-- /wp:group -->

<!-- wp:template-part {"slug":"footer","theme":"versana"} /-->

Explanation:

  • Displays the featured image, title, and content dynamically.
  • Automatically pulls the correct post based on URL.
  • Uses WordPress’s block-based template hierarchy.

Adding Dynamic Site Elements (Title, Featured Image, Meta)

Inside your header.html template part, you can add site-wide dynamic blocks such as:

<!-- wp:site-title /-->
<!-- wp:site-tagline /-->
<!-- wp:navigation /-->

These blocks dynamically pull your site’s title, tagline, and menu from the database — no hardcoding required.

Styling Post-Specific Blocks with theme.json

You can control the design of post-related blocks globally in theme.json. For example, to style your post titles and excerpts:

{
  "styles": {
    "blocks": {
      "core/post-title": {
        "typography": {
          "fontSize": "28px",
          "fontWeight": "700"
        },
        "color": {
          "text": "#222222"
        }
      },
      "core/post-excerpt": {
        "typography": {
          "fontSize": "16px"
        },
        "spacing": {
          "margin": {
            "bottom": "1.5rem"
          }
        }
      }
    }
  }
}

Explanation:

  • core/post-title applies styling to all post titles across templates.
  • core/post-excerpt defines global spacing and typography for excerpts.
  • Keeps design consistent without writing separate CSS files.

Final Preview and Testing

Once done, open the Site Editor (Appearance → Editor) and preview:

  • Blog listing (index/home)
  • Single post (single.html)
  • Other pages (page.html, archive.html)

You should now see your Versana theme pulling real content dynamically — a huge milestone before moving into the next stage: styling and customization.

🧩 What’s Next

Next, we’ll start adding custom CSS and theme.json styling to make our Versana theme visually appealing and polished — focusing on layout, typography, and color system.

🧠 References

Tags

Related Posts

Leave a Reply