The Post Grid Pro - WordPress Plugin

A Practical Guide to Configuring The Post Grid Pro for WordPress Post Displays

The Post Grid Pro is best thought of not as "just another card block," but as a practical tool for situations where the standard WordPress post feed is no longer enough. This guide covers site preparation, installation, choosing a display method, query setup, filters, Ajax navigation, archive templates, ACF fields, front-end content submission, result checks, and troubleshooting common issues.

This article is written for a content site owner, editor, webmaster, or developer who already knows which posts need to be shown, but wants to build a controlled content showcase: a news section on the homepage, a category hub, an author collection, a case study catalog, an events listing, a WooCommerce product grid, or a page for user-submitted content. It does not cover purchasing or license activation. The focus here is practical use of a plugin you already have.

The core workflow in The Post Grid Pro is straightforward: you choose a content source, set the selection rules, pick a layout, enable the card fields you need, adjust the styling, and insert the finished output using a shortcode, Gutenberg block, Elementor widget, or Divi module. Once you keep that sequence in mind, errors become easier to understand: in most cases, it is not the entire grid that fails, but one part of the chain - the query, filter, template, styles, cache, or editor integration.

What the Plugin Solves and Where It Works Best

A standard WordPress feed works well as long as the site is small and readers are simply scrolling through the latest posts. On a larger content project with categories, authors, reviews, case studies, events, and curated collections, a different need appears quickly: instead of showing everything, you need to display the exact set of content that belongs on a specific page. The Post Grid Pro helps you build that output without hand-coding a custom template.

The plugin's practical value is not just in how the cards look, but in how the content is selected. In one place you can show the latest news, in another only posts from a specific category, on a landing page only handpicked posts by ID, in an author section only that author's content, and on a catalog page posts from a custom post type. For visitors, this appears as a clean grid, list, slider, or filterable showcase. For administrators, it remains a manageable block that can be updated from the WordPress dashboard.

The plugin is especially useful in several cases:

• News and magazine sites, where the homepage is divided into topical sections such as politics, sports, technology, interviews, and reviews.
• Blogs with large archives, where you need to surface popular, recent, related, or handpicked content.
• Portfolios and case study catalogs, when posts or custom post types need to be filtered by specialty, industry, or skill set.
• Sites with multiple editors, where author pages, archives, and showcases of user-submitted content make sense.
• Projects built with Elementor, Gutenberg, or Divi, where it is important to work inside the familiar editor instead of writing a separate PHP template.

The strength of The Post Grid Pro is not one particular layout. The plugin brings together several working modes: a shortcode generator, Gutenberg blocks, Elementor widgets, Divi modules, ready-made sections, filters, Ajax navigation, support for custom post types and ACF fields, and archive or single template customization. That is why, before installation, it is better to define not "do I need a nice-looking grid," but exactly which content should appear in that grid and who will maintain it afterward.

If the site only needs to show three latest news posts in a sidebar one time, a built-in WordPress block or a simple free solution will be enough. But if you are building a page where different blocks show different post sets, visitors filter categories without reloading, and editors need to change the layout without a developer, The Post Grid Pro becomes a much better fit.

What to Check Before Installation and First Launch

This preparation is not just a formality. The Post Grid Pro works on top of an existing WordPress structure: posts, categories, tags, authors, featured images, custom post types, ACF fields, the theme, and the page builder. If that foundation is messy, the plugin will faithfully display that mess in a polished grid. That is why it is worth doing a quick review before installation.

Content and Taxonomies

Start by checking whether your posts actually contain the data you plan to display. A typical card needs a title, featured image, date, author, category, excerpt, and a link to the full post. If some content has no images, the grid may look uneven. If categories are inconsistent, the filter will end up too long or not very useful.

If the site uses custom post types, verify in advance that they are registered correctly and visible in the dashboard. The Pro version supports custom post types and ACF, but the quality of the final output still depends on how those types and fields are configured on the site. For example, for an events catalog, you need to decide where the event date is stored, what counts as a past event, and whether upcoming events should appear above regular posts.

Editor and Insert Method

The plugin supports several output paths: shortcode, Gutenberg, Elementor, and Divi. Do not enable everything at once just because you can. The official performance documentation notes separately that your usage mode affects which related assets are loaded. If the site is built in Elementor, it makes sense to work through Elementor widgets. If editors build pages in Gutenberg, blocks are more convenient. If the site is older, uses Classic Editor, or relies on a custom builder, a shortcode is often the most stable choice.

Rule of thumb: one important block should have one primary output method. Do not create a shortcode, a Gutenberg block, and an Elementor widget for the same showcase at the same time before you verify which option best fits your workflow.

Theme, Cache, and Images

Most grid issues appear where the plugin, theme, and performance optimization intersect. The theme may apply its own styles to links, buttons, and images. A caching plugin may combine scripts and interfere with Ajax filters. Lazy loading can affect card height if thumbnails load after the text. A CDN can delay CSS updates after you change settings.

Before installation, prepare a copy of the page or a test page where you can check the grid without risking the homepage. If the site uses aggressive caching, identify in advance where page cache, CDN cache, and minification cache are cleared. Do not validate the result only inside the editor: Elementor and Gutenberg may show a correct preview while the live site is still using older files or a different style set.

WordPress Version and User Permissions

On WordPress.org, the free core version of The Post Grid lists its WordPress and PHP requirements, along with active installs and the developer name RadiusTheme. For the Pro side, it is also important that the person configuring the output has sufficient permissions to install plugins, edit pages, create templates, and work with the relevant post types. If an editor can see the page but cannot see a custom post type, the problem may be related to WordPress roles and permissions rather than The Post Grid Pro itself.

Installation and a Low-Risk Initial Check

The official RadiusTheme documentation describes the standard installation flow: the free core version can be installed from the WordPress directory, and the Pro archive is uploaded through the plugin upload screen. The documentation also explicitly notes that the free version must be installed and activated before the Pro version can work. This article does not cover purchase, license key entry, or account management, because those are outside the scope of practical content display setup.

Basic Installation Order

