Genesis Blocks

Create effective content faster.

You are here: Home / Post and Page Grid Block

Post and Page Grid Block

The Post and Page Grid block gives you an advanced, customizable, and sortable grid of posts and pages for your site. This block includes settings to toggle images and content on and off, as well as settings to change the markup to match your content.

Note: This block works with the default Posts and Pages only. It does not work with custom post types.

Table of Contents:

Post and Page Grid Settings

The settings in this section determine the layout and structure of the grid. These settings will change based on whether you select to display posts or pages.

Post Grid Settings

The settings in this section are applied when Posts are selected.

Screenshot of Post Grid settings

Click image to enlarge

  1. Display Width: Choose how wide the content in this block should be displayed on the page.
  2. Grid or List View: Choose whether the posts should be displayed as a grid (as shown in the image above) or as a list on the page.
  3. Content Type: Select Post.
  4. Enter category names to display: Start typing the name of a category you’d like to display. If you’d like to display more than one category, separate their names with a comma or press the Enter key so they appear on their own line.
  5. Order by: Select the order in which the content should be displayed. They can be displayed in ascending or descending order based on publish date or by name.
  6. Number of items: Enter the number of posts to display here.
  7. Number of items to offset: Enter the number of posts to offset (or skip). Offset is used when you have posts appearing elsewhere on the page (for example in another Post or Page Grid block) and you don’t want to repeat them here.  Offsetting by 1 will show the next most recent post.
  8. Columns: If you’ve chosen to display the posts in a grid format, select the number of columns to display. The maximum number of columns is 4.

Page Grid Settings

The settings in this section are applied when Pages are selected.

Screenshot of Page Grid settings

Click image to enlarge

  1. Display Width: Choose how wide the content in this block should be displayed on the page.
  2. Grid or List View: Choose whether the pages should be displayed as a grid (as shown in the image above) or as a list on the page.
  3. Content Type: Select Page.
  4. Enter page names to display: Start typing the name of a category you’d like to display. If you’d like to display more than one category, separate their names with a comma or press the Enter key so they appear on their own line. Note: The number of pages you add here determines how many pages will be displayed. If you only enter the names of 2 pages, then only those 2 pages will be displayed.
  5. Columns: If you’ve chosen to display the pages in a grid format, select the number of columns to display. The maximum number of columns is 4.

Post and Page Grid Content

The content settings in this section determine what information is displayed with each item. These settings change based on whether you select to display posts or pages.

Post Grid Content

This content settings in this section are applied when Posts are selected.

Screenshot of Post Grid Content settings

Click image to enlarge

  1. Display Section Title: Enable/disable the display of the section title.
  2. Section Title: If the section title is enabled above, enter the title you’d like to use which will be displayed on the site.
  3. Display Featured Image: Enable/disable the display of the featured image that’s assigned to the post(s) or page(s).
  4. Image Size: If featured images are enabled above, choose the display size of the featured images. See below for important notes about the featured images displayed in this block.
  5. Display Title: Enable/disable the display of the post or page title(s).
  6. Display Author: Enable/disable the display of the post or page author(s).
  7. Display Date: Enable/disable the display of the post or page publish date(s).
  8. Display Excerpt: Enable/disable the display of the post or page excerpt(s).
  9. Excerpt Length: If the excerpt is enabled above, enter the number of characters to use for the excerpt.
  10. Display Continue Reading Link: Enable/disable the Continue Reading link.
  11. Customize Continue Reading Link: If the Continue Reading link is enabled above, enter the text you’d like to use for this link (example: Read More).

Page Grid Content

This content settings in this section are applied when Pages are selected.

Screenshot of Page Grid Content settings

Click image to enlarge

  1. Display Section Title: Enable/disable the display of the section title.
  2. Section Title: If the section title is enabled above, enter the title you’d like to use which will be displayed on the site.
  3. Display Featured Image: Enable/disable the display of the featured image that’s assigned to the page(s).
  4. Image Size: If featured images are enabled above, choose the display size of the featured images. See below for important notes about the featured images displayed in this block.
  5. Display Title: Enable/disable the display of the page title(s).
  6. Display Excerpt: Enable/disable the display of the page excerpt(s).
  7. Excerpt Length: If the excerpt is enabled above, enter the number of characters to use for the excerpt.
  8. Display Continue Reading Link: Enable/disable the Continue Reading link.
  9. Customize Continue Reading Link: If the Continue Reading link is enabled above, enter the text you’d like to use for this link (example: Read More).
  • Available Image Sizes: The Post and Page Grid block comes with settings to adjust the size of the featured image displayed in the post grid. The block will detect image sizes defined by the theme, as well as the standard thumbnail, medium, large, and full size image sizes provided by WordPress®.1 The block also provides two additional sizes, GB Grid Square and GB Grid Landscape, that are designed to fit the grid’s design.

    By default, the post or page grid will load the full size image since this image will always be available. However, it is advised that you select an image size that suits your content accordingly.
  • Incorrectly Sized Images: There will be instances where there isn’t an image available for the image size that you select (indicated by a little yellow icon on the image). This could be that the featured image for that post or page is smaller than the size you selected, or that the image simply doesn’t have that size generated yet. This can happen if your image was uploaded before the image size was defined by a theme or plugin.

    The easiest way to fix this is by regenerating your image sizes by installing the Regenerate Thumbnails plugin. Once installed, go to Tools > Regenerate Thumbnails to run the plugin. This plugin will go through your media library and regenerate the missing image sizes. Once you’ve refreshed your images, correctly sized images should be available.

Post and Page Grid Markup

These settings allow you to change the markup of this block to match your content.

Screenshot of Post and Page Grid Markup settings

Click image to enlarge


  1. Post Grid Section Tag: Select the HTML tag for the wrapper around the post grid that matches the page’s content hierarchy.

  2. Post Title Heading Tag: Select the heading tag to use for the post/page title(s) displayed in this block that matches the page’s content hierarchy.

Advanced settings

Screenshot of Advanced settings

Click image to enlarge

  1. Additional CSS Class(es): You can add one or more CSS class to customize the appearance of this block. After adding the class name(s) here, you can enter your custom CSS code in Appearance > Customize > Additional CSS.