Tutorials

How to Build Dynamic Blocks in WordPress (Example: FAQs)

If you want to create reusable, styled FAQ sections in WordPress — without editing theme files — you can combine three powerful plugins: Custom Post Type UI, Secure Custom Fields, and WP Coder Pro. This setup gives you full flexibility: store FAQs as structured data, output them with clean HTML/CSS, and drop them anywhere on your site via shortcode or Gutenberg block.

▶ Watch Demo Video

Step 1. Create a Custom Post Type for FAQs

Install and activate Custom Post Type UI.

  1. Go to CPT UI → Add/Edit Post Types.
  2. Create a new post type, for example:
    • Post Type Slug: faq
    • Plural Label: FAQs
    • Singular Label: FAQ

This gives you a dedicated section in the WordPress admin to manage FAQs.

Step 2. Add FAQ Fields with Secure Custom Fields

Next, install Secure Custom Fields (SCF).

  1. Create a new Field Group, assign it to the FAQ post type.
  2. Add a Repeater field called faqs with two subfields:
    • Title (text)
    • Description (textarea or WYSIWYG)

Now, when you add or edit an FAQ post, you can input multiple Q&As in a structured way.

Step 3. Build the Output with WP Coder Pro

Now let’s make the FAQs display with proper styles.

  1. Create a new WP Coder Pro snippet.
  2. Add Custom Attribute post_id so you can pass a post ID dynamically through shortcode.
  3. Paste styles and markup:
    • Copy CSS styles from this CodePen and place them in the CSS tab.
    • Insert this PHP/HTML in the HTML tab:
      <?php 
$faqs = get_field('faqs', $post_id);
foreach ($faqs as $faq) : ?>
<details class="details" name="group">
<summary class="summary"><?php echo esc_html($faq['title']); ?></summary>
<div class="content">
<p><?php echo esc_html($faq['description']); ?></p>
</div>
</details>
<?php endforeach; ?>
  4. In WP Coder Pro settings, enable the option Allow PHP in HTML.
  5. Save the snippet.

Step 4. Insert the FAQs Anywhere

You can now place your FAQ block on any page or post in two ways:

  • Shortcode method: [wp_code id="2" post_id="504" /]
    Here, id=”2″ is the snippet ID, and post_id=”504″ is the FAQ post you want to display.
  • Gutenberg block method:
    Add the WP Coder Snippet block, select your snippet, and pass the post ID as an attribute.

On the front end, you’ll see a fully styled accordion-like FAQ with <details> and <summary> elements.

Beyond FAQs: What Else Can You Build?

This method isn’t limited to FAQs. Using the same approach, you can create:

  • Pricing Tables — add fields for plan name, price, features, and output them in a styled grid.
  • Comparison Tables — compare products/services with dynamic rows and columns.
  • Team Member Blocks — fields for photo, name, position, bio.
  • Testimonials — fields for client name, feedback, and rating.
  • Feature Lists — structured checklists or benefits sections.
  • Event Timelines — date, title, and description in a vertical timeline layout.

Basically, any structured content can be stored in a CPT + SCF and rendered through WP Coder with your own HTML/CSS/JS.

Wrap Up

With Custom Post Type UI, Secure Custom Fields, and WP Coder Pro, you have a no-code framework to:

  • Store content in the admin like regular posts.
  • Style it with your own HTML/CSS.
  • Drop it anywhere via shortcode or block.

This workflow makes WordPress more flexible and lets you create reusable, custom-designed blocks without touching theme files.