1. Open the WordPress dashboard and go to Plugins - Add New.
2. Search for The Post Grid, install the free version, and click Activate.
3. If you already have the Pro archive, upload it through Upload Plugin and activate it after installation.
4. Check whether the The Post Grid menu item appears in the left WordPress menu.
5. Create a test page that is not linked from the main navigation so you can verify the first output safely.

After activation, do not start with the most complex block right away. Build a simple grid of standard posts: 6 items, 3 columns, featured image, title, date, and link. This gives you a baseline. If a simple grid does not render properly, there is no point in jumping straight into ACF, filters, and archive templates.

What Should Work Right Away

In the initial check, you need to confirm four things. First, the plugin can see your posts. Second, the selected insert method works on your page. Third, the card styles are not broken by the theme. Fourth, the live site shows the same set of posts you configured in the settings.

If you see 6 posts in the editor but all content appears on the front end, you usually need to check the query settings, cache, page save state, and whether multiple similar blocks exist on the same page. If the cards appear but the images have inconsistent sizes, first check the thumbnails and image height settings before adding CSS. If the filter is visible but does not change the content set, the issue is most likely in the taxonomy, selected terms, Ajax request, or caching.

Detailed Post-Installation Setup: Your Site's Baseline Profile

After installing The Post Grid Pro, you do not need to open every available tab at once. It is much more useful to build a baseline profile for the site: where content will be displayed, which editors are used, which card fields are required, how the site is cached, and who will maintain the grids after launch. That kind of profile helps you establish a consistent set of rules instead of wrestling with the plugin on every page.

In the official documentation, the settings are split across several areas: general plugin options, social share, pop up field selection, custom script, AI integration, My Account, event settings, and others. Not every project needs all of them. For a standard magazine site, the most important areas are the display method, card fields, Query Build, filters, styles, and performance. For a site with user authors, My Account and front-end submission become relevant. For an event site, event settings and the correct event date matter. For a case study catalog, custom post types and ACF are key.

Choose the Main Working Channel First

The official performance documentation recommends choosing how you actually use the plugin: shortcode or Elementor. The point of that setting is to avoid loading extra code for a mode you do not use on the site. If your editorial team works in Gutenberg, you do not need to treat the Elementor path as the primary one. If the whole site is built in Elementor, there is no reason to recreate the same sections with shortcodes just because a shortcode feels "more universal."

A practical order looks like this:

1. Decide where the main output will live: a regular WordPress page, an Elementor template, a Divi page, an archive, or a widget area.
2. Pick one primary channel and create a test block through it.
3. Check which styles and scripts are actually loaded on the test page after caching.
4. If the site uses shortcodes only on a few pages, enable related asset loading only where the shortcode is actually used, if that option exists in your version.
5. Keep the second channel only as a fallback for older pages or specific integrations.

This approach reduces the risk of "invisible" conflicts. For example, if a project has Elementor, Gutenberg, Divi, and several optimization plugins active, an external filter error may be caused not by the filter settings themselves, but by the page receiving an extra or outdated script after asset combination.

Define a Card Standard Before Working on Colors

A post card is not just a design element. It answers the visitor's question: "Is this worth opening?" So before choosing colors and hover effects, decide which details must always be visible. For most content sites, the basic standard looks like this: featured image, category, title, date or author, short excerpt, and a clear link. But different sections may need different sets.

In a "Top Stories" block, the title and image matter more than the excerpt. In a category archive, the excerpt helps explain what the piece is about. In an author block, it often makes sense to hide the author name because the whole block is already dedicated to one person. In a case study catalog, it is better to replace the date with ACF fields that describe the project type or industry. For events, the publish date is often irrelevant, while the event date is critical.

Working rule: if a field does not help someone choose a post, it clutters the card. The Post Grid Pro gives you many Field Selection toggles, but strong output often comes from removing extra elements, not enabling everything available.

What to Enable First

• Post Thumbnail: turn it on almost always if your content has solid featured images.
• Post Title: keep it as the main clickable element of the card.
• Post Categories: enable it for magazines and news sites where categories help visitors orient themselves quickly.
• Post Excerpt: add it on pages where visitors need context before clicking.
• Read More Button: use it for cards with a clear invitation to read, but do not overdo it if the title and image are already clickable.

What to Enable Only When Needed

• Post Tags: useful in thematic collections, but they often create visual noise.
• Post Comment Count: appropriate on an active blog where comments genuinely affect what readers choose.
• Post View Count: enable it only if view counts matter to your editorial logic and do not conflict with caching.
• Social Share: best used in cards for media projects where quick sharing directly from the list is genuinely useful.
• Advanced Custom Field: show it selectively, usually 1 to 3 values, otherwise the card becomes hard to scan.

Treat the Image as Part of the Grid, Not as a Standalone Picture

In a grid, the thumbnail has two jobs: to create visual interest and to maintain a steady page rhythm. If all images have different proportions, the plugin may display them correctly, but the composition will still feel random. First check which thumbnail sizes your theme generates, then choose the most appropriate size in the block settings. If there is an image height field, use it carefully: a rigid height can crop important parts of an image in an awkward way.

For news and magazines, a horizontal format often works well. For portfolios and case study catalogs, more square cards can be a better fit. In sliders, it helps if the main subject of each image is closer to the center, otherwise it may disappear when cropped. If the site already uses automatic image optimization, verify that it is not changing image dimensions after the first page visit.

Set Rules for Titles and Excerpts

Long titles are a common cause of uneven grids. In The Post Grid Pro settings for Elementor, the documentation describes title visibility options such as one line, two lines, three lines, or a custom length. That is more useful than trying to equalize everything with CSS. If the title is important for SEO and meaning, do not cut it too early. It is better to choose a list layout or give the card more space.

The excerpt should work as a hint. If it simply repeats the first words of the title, it is better to edit the excerpt in the post itself. If the excerpt takes up half the card on mobile, shorten it or hide it in compact blocks. Do not try to solve everything with one site-wide setting: a "Latest Articles" block and a "Case Studies" block may need different rules.

Check Popup and Social Share Before Using Them on a Live Page

