Advanced Examples

While the Basic Setup covers the majority of projects, PAGEGRID is flexible enough to handle complex site architectures. These examples show how you can combine PAGEGRID with complex custom code logic.

The No-Code Powerhouse: Nesting & Symbols

Before diving into PHP-based strategies, it is important to note that custom code is optional. Because PAGEGRID supports infinite nesting and custom CSS classes, it offers the same layout flexibility as tools like Webflow or Framer.

1. Visual Structure: By nesting wrappers and changing their display properties (Block, Flex, Grid), you can build complex DOM structures entirely within the visual editor.
2. Symbols: Use Symbols to sync these structures across multiple pages without writing a single line of PHP.

The following examples are for developers who specifically need to integrate PAGEGRID into existing custom-coded templates or specific ProcessWire logic.

Example 1: The Hybrid Template (Grid + Fields)

The Use Case: You want a structured page with fixed fields (like Title, Date, or Hero Image) but want a "Story" section in the middle where editors build custom layouts using PAGEGRID.

Implementation

In your template file (e.g., project.php), render your regular ProcessWire fields first, then call PAGEGRID for the specific content area:

<h1><?= $page->title ?></h1>
<div class="meta-data">Published on: <?= $page->date ?></div>

<div class="project-content">
    <?= $pagegrid->styles($page) ?>
    <?= $pagegrid->renderGrid($page) ?>
    <?= $pagegrid->scripts($page) ?>
</div>

<aside>
    <h3>Related Projects</h3>
</aside>

Example 2: Render PAGEGRID items from other pages

The Use Case: You want to "pull" a specific block from another page and render it anywhere in your template. This is the code-based alternative to the Symbol approach.

This method allows you to seamlessly blend visual PAGEGRID components with custom-coded templates. It is ideal for workflows where editors manage primary content through standard fields, while the layout still pulls in specifically designed global elements from other PAGEGRID pages.

Implementation

Use the renderItem() function to pull a block from another page into your current template.

<?php
// get an item from another page and render it here
$header = $pages->get('pg_group_3224');
echo $pagegrid->styles($header); 
echo $pagegrid->renderItem($header); 
echo $pagegrid->scripts($header); 
// combine it with your own markup, eg. render a rich text body field
echo $page->body;
?>

Example 3: The Design System (Blueprints & Markup Regions)

The Use Case: You want to design a layout once and apply it to hundreds of pages. When you change the design in the Blueprint, every connected page updates instantly.

Instead of coding your main layout file manually, you use the PAGEGRID visual editor to design the Blueprint. You are essentially creating a visual "master template" that receives data from your specific page templates. Like with Example 2, this is also great for cases where you want editors to edit the content in fields directly without using PAGEGRID in the backend.

Steps:

1. Create & Design the Blueprint: Go to Setup > PAGEGRID > Blueprints. Create a new one and use the PAGEGRID editor to design your master layout visually.
2. Connect the Template: In Setup > Templates, edit your template and select your Blueprint under the PAGEGRID Blueprint setting.
3. Define the Container: In the PAGEGRID editor for your Blueprint, select the block that should hold your page content. In the Style Panel under Attributes, add a unique ID (e.g., id="content" or id="main-area").
4. Render in _main.php: Use the following logic to load the Blueprint. This example uses the default ProcessWire #content ID, but you can use any ID you defined in step 3:

<?php
if ($page->template->blueprint) {
    $layout = $pages->get($page->template->blueprint);
    echo $pagegrid->styles($layout);
    echo $pagegrid->renderGrid($layout);
    echo $pagegrid->scripts($layout);
} else {
    // Fallback for templates without a blueprint
    echo '<main id="content"></main>';
}
?>

5. Populate the Content: In your individual template file (e.g., basic-page.php), provide the markup for your chosen ID.

<div id="content">
  <h2><?= $page->title ?></h2>
  <?= $page->body ?>
</div>

Next Step: API Reference

Now that you've seen the advanced patterns, you can find the technical details for all function in the API Reference.