Page Templates

Option A: Template with a PAGEGRID field

This is the most common use case. Use PAGEGRID as a fully-fledged page builder or just for parts of your template and combine it with other fields. You can even use more then one PAGEGRID field per template.

Ideal when you want to give site editors or designers some flexibilty to structure a page. (See permissions)

This approach is used for the default page template “pagegrid-page” that is created when you install the PAGEGRID module. You can find it’s template file in your “site/templates/“ folder. Feel free to modify it to your needs. Or use it as an example to create your own template.

By default PAGEGRID renders the whole template inside the backend/fontend. But you can easily customize that:

<?php 
// render PAGEGRID
echo $pagegrid->styles($page);
echo $pagegrid->renderGrid($page);
echo $pagegrid->scripts($page);

if ( $pagegrid->isBackend() ) { 
// render markup only for the backend
} else {
 // render markup only for the frontend
}
?>

Option B: Render PAGEGRID items from other pages

PAGEGRID can be used for rendering specific items or styles from other pages. This option lets you define your template in code and use regular ProcessWire fields.

This is good when you want to create many pages with the same layout. It's also great for cases where you want editors to edit the content in fields directly without using PAGEGRID in the backend.

Create a template without a PAGEGRID field and use the renderItem function to render only the parts you need:

<?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); 
// your markup
?>

Option C: Connect a template to a PAGEGRID layout

This option lets you design a layout visually with PAGEGRID, while defining fields for content editing in the backend using regular page templates. In this case PAGEGRID is only used for rendering the frontend.

This is ideal when you want to create many pages with the same layout, as design changes to one PAGEGRID layout will automatically apply to all connected pages. Like with Option B this also great for cases where you want editors to edit the content in fields directly without using PAGEGRID in the backend.

This approach combines the power of ProcessWire's markup regions (areas within your template to inject content) with the design flexibility of PAGEGRID.

Steps:

1. Enable markup regions: Markup regions are enabled by deafult. If they are not enabled yet you can add the following to your /site/config.php file:

$config->useMarkupRegions = true;
$config->appendTemplateFile = '_main.php';

2. Create a PAGEGRID layout: For a reusable layout, we recommend creating a Blueprint ("Setup > PAGEGRID > Blueprints > Add New"). However, you can also connect your template to any page with a PAGEGRID field.

3. Connect your layout to the template: This is optional and only works if you used a Blueprint to create your layout. The advantage of this approach is that you can connect any blueprint to any template, just by changing this setting later. Go to "Setup > Templates" and edit your template. Under "PAGEGRID Blueprint" you can select the Blueprint you created in step 2.

4. Define a container: On your PAGEGRID page, select the block item that will render your template content. In the Style Panel under "Attributes," add id="content" (you can use any unique ID, "content" is just an example).

5. Define markup region: Inside your _main.php template file, use the following code to render your PAGEGRID layout:

<?php
// here we check if a Blueprint is selected on the requested template with $page->template->blueprint
// if you want to load the layout from another page instead replace it by $pages->get('myPage');
if ($page->template->blueprint) {
        $blueprint = $pages->get($page->template->blueprint);
        echo $pagegrid->styles($blueprint);
        echo $pagegrid->renderGrid($blueprint);
        echo $pagegrid->scripts($blueprint);
    } else {
        echo '<main id="content"></main>';
    }
?>

6. Render Content: Once there are regions defined you can populate them. Below is a simple example of populating the #content region above, which we are doing from our "/site/templates/basic-page.php" template file:

<div id="content">
  <p>Hello</p>
</div>

7. Check if it works: View a page that uses your template. You can see the layout you created with PAGEGRID and inside the defined container it renders your paragraph with the word "Hello".