The Pro version includes popup detail page and social share settings. They are not useful on every site. A popup works well when visitors need to preview content quickly without leaving the page: portfolios, case studies, quick cards, or short news items. But for long articles, SEO pages, and content with comments, it is usually better to send users to the full post.

Social buttons inside cards should only be enabled if your audience actually uses them. On many sites they take up space without generating clicks. If you enable social share, make sure the selected networks are relevant to your audience, the buttons do not conflict with the theme, and they do not add unnecessary clutter to every card.

Configure the Empty State

An empty result is a normal condition for filters and search fields. A user may select a category that has no content yet, or enter a query that returns nothing. In the Divi Content Tab settings, the documentation mentions the text No Posts found. In other modes, similar behavior may depend on the layout. Do not leave a technical phrase in place if it feels out of context. A short message in the site's language is a better choice.

Test the empty state on purpose: create a category with no posts, or run a search using a word that definitely does not exist. A good outcome is that the page does not break, the filter stays visible, and the visitor understands that they can choose a different section.

Create a Mini Playbook for Editors

If The Post Grid Pro will be maintained by an editorial team rather than a developer, write a short internal guide. It can be as simple as five points: which categories are used in the main grid, how many cards are shown, what kind of thumbnails fit, where to change the query, and how to verify the page after saving. A document like that protects the site from accidental changes better than any restriction.

For editors, it is especially important to explain the difference between changing a post and changing the grid. If a card does not appear in a block, that is not always a plugin error. The post may be unpublished, missing the required category, excluded by ID, assigned a different status, or tied to a different post type. Once that workflow is clear, site maintenance becomes much calmer.

Choosing the Display Method: Shortcode, Gutenberg, Elementor, or Divi

The Post Grid Pro does not have one single "correct" way to use it. The choice depends on who will maintain the page, where the grid will appear, and how flexibly its design needs to change. Official sources confirm support for Gutenberg, Elementor, Divi, and a universal shortcode generator. That is convenient, but it also creates a risk: different editors can produce a similar result, while the setup process is different in each one.

When a Shortcode Is the Better Choice

A shortcode is useful when you need stable output anywhere on the site: in the classic editor, in a widget, in a theme template, in a Gutenberg shortcode block, or inside a builder that does not have direct integration. You create the grid in The Post Grid generator, copy the shortcode, and paste it wherever the result should appear.

This method is strong when reuse matters. The same shortcode can be placed on multiple pages and then updated in one place. But there is a tradeoff: if an editor needs to adjust cards visually while assembling the page, a shortcode is less intuitive than Gutenberg or Elementor.

When Gutenberg Is More Convenient

Gutenberg blocks are a good fit for sites where content managers work in the native WordPress editor. The documentation describes separate blocks for a grid, list, hover layout, and slider, as well as importing ready-made sections. In this mode, the editor sees the block directly on the page and can adjust settings in the sidebar.

Gutenberg is especially convenient for magazine and blog sites where a page is built from several independent sections: a large "Top Stories" block, a category grid, a list of recent posts, and a collection of popular content. With this approach, naming matters: label blocks and pages clearly so the next editor can immediately tell which one is "Homepage News" and which one is "Category Archive."

When to Choose Elementor

Elementor is useful when the entire page is already built in it and the design depends on visual control: spacing, typography, colors, card behavior, buttons, and responsive layout. The Post Grid Pro documentation for Elementor separately describes the Content, Settings, and Style tabs, along with filter and archive template options.

For Elementor-based projects, the main risk is a mismatch between the preview and the published page. After changing a query, filter, or pagination setting, open the page in a normal browser window, clear the cache, and verify that visitors see the same result. If there is a conflict with Elementor settings or the theme, reproduce it first on a simple page without extra sections.

When Divi Makes Sense

Divi modules are useful for teams already building the site in Divi and not wanting to insert shortcodes manually. The official documentation lists modules for a grid, list, hover layout, slider, and filters. In this mode, the workflow is similar to Elementor: content settings live inside the module, while the design is adjusted through Divi's familiar panels.

If the site does not use Divi, there is no reason to enable that path for just one grid. The fewer unnecessary integrations you keep active on a page, the easier the troubleshooting and the lower the chance of style conflicts.

Queries and Content Selection: How to Build the Right Grid

Query Builder is the core of The Post Grid Pro. This is where it is decided which content ends up in the block. The official documentation covers post type, include and exclude by ID, limit, offset, taxonomies, categories, term operators, sorting, author, status, keyword search, Pro date range, and sticky posts. That is why query setup should be done more carefully than visual styling: a beautiful layout will not save the block if it is showing the wrong content.

Post Source and Manual Selection

Start with one question: should the block be automatic or editorially controlled? An automatic block pulls content by rule: latest posts from a category, posts by an author, random posts, popular posts, or related content. An editorial block is based on manual selection: include only specific IDs or exclude unwanted items.

Manual selection works well for an "Editor's Picks" block where stability matters. But if the page needs to update itself, it is usually better to rely on taxonomies and sorting. For example, a news section can pull the latest posts from the "News" category, while a case studies block can use the portfolio custom post type filtered by industry.

How to Verify IDs and Exclusions

After saving the query, open the live page and compare 2 to 3 cards with the source posts. Check that excluded content has not appeared because of cache or another block. If you are using offset, make sure the first item is truly skipped and the grid is not duplicating a large hero block higher on the page.

Taxonomies, Categories, and Condition Operators

Filtering by categories and tags looks simple, but this is where unexpected output often appears. If a post belongs to several categories, it may show up in multiple blocks at once. If your query uses several taxonomies, you need to understand how the plugin combines those conditions: should a post match all selected rules, or is one match enough?

For practical setup, it helps to create a test set of 8 to 10 posts with different categories and tags. Then you can immediately see how the grid changes when different conditions are selected. That is faster than trying to understand the behavior using hundreds of live posts.

Limit, Items Per Page, and Offset

Limit controls the overall amount of content in the output, while items per page controls how many cards are visible before pagination or loading more. These settings should not be confused. If you want to show 12 items at 6 per page, set the limit to 12 and display 6 per page. If you want to show all posts from a category with page navigation, the limit can be broader, but then speed and load matter more.

