David Mkandhla

Introduction to WordPress Part 4: Completing Your Website with Full Site Editing

Introduction

Welcome to Part 4 of my WordPress tutorial series, where we complete our auto repair website using Full Site Editing (FSE). Building on Part 3’s templates and patterns, we’ll use the Gutenberg block editor to create dynamic layouts, add contact forms, and finalize the site with advanced FSE features. This beginner-friendly guide assumes you’ve installed WordPress (Part 1), mastered Gutenberg (Part 2), and know FSE basics (Part 3). Through real-world scenarios, we’ll design a Blog Archive, Single Post, Contact Page, and more, making your site fully functional without coding. Let’s finish your website!

About the Author

My name is David Mkandhla, a Johannesburg-based Webmaster, shaped by a decade of hands-on work across over 45 websites. My experience spans six primary types of websites, including:

  • Business Websites
  • Real Estate Websites
  • eCommerce Platforms
  • Auto Dealership Websites
  • Education Platforms
  • Church & Non-Profit Websites
While I do not hold a formal degree or certificate, my skills have been built through on-the-job training, real-world projects, and direct problem-solving across various tasks.

As a Webmaster, also known as a Website Administrator, I am responsible for various tasks that require specific skills. Over the years, I have been exposed to different tools tailored to each task. These tools and skills enable me to:

  • Manage cPanel servers and WordPress installation
  • Design and structure websites
  • Optimize site performance and usability
  • Create authoritative content and graphics
  • Perform continuous website management and optimization

Key Areas of Expertise

My core professional skills include:

  • cPanel and WordPress Installation, Setup, and Management
  • WordPress Website Design
  • SEO Strategy and Optimization
  • Expert Copywriting for High-Quality Content
  • Static and Motion Graphics Design
  • Website Management and Optimization
  • Social Media Management

Website management and optimization is only one part of my broader expertise. My role involves handling multiple tasks, integrating various digital strategies, and ensuring comprehensive website functionality across different sectors.

From the days i was using HTML/CSS to design websites to the time i embraced WordPress’s, my vast practical experience gives me the edge to guide beginners and advanced users through no-code site-building with practical and easy steps.

What is Advanced Full Site Editing?

Advanced Full Site Editing (FSE) extends Part 3’s FSE basics, using the Gutenberg block editor to create dynamic templates, patterns, and interactive elements for a complete website. It builds on block themes to deliver fully functional, professional sites without coding.

The role of Full Site Editing in WordPress

Advanced FSE lets you:

  • Create dynamic templates (e.g., Blog Archive, Single Post) with real-time content.
  • Add interactive blocks (e.g., forms, post lists).
  • Design reusable patterns (e.g., testimonials) for site-wide use.
  • Fine-tune dynamic content (e.g., post metadata, featured images).

It’s the same Gutenberg editor, now powering complex, site-wide layouts.

Key Features of Full Site Editing

  • Query Loop Block: Displays dynamic lists of posts (e.g., blog archive).
  • Dynamic Templates: Layouts that pull live content (e.g., post titles, images).
  • Form Blocks: Enable contact or inquiry forms (requires plugins).
  • Advanced Patterns: Reusable designs with dynamic elements.
  • Post Meta Blocks: Show post details (e.g., date, author).

Benefits of Full Site Editing

  • No-Code: Build dynamic sites with drag-and-drop blocks.
  • Unified: Uses Gutenberg skills from Part 2 and Part 3.
  • Lightweight: Built into WordPress, no heavy plugins.
  • Responsive: Templates adapt for mobile devices.

Principles of Full Site Editing

Advanced FSE is dynamic and modular:

  • Dynamic Content: Blocks pull live data (e.g., recent posts).
  • Modularity: Combine blocks for flexible, reusable layouts.
  • Integration: Seamlessly blends with site-wide styles and patterns.

Advanced Full Site Editing in WordPress

Advanced FSE builds on:

  1. WordPress Installation (Part 1) via cPanel.
  2. A block theme (e.g., Twenty Twenty-Five, Ollie) supporting FSE.
  3. Gutenberg skills (Part 2) for content creation.
  4. Basic FSE (Part 3) for headers, footers, and homepage templates.

With these foundations, advanced FSE completes your site by adding dynamic and interactive elements using the Site Editor and Gutenberg blocks.

Practical Applications of Advanced Full Site Editing

Let’s finalize our auto repair website with dynamic templates, patterns, and forms, using the same Gutenberg editor from Parts 2 and 3. Each scenario teaches advanced FSE tasks with click-by-click steps.

Blog Archive Template

Goal: Create a Blog Archive template to display a dynamic list of posts.

