Basic Setup

To use PAGEGRID on any custom template, you must include three essential functions. While the Quick Start uses a predefined template, these steps allow you to turn any PHP file into a PAGEGRID-enabled page.

The Essential Setup

Add these three calls to your template file. If you are using ProcessWire's standard Markup Regions (_main.php), you can simply place them within your content block.

Function	What it does
`$pagegrid->styles($page)`	Loads grid CSS and block-specific styles.
`$pagegrid->renderGrid($page)`	Renders the HTML markup for your blocks.
`$pagegrid->scripts($page)`	Loads JS plugins and block-specific scripts.

Implementation Example

If your template uses a #content region (common in _main.php setups), your home.php file would look like this:

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

Note on Placement: While styles() usually goes in the <head> and scripts() at the end of the <body>, PAGEGRID is designed to work even when they are placed together within your content region for a simpler setup.

Pro Tip: Conditional Rendering

Use $pagegrid->isBackend() to show or hide markup specifically for the editor. This is useful for hiding complex animations or decorative elements that might not be needed for the editor. See the API Reference for more.