Offset is useful when the homepage already has a large featured story at the top and the next block should start with the following posts. But offset can easily create confusing behavior with filtering and pagination. If the block will use an Ajax filter, test offset separately: select a category, go to the next page, return to the original state, and make sure the order still behaves as expected.

Sorting and Quick Queries

Official materials mention sorting by title, creation date, modified date, and other parameters, along with quick modes such as popular, commented, related, or recent posts. For a standard blog, date sorting is usually enough. For a knowledge base, manual ordering or alphabetical order may be more useful. For a magazine with an active audience, a popular content block can make sense if views or comments actually carry editorial meaning.

Result check: after setting up the query, write down three expected cards in a note: the first, the last, and the excluded one. If they match the live output, move on to the design. If they do not, fix the query rather than the styles.

Card Layouts, Fields, and Styling: What to Configure After the Query

Once the query returns the right content, you can move on to the cards. The Post Grid Pro offers several layout families: grid, list, masonry, hover layouts, filterable grids, sliders, WooCommerce output, Easy Digital Downloads output, Gutenberg blocks, Elementor widgets, and Divi modules. Do not choose the most eye-catching option just because it is available. The layout should match both the content and the way the page behaves.

Grid, List, and Masonry

A grid works well for content with comparable cover images and shorter titles. It is a strong fit for magazine homepages, article collections, and case study catalogs. A list is better for news, where reading the headline and excerpt matters more than studying the image. Masonry is useful when cards have different heights and you want a lively editorial rhythm, but that kind of layout is harder to verify across responsive breakpoints.

For the first version, choose a simple layout. First make sure the content set is correct, image heights are consistent, and titles are readable. Then you can add hover effects, unconventional title placement, or a more complex grid.

Field Selection: What to Show in the Card

The Elementor and Gutenberg documentation describes field display settings for title, thumbnail, excerpt, metadata, date, categories, author, tags, comments, Pro view count, read button, social buttons, and ACF fields. The real question here is not "how many elements can I turn on," but "what helps the visitor choose a piece of content."

For a news grid, category, date, and title are usually enough. For an expert blog, the author may matter. For a case study catalog, custom fields such as industry, engagement type, location, or outcome may matter more. In a homepage slider, extra metadata often gets in the way because the block is in motion and the visitor needs to grasp the topic quickly.

A Safe Pattern for a Standard Block

• Thumbnail: enabled, with a consistent size or controlled height.
• Title: visible, line-limited, and not turning the card into a long text block.
• Excerpt: short if the page is not overloaded; hidden if the grid functions as a compact navigation block.
• Metadata: only what helps with selection: date, category, author, or a custom field.
• Button: visible if the card acts like a clear invitation to read; optional if both the title and image already link to the post.

Style Tab and Visual Hierarchy

The style tab in The Post Grid Pro documentation is broken down in detail by area: section title, post title, thumbnail and overlay, excerpt, metadata, social buttons, ACF fields, read button, pagination, filter, slider, card, and the overall container. That is convenient, but it can easily create visual noise: too many colors, borders, shadows, and hover states.

For a clean result, choose one main accent. For example, the category can be a colored label, the button can stay restrained, and the card can avoid a heavy shadow. Or the reverse: the card stays neutral, while hover reveals an overlay with a button and metadata. Do not combine a colored title, colored category label, bold card background, oversized button, and aggressive overlay all at once.

Read More, Hover Effects, and Mobile Readability

The read button and hover effects work well on desktop, but hover behavior changes on mobile devices. If important information is visible only on hover, mobile users may never see it. That is why key blocks should keep the title and basic metadata visible without hover.

If you need to change the button size, the documentation and support materials show two paths: in Elementor or Gutenberg, use the typography settings in the style tab; for shortcode output, use targeted CSS through Appearance - Customize - Additional CSS. Look for a plugin setting first, and add CSS only if the selected output mode does not expose the control you need.

.rt-tpg-container .rt-holder .rt-detail .read-more a {
  font-size: 18px !important;
  line-height: 1.35;
}

This snippet is based on a public RadiusTheme support response about the Read More button. Use it only for shortcode output if style controls are unavailable in your mode or do not produce the needed result. After adding it, open the page in a regular browser, check the cards at mobile width, and clear the cache if the change does not appear.

Filters, Ajax Pagination, and "Load More" Without Reloading

Filters and Ajax navigation are one of the main reasons to choose the Pro version. The official product page and separate feature pages describe filtering by categories, tags, authors, custom taxonomies, search, Ajax pagination, load more buttons, and loading on scroll. But these features require discipline: they work well when the query, taxonomies, and cache are not working against each other.

How to Build a Filter That Does Not Confuse Visitors

The filter should reflect the structure of your content. If the site has 40 categories, do not display all 40 as buttons above the grid. Choose 5 to 8 key categories or use a dropdown. If the filter is meant for a custom post type, first confirm that the selected taxonomy is actually attached to that post type and that the posts have terms assigned.

The front-end filter documentation for the shortcode generator notes that if a specific taxonomy is not selected, the output may include all available taxonomies. In practical terms, that means: for a clean front-end filter, it is better to explicitly select the terms you want rather than letting the block automatically display everything it finds.

Filter Type: Buttons, Dropdown, or Collapsible Block

Buttons work best for a short category set. A dropdown is better for longer lists and mobile pages. A collapsible filter is useful when filtering matters but should not occupy the top of the page. The Elementor documentation describes dropdown, button, and collapsable options, as well as enabling filters through Content - Filter.

After choosing the filter type, test the "all content" state, a selected category, an empty category, and returning to the original list. If search is enabled, test both a query with results and one without. It is better to use a human message such as "No content found" for the empty state rather than leave a technical string in place.

Ajax Pagination, Load More, and Infinite Scroll

The official feature page highlights several options: regular pagination, Ajax Pagination, Ajax Load More, and Ajax Load on Scroll. The right choice depends on the page type. Regular pagination works well for archives where URLs and predictable navigation matter. Ajax pagination is useful in compact homepage blocks where you do not want to reload the full page. A Load More button fits article collections and magazine pages well. Infinite scroll looks modern, but it is less suitable for pages where visitors need to reach the footer, a form, or internal links lower on the page.

