API Reference

The $pagegrid variable is your primary interface for rendering markup, managing assets, and handling logic. These methods are available globally in your ProcessWire template files.

Required Core Functions

These three functions are required to render the styles, scripts, and markup for a PAGEGRID field.

renderGrid($page)

To render PAGEGRID markup inside your template, use the renderGrid function. This outputs all necessary HTML for each item in your PAGEGRID field, wrapped in a container.

• Returns: string (HTML markup)

<?= $pagegrid->renderGrid($page); ?>

If you have multiple PAGEGRID fields on one page (e.g., mygrid and mygrid2), you can render them specifically:

<?= $page->mygrid; ?>
<?= $page->mygrid2; ?> 

styles($page, $loadDefaults = true)

Renders the CSS required for the page. This function automatically detects and loads .css files located in your block folders if they match the block template name.

• Returns: string (HTML <link> and <style> tags)

<?= $pagegrid->styles($page); ?>

Advanced: Load the styles for a specific PAGEGRID item, skipping core styles. Useful if you've already loaded PAGEGRID core styles and just want to render the styles for a specific block.

<?php
$header = $pages->get('pg_group_3224');
echo $pagegrid->styles($header, 0); 
?>

scripts($page)

Renders the JavaScript required for the page, including enabled plugins. It also automatically detects and loads .js files in your block folders that match the block template name.

• Returns: string (HTML <script> tags)

<?= $pagegrid->scripts($page); ?>

Utility Functions

renderItem($page)

This function renders a single PAGEGRID item. It is a versatile tool used in two main scenarios:

A. Within Block Templates (Nesting) Use it to render child items inside a parent block (e.g., for sliders, accordions, or tabs). This ensures children maintain their own wrapper and PAGEGRID features like drag-and-drop.

B. Within Page Templates (Cross-rendering) Use it to "pull" a specific block from another page and render it anywhere in your template. This is useful for shared headers, footers, or call-to-action blocks managed on a central page.

• Returns: string (HTML markup for the specific item)

<?php
// Example: Get a specific block from another page by its ID or name
$header = $pages->get('pg_group_3224');

echo $pagegrid->styles($header); 
echo $pagegrid->renderItem($header); 
echo $pagegrid->scripts($header); 
?>

getPage($page)

In PAGEGRID block templates, the $page variable refers to the block item itself. Use this function to access the actual ProcessWire page where the grid is hosted.

• Returns: Page (The parent ProcessWire Page object)

// inside a block template file $page refers to the block item.
// Use this function to get the main page that has your pagegrid field.
$mainPage = $pagegrid->getPage($page);

isBackend()

Check whether the template is being rendered within the ProcessWire admin (backend) or on the live site (frontend). This is useful for hiding/showing specific edit-only markup.

• Returns: boolean

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

noAppendFile($page)

As a default ProcessWire automatically includes _init.php (prepend) and _main.php (append) files. The _main.php usually has your html structure and the _init.php is used for shared functions.

Place this at the very top of your template file to disable these automatic inclusions for that specific template. This is useful if you want to define the html structure in one template file.

<?= $pagegrid->noAppendFile($page); ?>

Migration Helpers

These functions are used to create and style PageGrid blocks programmatically — for example in migration scripts or module install routines. They are not needed in regular template files.

In page templates the $pagegrid variable is already populated for you. In migrations, however, ProcessWire may not have fully set up that variable yet, so it is safer to retrieve the module directly:

$pagegrid = wire('modules')->get('InputfieldPageGrid');

getFieldContainer($page, $pgField = null)

Returns the internal field container page (pg-{fieldId}) for the given page. The field container is the direct parent of all top-level blocks on that page.

• Returns: Page|null

$page = $pages->get('/my-page/');

$fc = $pagegrid->getFieldContainer($page);

If a page has more than one PageGrid field, pass the specific field as the second argument:

$field = $fields->get('mygrid2');
$fc = $pagegrid->getFieldContainer($page, $field);

addItem($templateName, $parent)

Creates a new block page using the required two-step naming convention (pg-text-1041 etc.) and returns it ready for field population. $parent is the field container for top-level blocks, or a group/slider/accordion block for nested items.

• Returns: Page|null

$page = $pages->get('/my-page/');
$fc = $pagegrid->getFieldContainer($page);

// Create a text block
$block = $pagegrid->addItem('pg_text', $fc);
$block->setAndSave('pg_text', 'Hello world');

// Create a group and add a child block inside it
$group = $pagegrid->addItem('pg_group', $fc);
$child = $pagegrid->addItem('pg_text', $group);
$child->setAndSave('pg_text', 'Nested text');

setStyles($block, $cssProps, $breakpoint = 'base', $elementId = 'pgitem', $options = [])

Merges CSS properties into the pg_styles metadata of a block page. This is the correct way to apply layout and visual styles programmatically — never use inline style="" attributes in content fields.

• Returns: void

// Basic: set styles on the block wrapper (pgitem) at the base breakpoint
$pagegrid->setStyles($block, [
    'background-color' => 'rgba(255, 255, 255, 1)',
    'padding'          => '20px',
]);

// Grid position (start is an integer, end must be 'span N')
$pagegrid->setStyles($block, [
    'grid-column-start' => '1',
    'grid-column-end'   => 'span 6',
]);

// Responsive: override padding for the small breakpoint
$pagegrid->setStyles($block, ['padding' => '12px'], 's');

// Inner element (tagName is required for non-pgitem targets)
$pagegrid->setStyles($block, ['border-radius' => '12px'], 'base', 'img', ['tagName' => 'img']);

// Page wrapper / body styles — set on the field container, not the main page
$pagegrid->setStyles($fc, ['background-color' => 'rgba(0, 0, 0, 1)']);
$pagegrid->setStyles($fc, ['font-family' => 'Inter, sans-serif'], 'base', 'body', ['tagName' => 'body', 'cssClass' => 'body']);

// Remove a property by passing null
$pagegrid->setStyles($block, ['background-color' => null]);