Theme templates

Every file in the plugin’s templates/ folder can be replaced from the theme at the same path, in a vlt-grid-builder folder. A child theme wins over the parent theme.

your-theme/vlt-grid-builder/
  skins/{name}/skin.php        + style.css, script.js
  filters/{name}/filter.php
  search/{name}/search.php
  pagination/{name}/pagination.php
  layouts/{name}/layout.php    + style.css, script.js
  item.php, wrapper.php, empty.php, …

Register a style so it shows up in the editor; its style.css and script.js load only where it is used. A registered style without its file falls back to the default.

add_filter( 'vlt_grid_skins_styles', fn( $styles ) => $styles + [ 'minimal' => 'Minimal' ] );
add_filter( 'vlt_grid_filters_styles', fn( $styles ) => $styles + [ 'pills' => 'Pills' ] );
add_filter( 'vlt_grid_search_styles', fn( $styles ) => $styles + [ 'underline' => 'Underline' ] );
add_filter( 'vlt_grid_pagination_styles', fn( $styles ) => $styles + [ 'arrows' => 'Arrows' ] );

A skin gets $item (title, link, image, terms, …), $index, $config (the layout), $source and $image_size. Wrap the card in the click action’s link with Renderer::link_start() / link_end(), and put the image in .vlt-gb__media so the layout’s ratio and fit apply.

<?php
echo VLT\GridBuilder\Renderer::link_start( $item, 'my-card' );
?>
	<span class="vlt-gb__media"><?php echo wp_get_attachment_image( $item['image_id'], $image_size ); ?></span>
	<span class="my-card__title"><?php echo esc_html( $item['title'] ); ?></span>
<?php
echo VLT\GridBuilder\Renderer::link_end( $item );