How to choose navigation for a post grid

Use case	What to choose	What to verify
Category or author archive	Regular pagination or clean Ajax pagination	Does the selected category persist, and does the page count stay correct?
Magazine homepage	Load More button	Make sure content from the top sections is not duplicated.
Case study catalog with a filter	Ajax filter plus pagination or loading more	Check whether the filter still works after moving to the next batch of cards.
Inspiration feed or curated collection	Load on scroll	Confirm that it does not get in the way of the footer, form, or internal links.

Cache and Ajax: Where Responsibility Shifts

If a static grid works but the Ajax filter or load-more behavior is acting strangely, do not start by reinstalling the plugin. Check page cache, JS combination, deferred script loading, and CDN rules. The Post Grid support threads include issues involving filters, pagination, and conflicts with Elementor, Divi, and themes. That does not mean the feature is unreliable overall. It means an interactive block depends on how the page assembles and serves scripts.

For testing, temporarily disable JS optimization on the test page, clear the cache, and see whether the behavior comes back to normal. If it does, add an exception for the plugin scripts or disable aggressive optimization only for the page with the filter. If it does not, go back to the query and taxonomy settings.

Custom Post Types, ACF, and Archive Templates

This is where The Post Grid Pro becomes more useful than a standard "latest posts" block. Official materials confirm Pro support for custom post types, ACF, archive/single page builder, event settings, and front-end content submission. These features require more careful preparation because they affect the site's structure, not just the appearance of the cards.

Custom Post Types: When a Grid Becomes a Catalog

A custom post type makes sense when the content is different from a standard blog. Case studies, portfolios, jobs, events, recipes, testimonials, courses, and projects are often better stored separately from regular posts. The Post Grid Pro can display those types in a grid, but the post type itself still needs to be registered correctly by another plugin, the theme, or custom code.

The check is simple: open the dashboard and confirm that the custom post type appears as its own section, has published entries, includes featured images, and uses the needed taxonomies. Then select that type as the source in Query Builder and set a limit. If the entries do not appear, check publication status, access permissions, and whether the taxonomy is linked to that post type.

ACF Fields in Cards

The ACF documentation describes enabling custom fields through Shortcode Generator - Field Selection, selecting a field group, hiding empty fields, and displaying only the value. In real projects, this is useful for catalogs and expert content: a card can show not only the title and excerpt, but also the city, service price, course duration, difficulty level, event date, or project type.

The main risk is overloading the card. An ACF field should help someone make a choice, not turn the card into a mini table. In most grids, 1 to 3 additional values are enough. Full specifications are better left for the single post page.

How to Validate ACF Output

1. Create one test post with filled ACF fields and one post with empty fields.
2. Enable the field group in The Post Grid Pro settings.
3. Check the setting that hides empty values so a card without data does not show blank lines.
4. Open the live page and compare the output to the source post.
5. Check mobile width: long values should not break the card.

Archive and Single Page Builder

The Pro documentation describes creating templates for single posts and archives: Single Post, Post Archive, Author Archive, Search Archive, Category Archive, Date Archive, Tags Archive, and other variations. This is a powerful feature, but it should not be enabled without a plan. If you create an archive template, it may replace the theme's default archive layout. That is useful for creating a consistent design across category and author pages, but it requires checking every affected archive URL.

Before enabling an archive template, make a list of the pages it will affect: categories, tags, authors, search, and dates. Configure one template on a test category or site copy, then check breadcrumbs, SEO titles, pagination, filtering, and duplicate content risks. If the theme already has a strong archive layout, it may be better to use The Post Grid Pro inside individual pages rather than replacing the entire archive system.

Events and Date Handling as a Separate Behavior

RadiusTheme's product page mentions the ability to turn standard posts into an event display with start and end dates. The changelog also includes Event Query improvements. That is useful for event sites, but you need to separate the WordPress publish date from the event date. Visitors care about the next upcoming event, not the most recently published post.

If you are building an events block, check which fields are used for the date, how past events are hidden, and what happens when the list is empty. Do not assume the behavior is automatic until you test it on a sample set: one future event, one past event, one without a date, and one assigned to multiple categories.

Ready-Made Sections and a Practical Magazine Homepage Setup

Official RadiusTheme materials show that The Post Grid Pro includes ready-made sections and templates for Elementor and Gutenberg. This is especially useful for news, magazine, gaming, sports, travel, and food blogs where the homepage is not one continuous feed, but a set of purposeful sections. Below is a practical example you can reproduce on a test page.

Goal of the Setup

The goal is to build a homepage for a small magazine: a prominent set of recent stories at the top, a filterable grid by category below that, then a compact slider of popular posts and an author block. This setup shows the plugin at its best: different sections use different queries and layouts, but all are managed through the same The Post Grid Pro workflow.

Preparation

Before building the page, prepare at least 12 published posts with featured images, 3 to 4 categories, 2 authors, and short excerpts. If the test content is too thin, the grid will look empty and the filter will not reflect real behavior. Check the thumbnail for every post: identical proportions are not required, but very narrow or vertical images can break the rhythm of the cards.

Setup Steps

1. Create a new page in WordPress and choose the main editor: Gutenberg or Elementor.
2. Add the first The Post Grid section using a simple grid layout and a "latest posts" query. Limit the output to 4 to 6 items.
3. In the second section, choose the categories that should appear in the filter, enable the front-end filter, and set 6 to 9 cards for the initial view.
4. For the third section, choose a slider layout if it is available in your version, and use a quick query for popular, commented, or recent posts.
5. Create a separate block for an author or category by using an author filter or a specific category.
6. Configure card fields: in the top block, keep the image, category, and title; in the filterable grid, add the excerpt; in the slider, remove extra metadata.
7. Save the page and open it on the live site.

Expected Outcome

Visitors see not a long undifferentiated feed, but a controlled showcase: the hero block immediately surfaces fresh content, the filter helps them move to a category, the slider draws attention to additional posts, and the author block deepens navigation. At the same time, the editor can change queries, card counts, and section styles without editing theme templates.