Steps:

  1. Open the Site Editor:
    • From the WordPress dashboard, go to Appearance > Editor.
    • Click Templates > Add New Template > Archive.
  2. Add a Query Loop Block:
    • Click + (Block Inserter, top-left), search for Query Loop, and add it.
    • Choose Grid layout (3 columns) for post previews.
    • In the Query Loop, keep default settings (shows all posts).
  3. Customize Post Display:
    • Inside the Query Loop’s Post Template block:
      • Add a Post Featured Image block (set Width to 300px).
      • Add a Post Title block (H3, 24px).
      • Add a Post Excerpt block (16px, 50-word limit).
    • Set Alignment to “Center” for each block.
  4. Add a Heading:
    • Above the Query Loop, add a Heading block (H2, “Our Blog”, 28px).
  5. Style the Template:
    • Select the Group containing the Query Loop, set Background Color to light gray (#F5F5F5).
    • Add Padding (20px) in Block Settings.
  6. Save and Test:
    • Click Save, preview the Blog page (e.g., yoursite.com/blog).
    • Confirm recent posts (e.g., “Why Regular Car Maintenance Matters” from Part 2) display in a grid.
  7. Check Mobile:
    • Click Preview > Mobile. Ensure posts stack vertically, adjust H3 Font Size to 20px if needed.

The Query Loop pulls live posts, using Gutenberg blocks to create a dynamic archive.

Single Post Template

Goal: Design a Single Post template for individual blog posts with dynamic content.

Steps:

  1. Access the Template:
    • In the Site Editor, go to Templates > Single Post.
    • Click Edit to modify.
  2. Add Dynamic Blocks:
    • Add a Post Featured Image block (set Width to 800px, Alignment to “Center”).
    • Add a Post Title block (H1, 36px).
    • Add a Post Content block (to display the post’s Gutenberg content).
    • Add a Post Meta group:
      • Add Post Date block (16px).
      • Add Post Author block (16px, linked).
  3. Style the Layout:
    • Wrap blocks in a Group, set Content Width to 1200px.
    • Set Padding (20px) and Background Color (white, #FFFFFF).
  4. Save and Test:
    • Click Save, preview a post (e.g., “Why Regular Car Maintenance Matters”).
    • Confirm the title, image, content, and meta display correctly.
  5. Check Mobile:
    • Preview on mobile, adjust H1 Font Size to 28px and Image Width to 100% if needed.

Dynamic blocks (Post Title, Content, Meta) pull live post data, formatted with Gutenberg.

Contact Page Template

Goal: Create a Contact Page template with a form block (assuming a plugin like WPForms).

Steps:

  1. Install a Form Plugin:
    • Go to Plugins > Add New, install and activate WPForms Lite.
    • Create a simple contact form (name, email, message) in WPForms > Add New.
  2. Open the Template:
    • In the Site Editor, go to Templates > Add New Template > Page.
    • Name it “Contact” and assign to the Contact Us page.
  3. Add a Form Block:
    • Click +, search for WPForms, and add the block.
    • Select the contact form created in WPForms.
  4. Add Supporting Blocks:
    • Above the form, add a Heading (H2, “Get in Touch”, 28px).
    • Add a Paragraph (“We’re here to help! Contact us today.”, 16px).
  5. Style the Template:
    • Wrap blocks in a Group, set Background Color to light gray (#F5F5F5).
    • Set Padding (20px) and Content Width (800px).
  6. Save and Test:
    • Click Save, visit the Contact Us page.
    • Submit a test form to confirm it works (check WPForms entries).
  7. Check Mobile:
    • Preview on mobile, ensure the form fields are full-width and readable.

Form blocks (via plugins) integrate with Gutenberg, creating interactive pages in FSE.

Testimonial Pattern

Goal: Build a reusable testimonial pattern for site-wide use.

Steps:

  1. Create a Pattern:
    • In the Site Editor, go to Patterns > Create Pattern.
    • Name it “Testimonials” and check Synced.
  2. Design the Pattern:
    • Add a Columns block (two columns).
    • Left Column:
      • Add a Quote block (“Amazing service! – Jane Doe”, blue text, #0000FF).
    • Right Column:
      • Add a Quote block (“Fixed my car fast! – John Smith”, blue text).
    • Set Columns Spacing to 20px in Block Settings.
  3. Style the Pattern:
    • Wrap in a Group, set Background Color to white (#FFFFFF).
    • Add Padding (20px).
  4. Use the Pattern:
    • Go to Templates > Home, add the “Testimonials” pattern below the services section.
    • Click Save, preview the homepage.
  5. Test Updates:
    • Edit the pattern (e.g., change quote text), save, and confirm updates on the homepage.
  6. Check Mobile:
    • Preview on mobile, ensure columns stack, adjust Quote Font Size to 14px if needed.

Synced patterns are reusable Gutenberg designs, ensuring consistency across pages.

Dynamic Tweaks

Goal: Add post metadata (e.g., categories, tags) to the Single Post template.

Steps:

  1. Edit the Single Post Template:
    • In the Site Editor, go to Templates > Single Post.
  2. Add Metadata:
    • Below the Post Meta group, add a Post Terms block (select “Category”).
    • Add another Post Terms block (select “Tags”).
    • Set both to 16px, Text Color to gray (#666666).
  3. Style and Organize:
    • Group metadata blocks, set Alignment to “Left”.
    • Add Spacing (10px) between blocks.
  4. Save and Test:
    • Click Save, preview a post to confirm categories and tags display.
    • Click a category to ensure it links to the archive.
  5. Check Mobile:
    • Preview on mobile, adjust Font Size to 14px if needed.

Metadata blocks enhance templates with dynamic details, using Gutenberg’s flexibility.

Best Practices of Full Site Editing

  • SEO:
    • Add Post Excerpt in Query Loops for search snippets.
    • Use Alt Text for images in patterns.
  • Accessibility:
    • Ensure form fields have clear labels (via WPForms settings).
    • Maintain contrast (e.g., blue quotes on white background).
  • Responsiveness:
    • Preview all templates on mobile, adjust font sizes and spacing.
    • Use Stack on Mobile for Columns blocks.
  • Workflow:
    • Use Block Navigation (top toolbar) to manage complex templates.
    • Save frequently and test changes on a staging site if possible.

Next Steps

Your auto repair website is now complete with dynamic, professional layouts! Practice by:

  • Adding a Search Page template with a Search block.
  • Creating a Services Page template with a Query Loop for custom post types (see Part 5).
  • Exploring advanced blocks like Table of Contents.

Visit davidmkandhla.co.za for more tips. Stay tuned for Part 5: Enhancing Functionality with Child Themes, where we’ll add custom features like post types and roles to your site.

Please leave a Comment that Directly posts to your Facebook.

My Social Handles