Migration guide: Grid Page template to blocks

At Themes Harbor, we always strive to keep our themes unbloated, lightweight and fast. Thus, our themes always aim to take a maximum advantage of a WordPress core in order to avoid installing additional plugins.

When some of our themes — such as Appetite, Fortune, Venture, Prosperity — were released, a WordPress core did not have a functionality which would allow easily create grids.

That is why a custom Grid Page template has been included in the themes as a solution to build grids, without a need of installing 3rd party plugins.

Thankfully, WordPress is growing steadily, and today it provides and easy way to create grids on pages, using a native functionality only.

This is the reason why this migration guide was created, the main purpose of which is to provide instructions on migrating from an old way of building grids in the themes to a new one.

Deprecation of the Grid Page (Full Width Grid Page) template

That means it has been replaced by a new template or is no longer supported, and may be removed from future versions.

Note, a deprecation process happens in several stages. Below, you can find information in which version of the theme the template is no longer available for a use.

Explanation of the table based on the Appetite theme

If the theme has been purchased with a version 3.0.0 and higher, then the template is not available for a use by default (see “New users” in the table above).

If the theme was purchased before version 3.0.0 release, and the template had been used on your website, then it still be available on your WordPress website for a use.

However, the template will become unavailable in these cases:

• when none of your pages will use the template;
• when the next major version of the theme is released (see “All users” in the table above);

If your website uses this template to create grids, then below you can find a migration guide, on how to start building grids using a new approach.

Migration guide for the themes

Below, you find “before” and “after” guides on creating grids in the themes. Also, the section includes disadvantages of using an old approach, and advantages of using a new approach of creating grids.

[Before]: creating grids in the theme

Below, you can find information about an old way of creating grids in the theme, using a custom template.

In WordPress dashboard:

1. Create a new page — this page serves as a container which holds all the grid items. Grid items are added to the page as child pages.
2. Set Grid Page (Full Width Grid Page) template — this template includes a functionality, needed for an automatic creation of a grid.
3. Publish your page.

After creating a (parent) page, time to add child pages to the page in oder to create a grid:

1. Create new page — this page serves as a grid item, and is added in WordPress as a child page of the previous created page (see instructions above).
2. Set a parent page for the page — this parent page should have set Grid Page (Full Width Grid Page) template (see instructions above).
3. Enter a title of the page — this title is automatically linked to the page.
4. Set Featured Image — this image is outputted automatically, and is shown above or below (depending on the theme) the page title.
5. Add content to the page — this content is shown below the page title or featured image (depending on the theme). Also, in order to create a summary along with the Read More button, the More block has to be used.
6. Publish your page.
7. Repeat this process for adding additional items to the grid.

There are some disadvantages of using this approach:

• The template does not provide any options to configure a grid. For example, change a number of grid items per row, set custom colors, add additional text below the grid.
• The page title of child pages is always linked to the original page. There is no option to disable it.
• The Read More button always has the same label text in all cases, and the button cannot have a custom link.
• All elements in the grid — image, title, content — have a pre-defined order. There is no option to change the order.
• The process of creating a grid is a little bit confusing for new users because a grid creation happens on multiple pages.

[After]: creating grids in the theme

Below, you can find information about a new way of creating grids in the theme, using a native WordPress functionality.

In WordPress dashboard:

1. Create a new page.
2. Set Blank content area page template (optional) — this template gives you a full control over the page layout, except the site header and the site footer sections.
3. Use the Columns block — this block allows to create grids on a page.
4. Inside each column of the Columns block, add blocks such as Heading, Paragraph, Image, and Buttons to create elements such as title, summary, image and button(s). You can also use the Block editor options to customize your grid elements.
5. Publish your page.

This approach has several advantages over the old way of creating grids in the theme:

• It provides much more flexibility by allowing to change colors, order of elements, number of columns, etc.
• The page can have multiple grids on the page, including a different number of columns per row.
• The grid is managed in a single place, which means there is no need to jump from page to page in order to make changes to the grid.

Need help?

If you have any questions regarding this migration guide, feel free to contact us. Our support is always happy to provide a friendly and professional help.