A Common Pitfall

If you import a ready-made section, it may look polished, but that does not mean it matches your category structure. Do not leave the demo query settings in place. Right after importing, open Query Build and check the source, limit, categories, sorting, and number of cards per page. Otherwise, you can end up with the classic problem of "the template looks good, but it is showing the wrong content."

Result Check: What to Review on the Live Site

After setting up the grid, do not just check whether the block "appeared." The live site should show the right content, stable layout, correct links, working filters, reasonable speed, and predictable behavior on mobile screens. A solid review at this stage can save hours of later troubleshooting.

Content Check

Compare the visible cards to the configured query. If the block is supposed to show the "Reviews" category, it should not display news from another category. If ID exclusion is used, excluded items should not come back after Ajax loading. If the block displays ACF fields, check the values on real posts, not just on a single test entry.

Visual Check

Open the page at desktop, tablet, and phone widths. Check the following:

• Cards do not change height unpredictably because of overly long titles.
• Thumbnails are not stretched and do not turn the grid into a collection of awkwardly cropped faces or logos.
• The filter fits on one line or wraps cleanly.
• The read button is accessible on mobile screens and does not depend only on hover.
• The slider does not overlap adjacent content or shift the page during load.

If you need to equalize card height in shortcode output, The Post Grid support materials include a CSS example using min-height for .tpg-shortcode-main-wrapper .rt-holder. Use that approach carefully: a height of 500px may help one grid and ruin another. It is better to solve the issue first through image settings, excerpt length, and title line count.

.tpg-shortcode-main-wrapper .rt-holder {
  min-height: 420px;
}

Add the snippet through Appearance - Customize - Additional CSS or another safe custom CSS tool. After checking the result on mobile width, reduce or increase the value as needed. If the cards become too tall and create empty space, remove the snippet and go back to the layout settings.

Interactive Behavior Check

For Ajax filtering and load-more features, walk through the page like a normal visitor. Select a category, click the next page, return to "all," try search, refresh the page, and repeat. If the filter state resets or cards are duplicated, record the exact path: what was selected, which page you were on, which filter was active, and after which click the error appeared. Notes like that speed up support conversations and make it easier to determine whether cache is involved.

SEO and Accessibility

A post grid can improve internal navigation, but it does not replace a sound site structure. Check that card titles remain links to the posts, that the page does not end up with multiple identical H1 headings, that images have proper alt text in the posts themselves, and that important text is not hidden only inside an image or hover layer. If you are creating an archive template, separately verify the page SEO title, breadcrumbs, and pagination.

Performance, Security, and Safe Refinements

A plugin that displays many cards will inevitably affect page speed: it pulls records from the database, loads images, styles, filter scripts, and sometimes a slider. The official performance documentation recommends choosing the usage mode - shortcode or Elementor - so unnecessary assets are not loaded, and enabling script loading only on pages where the shortcode is actually used. This is a good baseline principle: keep active only what the current site actually needs.

How to Avoid Overloading the Page

Start with the number of cards. On a homepage, there is rarely a need to show 30 items in a single block. It is better to build several sections with 4 to 8 cards each and different queries than one oversized grid. For archives, use pagination or a load-more button. For sliders, do not add too many items if visitors can only see a few cards at a time anyway.

The second factor is images. Use appropriate thumbnail sizes, not full-size photos. If the theme or image optimizer already creates suitable sizes, select those in The Post Grid Pro settings. Do not increase image height with CSS if the source thumbnails are too small: the outcome will be blurry.

Security and Updates

Like many popular WordPress plugins, The Post Grid has a history of fixed vulnerabilities in public security databases. Patchstack shows an active vulnerability disclosure program and no currently open issues at the time of review, while the RadiusTheme changelog and WordPress.org record fixes related to permissions, nonce handling, CSS saving, and non-public posts. The practical takeaway is simple: use a current version, review the changelog before updating, and do not grant grid editing permissions to users who do not need them.

Pay particular attention to features where visitors or authors interact with the live site: front-end post submission, user account areas, content editing, and image uploads. The front-end submission settings include the new post status, maximum image size, and the behavior of deleted content. For most sites, it is safer to send user-submitted content into a pending review state rather than publish it immediately.

Template Override Instead of Editing the Plugin

If you need to change the card HTML more deeply than the settings allow, do not edit the plugin files directly. The official FAQ documentation explains layout file overrides through the theme or child theme, with separate paths for shortcode, Elementor, and Gutenberg. The idea is simple: copy the required layout from the plugin folder into the the-post-grid folder in your theme and modify the copy.

Use this method only on a test copy of the site. Before making changes, keep the original file, name the override template according to the original layout number, and after each plugin update, verify whether the source layout changed. If the task can be solved with a setting or a small CSS rule, do not move to a template override.

A Small CSS Tweak for Equal-Width Cards

If one card in the grid looks different because of custom markup inside the post, The Post Grid support has suggested checking the conflicting HTML/CSS and, if needed, setting container widths. A snippet like the one below should be used only after visually checking the specific page:

.rt-holder,
.rt-row {
  width: 100% !important;
}

Verification after adding it: refresh the page without cache, open the problem grid, and compare card widths on desktop and phone. Rolling it back is simple - remove the snippet from Additional CSS. If the tweak affects other grids, narrow the selector by using a unique page or container class.

Useful Pairings with WordPress Features and Neighboring Plugins

The Post Grid Pro rarely works in isolation. It usually sits next to a theme, an editor, a caching plugin, ACF, WooCommerce, an SEO plugin, a subscription form, or a role management system. These combinations should be planned carefully: not as a claimed official integration unless the sources confirm it, but as a practical split of responsibility between WordPress tools.

ACF Plus The Post Grid Pro for a Case Study Catalog

The documentation confirms that the Pro version can display Advanced Custom Fields values. This is a strong setup for catalogs of case studies, experts, real estate listings, events, jobs, or training materials. ACF stores the structured data, while The Post Grid Pro handles post selection, card layout, and placement on the page.

The setup order is simple: first create an ACF field group and attach it to the needed post type. Then fill in several test entries. After that, choose the content source in The Post Grid Pro, enable custom fields in Field Selection, choose the group, and check how the fields look in the card. Do not start with the design. If a field is empty or not attached to the post type, a polished layout will not save it.

A likely issue is empty values or overly long data. The ACF workflow documentation includes a hide empty fields setting and a show only value mode. Use them if the card needs to stay compact. Result check: a card with a filled field shows the value, a card without a value does not leave a blank line, and the mobile layout stays intact. Rollback: disable custom fields in Field Selection and return the card to title, thumbnail, and excerpt.

SEO Plugin Plus Archive Grids

The RadiusTheme product page mentions SEO compatibility and references popular SEO plugins. In practice, that does not mean automatic ranking growth. It means the grid should not interfere with the page's basic structure: proper headings, links, metadata, canonical URLs, and archive indexability.

If you are creating an archive template through The Post Grid Pro, let the SEO plugin keep its role: page title, description, canonical, schema, and breadcrumbs if those are configured in the theme or SEO tool. The Post Grid Pro should be responsible for the visual post display and user-friendly navigation. After publishing, check the page source or SEO preview: make sure you do not have two identical main headings, important text is not hidden inside an Ajax block, and card links still function as regular post links.

If a filtered page creates many states without separate URLs, do not treat each state as its own SEO page. The filter is there to help users find content within an already open page. For a search-focused landing page, it is better to create a separate archive or category page with a clear URL and static context.

Cache and Image Optimization

The cache setup should be handled carefully. The plugin may load cards dynamically, while the caching layer may store old HTML, combine JS, or change asset loading order. This matters especially for Ajax filters, load-more behavior, and sliders. Do not disable caching across the whole site permanently. First identify the smallest necessary exception: a specific page, a specific JS file, deferred loading for one block, or cache clearing after a grid update.

For images, it is best to use native WordPress sizes and an optimizer that does not break thumbnails. If the cards load overly heavy images, the page will be slow regardless of the plugin itself. If images are swapped after load and change card heights, check lazy loading behavior and fixed thumbnail height settings. Result check: open the page while logged out, scroll to the block, try the filter and loading behavior, then repeat after clearing the cache.

WooCommerce and EDD as Separate Showcases

The The Post Grid Pro product page lists WooCommerce layouts and Easy Digital Downloads layouts for shortcode output. That does not turn the plugin into a full store builder, but it does let you show products or digital items as controlled cards. For WooCommerce, keep the responsibilities clearly separated: WooCommerce handles the product, price, availability, cart, and checkout; The Post Grid Pro handles the visual showcase and navigation block.

Do not use the grid to interfere with critical purchasing steps: the cart, checkout, order statuses, or transactional emails. Use the showcase for curated collections such as "popular products," "new arrivals," "related content," or "digital downloads in this category." After setup, check that each card links to the correct product or post page and does not break the user's path.

User Roles and Front-End Submission

Front-end submission is useful for guest authors, communities, classified directories, local news, or internal editorial teams. But public content submission always requires control. The Post Grid Pro can provide the form and account area, while WordPress handles users, roles, and post statuses. For external contributors, it is safer to use a pending review status and limit image size.

Test this flow with a separate user account. An administrator sees too much and can easily miss a permissions issue. A test author should open the [tpg_my_account] page, log in, create a post, see it under "My Posts," edit it, and delete it according to the intended workflow. If the post does not appear in the grid after moderation, go back to Query Build: the new entry may not have received the required category or may belong to a different post type.

When a Combination Is Better Avoided

Do not add a neighboring plugin for one single feature if The Post Grid Pro already covers the task. For example, if you only need a simple category filter, you may not need a separate filtering system. If you only need one slider block, first check the built-in slider layout. If you need complex faceted filtering across many parameters, a dedicated filter solution may be more appropriate, but then it should be tested separately with Query Build and caching.

A good tool combination has a clear boundary of responsibility. A bad one looks like this: several plugins all modify the query, cache the output, override the card template, and register their own Ajax handlers. In that situation, bugs become hard to reproduce. For an important page, fewer tools with clearer behavior is usually the better choice.

Troubleshooting Common Issues

Problems with The Post Grid Pro are usually easiest to solve by starting with the symptom. There is no need to disable half the site right away. First identify where the issue lives: the query, post data, filter, styling, caching, editor integration, or access permissions. Below is a practical troubleshooting map for typical cases.

The Grid Is Showing the Wrong Posts

Symptom: the editor shows a certain limit or category, but the live page displays different content, too many cards, or posts from every category.

Possible causes: the block was not saved, the page contains a different shortcode, Query Build is using the wrong source, the category filter was not selected explicitly, cache is serving old HTML, or the block was imported from a ready-made section with demo settings.

What to check: open the settings for the exact block, then review the post source, include/exclude ID rules, limit, categories, sorting, and items per page. Make sure you are editing the same block that appears on the live page.

How to fix it: save the block, clear the page cache, and open the page in a private window. If the problem remains, create a test block with a minimal query and add conditions gradually.

The Filter Works on the First Page but Breaks After Pagination

Symptom: a visitor selects a category and sees the correct content, but after moving to the next page, posts from all categories appear or the filter state resets.

Possible causes: a conflict between Ajax pagination and cache, an incorrect filter and pagination combination, an outdated script after an update, a JS optimization conflict, or a problematic mix of multiple post types and filters. The The Post Grid changelog has included fixes related to pagination and taxonomy builder, so updates are especially important here.

What to check: temporarily disable JS combination and deferred loading on the test page, clear the cache, and test the same grid without the CDN. Then verify whether specific categories are selected in Query Build.

How to fix it: update the plugin, save the block settings again, configure an exception in the JS optimizer, or choose a simpler navigation type. If the issue repeats on a clean page, document the exact steps and contact RadiusTheme support.

Cards Have Different Heights or Images Look Uneven

Symptom: the grid jumps visually, one card sits lower than another, thumbnails have different heights, text cuts off unexpectedly, or buttons appear at different vertical positions.

Possible causes: inconsistent source image proportions, overly long titles, masonry enabled, custom HTML inside the post, theme styles, or missing image height settings.

What to check: compare the source thumbnails, enable a limit for title or excerpt length, and review the image size and image height settings. If masonry is enabled, remember that the layout is intentionally designed to allow different card heights.

How to fix it: first adjust image size and card fields in the interface. Use CSS with min-height only after testing, because a fixed height can create empty space on mobile screens.

Styles Do Not Apply After Changes in the Editor

Symptom: changes are visible in Elementor or Gutenberg, but the site still shows the old color, old button size, or previous spacing.

Possible causes: page cache, CSS minification cache, CDN, stronger theme styles, CSS added in the wrong place, or the wrong output method being used.

What to check: open the page while logged out, clear the cache, temporarily disable CSS minification, and confirm whether the selector targets shortcode, Gutenberg, or Elementor output. The Post Grid uses different containers depending on the mode.

How to fix it: use the built-in style controls in the selected editor. If you add CSS, make the selector specific enough and test only the needed page. Do not edit the plugin CSS files directly.

Front-End Submission Uses the Wrong Status

Symptom: a user submits content, but it is published immediately, does not appear in the account area, or disappears after deletion in an unexpected way.

Possible causes: the new post status in front-end submission settings is inappropriate, the [tpg_my_account] page is not configured, the user role lacks the required permissions, or the maximum image size is too small.

What to check: the account page, the [tpg_my_account] shortcode, the submitted post status, image size, the role of the test user, and the "My Posts" list.

How to fix it: for public contributors, use a pending review status, set a reasonable image limit, and test the flow with a non-admin user.

Who The Post Grid Pro Is Best For and When Another Option May Be Better

The Post Grid Pro is a strong fit for sites where content needs to be organized, not simply displayed. If you have a large number of posts, several categories, multiple authors, custom post types, ACF fields, archive pages, or a need for filters without page reloads, the plugin covers most of that without requiring a custom template build.

It is especially useful when a team works across different editors. One site may use Gutenberg for editorial pages, Elementor for landing pages, and shortcodes for older sections. The Post Grid Pro provides a shared approach to post output across all of those tools. That is useful for agencies and projects that evolve gradually.

But there are situations where another path may be better. If you need an extremely lightweight page with one simple grid, the built-in Query Loop or a minimal block plugin may be faster. If the card design must exactly match a complex custom template with nonstandard business rules, building a custom block or theme template may be cleaner. If the site is already built on a specialized magazine builder, there is little reason to install a second large tool just for a few cards.

Another point is editorial responsibility. The more options the plugin provides, the easier it becomes to create inconsistent styles across different pages. To keep the site visually coherent, define 2 to 3 approved patterns: a compact grid, a magazine section, a content list, and a filterable showcase. Everything else should be changed only deliberately.

Questions Worth Answering Before Launching the Grid

Can The Post Grid Pro be used only with standard WordPress posts?

Yes. For a regular blog, you can start with standard posts and categories. The Pro version becomes especially useful when you need custom post types, ACF fields, Ajax filters, advanced layouts, sliders, or archive templates, but the core workflow can absolutely be tested using normal posts first.

What should I choose for the first setup: shortcode or an editor block?

If the site is managed in Gutenberg, start with a block. If the page is built in Elementor or Divi, use the matching widget or module. If you need reusable output that can be inserted in different places, choose a shortcode. The key point is not to mix several methods for the same section without a real reason.

Why is the filter showing too many categories?

Most often, a specific term set was not selected and the plugin is picking up all available taxonomies. Check Query Build and the front-end filter settings. For a clean interface, it is better to explicitly choose the categories that should be visible to visitors and hide the rest.

Can ACF fields be displayed inside cards?

Yes. The official documentation confirms ACF support in the Pro version. Enable custom fields through Field Selection, choose the field group, and check how empty values are handled. In a grid, it is usually better to show only the fields that help visitors choose the content, rather than turning the card into a full data panel.

Will the plugin affect site speed?

Any block with many cards, images, and Ajax behavior affects loading speed. The Post Grid includes performance settings, including the usage mode selection and loading scripts only where the shortcode is needed. In practice, that means: limit the number of cards, use thumbnails of the right size, avoid unnecessary integrations, and check the page after caching.

Can card templates be changed with code?

Yes. The documentation describes overriding layout files through a theme or child theme for shortcode, Elementor, and Gutenberg. That is safer than editing plugin files directly. But this method is only necessary for substantial HTML customization. For appearance changes, settings and CSS should be your first options.

What should I do if the layout breaks after an update?

Start by clearing the cache and checking the changelog. Then open a test page with a minimal grid. If the problem affects only one page, review the block settings and custom CSS. If it affects all grids, temporarily disable CSS and JS optimization and check for a conflict with the theme or builder.

When can this plugin be unnecessary?

If you only need one simple feed without filters, CPT, ACF, sliders, or a visual builder, you can start with native WordPress blocks or a lighter solution. The Post Grid Pro is most valuable on sites with multiple curated sets, filters, ready-made sections, editorial workflows, and ongoing maintenance of content blocks.

When The Post Grid Pro Is the Right Choice

The Post Grid Pro is worth using when a site has outgrown the standard post feed and needs controlled content showcases. It helps bring together queries, layouts, filters, Ajax navigation, ACF fields, custom post types, and different WordPress editors into one workable system. With careful setup, it does more than decorate a page - it improves navigation: visitors find content faster, editors build sections faster, and site owners get a clearer way to grow the archive.

Before launch, verify the foundation: category structure, thumbnails, user permissions, cache, the selected editor, and a test page. Then build a simple block, validate the query, configure the cards, and only after that enable filters, Ajax pagination, sliders, ACF, and archive templates. That order reduces risk and makes troubleshooting much more predictable.

If, after reading this guide, you already know which content you want to display, which editor you plan to use, and how you will verify the result on the live site, you can download the The Post Grid Pro archive and test it on a page copy or a separate draft. Do not move a complex block straight onto the homepage: first validate one working setup, then scale the successful configuration across the rest of the site.