Post Category Image Grid and Slider Pro - WordPress Plugin

How to Set Up Post Category Image Grid and Slider Pro

This guide to Post Category Image Grid and Slider Pro will help you prepare categories for display, give them clear images, build a category grid or slider, and make sure visitors can navigate to the right section of your site. We’ll walk through the process, from reviewing your WordPress category structure to adding the block to a page, checking it at different screen sizes, and safely troubleshooting cards that don’t look the way you intended.

The plugin works with taxonomy terms, not individual posts in a feed. By default, these are post categories, but you can use another taxonomy if it’s available on your site. You can assign an image to each term, then display the terms in a grid or slider. This is useful when you want categories to serve as prominent entry points on a blog page, magazine, homepage, knowledge base, or archive navigation page.

The practical approach is simple: first organize your categories and check their links, then add visual cues, and only then choose how to display them. If you start with a shortcode and a collection of random images, you can end up with a polished but useless block full of empty or duplicate categories. Prepare the data in the right order, and you can use the same terms in a grid on a landing page and a compact slider in a sidebar or at the bottom of an article.

What the Plugin Builds and Why Categories Matter

Post Category Image Grid and Slider Pro turns a list of categories into a visual navigation block. A card typically includes an image and category name, with an optional post count and description. Clicking it takes visitors to that category’s archive. The plugin doesn’t replace the post editor, create new posts, or control archive content. Its purpose is to make the site’s existing structure easier for visitors to navigate.

This distinction matters when you configure the plugin. A category card with a beautiful image won’t create a useful section if the archive has no posts. If the category link leads to a page with the wrong template, the image isn’t the problem. But when the text and images are ready and visitors still have trouble distinguishing between sections, a grid or slider can provide a helpful navigation layer between the homepage and the archives.

The Ingredients: A Term, an Image, and an Archive Link

Each card starts with a term. In the standard setup, that’s a category under Posts - Categories. A category has a name, slug, description, optional parent category, and a permalink to its archive. Once the plugin is active, you can add a custom image from the category management screen. The plugin uses these details to build a grid or slider.

It helps to think of the block as having five parts:

• Term provides the name and link to the archive.
• Term image helps visitors recognize a category before reading its name and should match its subject.
• Post count shows how much content a section contains, if that option is enabled.
• Description adds context, but is useful only when it’s concise and specific.
• Display settings determine which terms appear in the block, their order, and how they’re presented.

There’s no hidden post-selection mechanism here. Visitors see a simple path: category, card, archive. The more carefully you prepare your terms, the less the block feels like decoration and the more it helps people find their way around.

Grids and Sliders Serve Different Purposes

A grid works well when visitors need to compare several equally important sections at a glance. It shows all selected categories at once, requires no scrolling, and fits well near the top of a blog page, in a knowledge base, or on a homepage with room for several large cards. Choose the number of columns based on the theme’s content width and the number of categories, not on how many cards you can squeeze onto one screen.

A slider is useful when there are more categories than you can comfortably show at once, or when you want to keep the page compact. It displays some of the cards and provides arrow or dot navigation. Its settings let you choose how many terms are visible and how many positions the row moves at a time. But a slider doesn’t have to be your first choice. For a short list of three or four sections, a grid is usually easier to scan and doesn’t require extra interaction.

Check the purpose before you configure the block: Picture a new visitor who doesn’t recognize your category names. If they can choose a section from its image and short title, the visual block is doing its job. If the cards are hard to distinguish without lengthy explanations, revisit the category structure and images first.

Who Can Benefit Most from the Plugin

This tool can be a good fit for editorial sites, magazines, recipe sites, educational sites, service blogs, and knowledge bases. Each has several topic areas, and each one leads to a collection of posts. For example, a home improvement site might feature categories such as “Floor Plans,” “Materials,” “Lighting,” and “Budgeting.” A service knowledge base might include “Getting Started,” “Configuration,” “Integrations,” and “Troubleshooting.” A visual grid makes the first choice easier and saves you from building a separate landing page for every topic.

The plugin may be unnecessary for a site with only one active category or one that relies entirely on its menu and search. It also won’t handle complex filtering across multiple criteria. The plugin displays categories and links to their archives; it doesn’t create an interactive post catalog. If visitors need to filter posts on one page by tags, author, date, and custom fields, you’ll need a different kind of solution.

What to Expect from the Plugin

The product’s official descriptions confirm two main display modes, category images, controls for the title, count, and description, category selection and sorting, and slider settings for dots, arrows, autoplay, interval, and speed. The Pro edition lists additional design options, a broader range of settings, and support for several page builders. The fields available to you may differ between editions and updates, so check the interface in your installed version instead of relying on a screenshot from another version.

Don’t treat every category as a permanent marketing block. Keep its image and description up to date. If a category changes its focus, update the card along with the archive content. That way, the card accurately represents what visitors will find when they follow its link.

Prepare Your Site: Categories, Images, and Placement

Preparation for this plugin starts in the category list, not the installation menu. A category card is only as clear as its name, archive, and content. Before installing the plugin, open Posts - Categories and review the structure from a visitor’s perspective. Remove duplicates, rename overly broad categories, confirm that the categories you need have posts, and check that their archives don’t show an empty page or an unexpected template.

Decide which categories should appear in the first block. On a small site, it’s usually better to select three to six key categories than to show every technical or internal term. On a large magazine, you can plan separate entry points for main topics, narrower subcategories, and temporary collections. This list will help you choose between selecting terms and excluding them: first decide each category’s editorial purpose, then configure the display.

Review Categories Before Assigning Images

Open the archive for each category you’re considering in a separate tab. Check not only that posts are present, but also what appears on the first page. If a category mixes unrelated subjects, the card will promise one thing and the archive will show another. If it has only a few posts, consider whether to show the count. A small number isn’t an error, but it can distract from the main action. If a category has no content yet, it’s safer to leave it out of the public grid until it’s ready.

Review four parts of the category structure:

1. Category name. Keep it short, distinct, and understandable without a paragraph of explanation.
2. Slug and link. After changing a slug, save the WordPress permalink settings only if you actually changed the permalink structure. Then open the archive and check that it loads correctly.
3. Description. Use one or two sentences about what’s in the archive, rather than repeating the name or listing keywords.
4. Content. Each selected category should contain published posts that match what its card promises.

You can save this list as an editorial checklist. It’s especially useful when different authors manage categories: they may change posts and names, while the person responsible for the navigation page can check periodically that the grid is still up to date.

Choose Images That Set the Right Expectations

A category image needs to work at a small size. Visitors notice the main shape, color, and subject before they read the title. That’s why a simple, focused image often works better than a detailed photo full of small objects. For “Integrations,” you might use a close-up of connected panels; for “Recipes,” a recognizable finished dish; for “Lessons,” a familiar work item. Avoid text in images when the image alone can convey the idea. Text can become hard to read after cropping or on smaller screens.

Try to give the images a consistent visual style. They don’t all need the same colors, but an arbitrary mix of photography, low-quality icons, collages, and screenshots can make the grid feel messy. Check usage rights and keep the original files somewhere you can find them, so you can replace an image easily if you change themes or need a different crop. For categories with frequently updated content, choose images that will remain relevant instead of seasonal promotions or temporary slogans.

Image Size, Cropping, and Aspect Ratios

The plugin lets you choose from WordPress image sizes, and the Pro edition offers control over image height. That doesn’t mean you should set the same fixed size without checking how it looks. First see how the theme crops thumbnails in the container. Then choose images with some extra space around important details, especially near the edges. Cards with different original aspect ratios may look uneven if the theme or plugin styling doesn’t standardize their height.

A practical approach is to prepare copies of your images with consistent framing, assign them to four or five test categories, add a temporary grid, and check it on wide and narrow screens. If important objects are cropped out, adjust the files or the height setting first instead of trying to compensate with a pile of ad hoc CSS rules. The images should be recognizable even without the titles, and cropping shouldn’t remove their main subject.

Where to Place the Block to Help Visitors Navigate

Choose the placement based on what visitors need to do. On a homepage, the block usually works well after a short introduction, once people understand the site’s focus and are ready to choose a topic. On a blog page, it can go before the latest posts so visitors aren’t limited to the chronological feed. In a knowledge base, a grid can go just below the section heading, but it shouldn’t replace search or breadcrumbs. A category slider in an article makes sense only if it helps visitors explore related topics instead of repeating the main menu.

Check the width of the theme’s parent container. In a narrow content column, four grid columns will feel cramped even if they look fine in the editor. If the block sits next to a sidebar, a compact slider showing a few cards may work better. Choose the placement first, then the number of columns and visible items. This avoids a common problem: configuring the block on a full-width demo page and copying those settings into a narrower template on the live site.

Back Up Your Site and Choose a Test Page

The plugin shouldn’t change your post content, but installing a new extension is a good time to follow standard WordPress maintenance practices. Make a current backup through your host or chosen backup tool, especially if the site hasn’t been updated in a while. Then choose a test page or draft and start there. You can check a shortcode, block, or page builder element without changing the homepage during peak traffic.

At a minimum, know how to disable the plugin from the Plugins list if it conflicts with an older theme or file optimization. This isn’t a prediction that something will go wrong; it’s a standard reversible step. Make a brief note of which categories you used, which display mode you added, and where the test page is. It will save time if you need to troubleshoot later, because you won’t have to guess which of several similar shortcodes created a particular block.

Preparation checklist: Before installing, have a short list of active categories, clear images, working archives, and a test location for the block. Then configuration is about choosing how to display the categories, not trying to fix editorial problems with styling.

Install the Plugin and Run an Initial Check in WordPress

Install the plugin package for the edition you obtained using the standard WordPress process: open Plugins - Add New, choose the option to upload a plugin, complete the installation, and click Activate. If you obtained the plugin through a managed directory or an extension bundle, use the installation method provided by that service. Don’t edit the plugin files manually. After activation, return to the category management screen.

Don’t start the first check with a long shortcode. Look for the new image field in the category interface or a section related to Category Image, and assign an image to just one test category. Save the term, reopen it for editing, and confirm that the selected file appears as expected. Then check the category’s public link. This small test helps you verify two separate things: whether the category data saves correctly and whether the block displays correctly.

What You Should See After Activation

Based on the official description and the WordPress directory listing, the plugin’s core features include a category image field, two display modes (grid and slider), and editor blocks. The names and locations of controls in your admin panel may differ from those in older instructions. Focus on what they do: you should be able to open a category, add an image, and then place the display on a page using a shortcode or an available block.

If the image field doesn’t appear, don’t reinstall the plugin right away. First refresh the category management screen, exit Quick Edit, and open the full edit screen for a term. Make sure you’re viewing post categories, not tags or another type of taxonomy. If the field appears in only one mode, document that workflow for editors and don’t try to change the data from a screen where the plugin doesn’t add the field.

Build a Category Grid, from a Basic Shortcode to Useful Navigation

A grid is the most straightforward way to start with Post Category Image Grid and Slider Pro. Visitors can see several categories at once, and editors can easily compare the settings with the result. Even if you plan to use a slider later, it’s helpful to build a grid on a test page first. It shows all selected terms without hidden content and makes it easier to spot empty, poorly named, or visually inconsistent cards.

The basic shortcode for this mode is [pci-cat-grid]. Add it to a Shortcode block, a text field that processes shortcodes, or a theme template using a standard WordPress method. Don’t put it in a plugin file, because an update will overwrite your changes. If you need to display it in a template, use a child theme and test it on a copy of your site.

Start with the Smallest Working Example

Create a draft page with a clear name, such as “Magazine Navigation.” Add just the shortcode [pci-cat-grid], save the draft, and preview it. Don’t worry yet about whether the block looks finished. First confirm that it renders at all. If cards appear, check that their names match your categories, the links open, and images appear for terms you’ve already assigned images to.

If the block displays every category, don’t assume it’s an error. That’s expected behavior for the basic version. Note which terms appear, then use the settings to limit the list. If the shortcode itself appears on the page instead of a block, the editor element you chose may not process shortcodes, or the page may use a nonstandard template. Move the shortcode to a WordPress Shortcode block or a documented shortcode element in your page builder, then repeat the basic test.

Choose Which Categories to Show

The official description lists term_id for selecting specific category IDs and exclude_cat for excluding categories. The taxonomy parameter specifies the taxonomy, while hide_empty controls whether empty terms are shown. These parameters serve different purposes. First decide which categories belong in the navigation and use an explicit list. Exclusion works better when only a few internal or temporary categories need to be removed from an otherwise useful list.

A category ID isn’t the same as its name. You can find the ID in the WordPress interface or in the address bar when editing a term. Don’t guess the number or copy an ID from another site. Matching names don’t guarantee matching IDs. After saving a change, check the public page. A wrong number may display the wrong category without triggering an obvious error.

[pci-cat-grid term_id="12,18,27" columns="3" show_title="true" show_count="false" show_desc="false"]

This example displays three selected categories in three columns, shows their names, and hides the count and description. It’s a useful starting point for testing, not a universal recipe. Replace the IDs with the ones from your site. If you want to display all categories with content, leave the term selection empty and check the hide_empty setting in your version. After each change, open the page in a private window or without the cache so you don’t mistake an old version for the new one.

When to Use term_id or exclude_cat

term_id works well for a permanent block with a clear editorial purpose. For example, the homepage might always feature “Articles,” “How-Tos,” “Reviews,” and “Questions.” You control the list and avoid accidentally showing a new technical category that an editor created for internal use. The drawback is that you’ll need to update the list when a new category should be featured.

exclude_cat is more convenient for a changing catalog where nearly every category is useful to visitors and only “Uncategorized,” imported terms, or temporary sections need to be hidden. The tradeoff is that an internal category may appear publicly if someone creates it and forgets to exclude it. On a collaborative site, it’s a good reason to document category naming rules and review the display periodically.

Ordering Categories for Easy Scanning

Visitors read the cards as a menu, so their order matters more than you might expect. The documented orderby and order parameters let you sort by term fields and choose ASC or DESC order. The documentation lists fields such as name, slug, term group, ID, and description. For most navigation grids, alphabetical order by name is a safe place to start if it helps visitors find a topic. For an editorial sequence, check whether your version and selected sort field can produce the order you want.

Don’t choose an order just to make the grid feel dynamic. Visitors should see a meaningful sequence: introductory material before advanced topics, broad subjects before narrow ones, project steps in order, or a natural alphabetical list. If your version doesn’t support the manual order you want, don’t try to fake it with arbitrary values. Consider renaming terms with meaningful prefixes only if that won’t make their public names worse. Otherwise, use alphabetical order and list your main topics in a separate block.

Titles, Descriptions, and Counts Without Clutter

The grid has documented show_title, show_count, and show_desc parameters. It’s usually best to show category names in public navigation. They provide a text label, help make the block accessible, and save visitors from having to guess what a photo means. A count can be helpful in a knowledge base or archive where the number of items gives visitors a sense of how much content is available. On a landing page or editorial homepage, it’s often unnecessary: visitors are choosing a topic, not comparing post counts.

Show descriptions only after an editorial review. A short phrase can distinguish similar categories, such as “Installation” and “Configuration.” Long text will make the grid uneven and harder to scan. If you need descriptions, use a consistent style: one detail about the category’s content, without dates, promotional promises, or repeated keywords.

After configuring the block, check the path visitors take when they click it, not just the block itself. Open two or three cards. Make sure their archives aren’t empty, their headings match the selected topics, and the theme doesn’t hide the post list below a large banner. The grid is configured successfully when visitors can move from a card to a useful list of posts without friction, not simply when the cards appear.

Style the Block Safely with an Additional Class

The Pro edition lists an option for adding custom styles. You don’t need to edit plugin files just to change a color or spacing. Those changes will disappear during an update. First check whether your output has a setting for an additional class or a parent selector. Then add styles through the theme, a child theme, or a safe custom CSS feature, not by editing the extension’s source code.

If your version has an additional class setting, give the block a unique name and change only the container, spacing, and card styling without breaking the base grid. For example, add the class to one test block, then make minimal changes. If the class setting isn’t documented or has no visible effect, stop rather than inventing an attribute that may not exist. The theme’s styling may already adapt well to the component.

Grid setup recap: Start with [pci-cat-grid], then add term selection, column count, text visibility, and sorting one setting at a time. After each change, check the category archives as well as the cards.

Build a Category Slider Without Hiding Visitors’ Choices

A slider isn’t there to make every grid feel more dynamic. Its purpose is to show a set of categories neatly in a limited amount of space without turning the page into a long list. In Post Category Image Grid and Slider Pro, use the [pci-cat-slider] shortcode. It shares selection and text visibility settings with the grid, and adds controls for the number of visible cards, scroll step, dots, arrows, autoplay, interval, speed, and looping.

First build the same set of categories as a grid, and then move it to a slider. This lets you see all the items at once and decide which cards belong together. A slider hides some content until visitors interact with it, so it’s harder to spot unclear titles, poor image crops, and empty categories.

Run a Basic Slider Test

Create a separate test block with a short shortcode. For example, select a few familiar categories, show their names, and leave the basic navigation settings in place. Don’t enable autoplay, a custom speed, and several exclusions at the same time. If something goes wrong, you won’t know which setting caused it.

[pci-cat-slider term_id="12,18,27,31" slidestoshow="3" slidestoscroll="1" show_title="true" show_count="false" show_desc="false"]

This example shows three cards at once and moves the row by one card at a time. The difference matters: the number of visible items controls how much of the navigation is shown, while the scroll step affects how visitors explore it. With four or five categories, moving one position at a time often helps visitors keep their place. You can try a larger step for a long row, but check first that important categories aren’t hidden between two states.

Set the Number of Cards Based on Container Width

The slidestoshow parameter controls how many categories appear at once, while slidestoscroll controls how many positions the row moves. You can’t choose good values without considering the page template. Three cards may be easy to read in a wide main column but too small in a sidebar. One card may look lost in a wide area unless it has a large image and clear navigation.

Test the slider where it will actually appear, not on an empty page without theme elements. Open it at a typical laptop width, then in a narrow browser window and on a phone. Check that the arrows are easy to tap, the cards stay within the container, and visitors can tell that there are more items to the right. The plugin’s responsive design doesn’t eliminate the need to check your theme: containers, global CSS, and script optimization can all affect the final display.

Choose a Display Mode Based on the Number of Categories

If you have four categories and the container fits four readable cards, a slider probably won’t help. Keep the grid. If you have eight important categories and limited space, show three or four at once and provide clear navigation. If you have dozens of categories, don’t try to turn the slider into a complete catalog. Feature the main topics and use a separate page or structured menu for the full list.

You can think of it this way: a grid answers “What are the main sections?” A slider answers “What other equally important sections can I browse?” If visitors need to see the full list before choosing, a slider isn’t a good fit. If the page gives them enough context and you want to offer a few more links without making the layout taller, a slider may work well.

Arrows, Dots, and Clear Navigation

The documented dots and arrows parameters let you show or hide pagination dots and arrows. Don’t turn both off just for a minimalist look until you’ve checked how visitors will know there are more cards. Dots show where visitors are in the sequence, while arrows point to a direct action. A short slider may need only one clear navigation method; a longer one often benefits from both.

Check keyboard navigation and the contrast of the controls in your actual theme. If the theme makes arrows nearly invisible over an image, consider changing the card background or keeping the dots rather than making visitors search for hidden controls. A polished appearance doesn’t guarantee accessibility: no visible focus state, a tiny click target, or movement that’s too fast can turn a compact block into an obstacle.

Autoplay, Interval, and Speed

The autoplay, autoplay_interval, and speed parameters control automatic movement and its pace. There are situations where this makes sense, such as a secondary display of sections near the bottom of a long page. But on a page where visitors need to choose a category carefully, automatic movement may make titles and counts harder to read. Start with autoplay off. Turn it on only after confirming that visitors can use the manual controls easily.

Set the interval long enough for visitors to notice the cards and decide whether to scroll. The transition shouldn’t feel abrupt. There’s no universal “best” value because title length, card size, and page pace vary. Rather than copying another site’s settings, ask whether visitors have time to read a title, click a card, and understand that the row isn’t an ad banner.

Looping with loop can make the row feel continuous, but it can also hide the end of the list. That’s usually fine for a collection of equally important categories. For a sequence with a meaningful beginning and end, check that continuous looping won’t confuse visitors. After enabling loop, scroll through the row manually and make sure repeated cards aren’t mistaken for duplicates.

Text on Slider Cards

A slider has less room than a grid, so it’s especially important not to show every option at once. Category names are almost always useful. Counts can work if they’re short and don’t compete with the name. Descriptions make sense only when cards are wide enough and the text is very concise. When several items appear in a row, two-line descriptions can make cards different heights and disrupt the flow of the slider.

Test the slider with your longest category names, not with one- or two-syllable placeholder words. In real projects, localized text and editorial titles are what reveal truncation problems. If a title doesn’t fit, first consider editing the title or showing fewer cards at once. Reducing the font to the point that it’s hard to read only hides the problem.

Use the Option Editors Can Work With: Gutenberg or a Page Builder

The WordPress directory listing says the plugin adds two blocks, and the product page mentions support for editor blocks and advanced integrations with several page builders in Pro. In the block editor, first look for the category grid and slider blocks. If a block provides the same settings you’ve already tested with a shortcode, use whichever option is easier for your editors. If its settings are limited but you need precise term selection or slider behavior, the shortcode remains a clear and portable option.

Don’t add the same block twice using two different methods “just in case.” That creates duplicate categories, adds unnecessary weight, and confuses visitors. Choose one way to display each block, document it for editors, and assign someone to maintain it. When switching between a theme, the block editor, and a page builder, check the page after clearing the cache. A page builder may wrap the component in extra containers and change its available width.

Check the slider from a visitor’s perspective: Visitors should recognize the block as a list of categories, know how to view the next group, and reach an archive without unexpected movement. If any of those steps require a guess, return to a simpler grid or shorten the list.

Display Child Categories and Choose a Taxonomy Carefully

The Pro edition lists controls for displaying child categories, and the basic settings include taxonomy selection. This lets you build more specific navigation than a general list of standard categories, which can be useful on sites with a complex hierarchy. It also requires editorial discipline: show a child term beside its parent only when visitors can understand how they’re related.

Before displaying child categories, sketch the visitor’s path on paper or in a document. If a “Knowledge Base” page has several main topics and dozens of narrow subcategories, start by showing the parent categories. You can display the child categories on their relevant archives or on a separate section page. If the structure is flat but still has old technical parent terms, don’t show them just because they exist in the admin panel.

Check the Selected Taxonomy

Change the taxonomy parameter only if you know the registered taxonomy and its archives are publicly accessible. The label editors see in the menu isn’t always the same as the technical identifier. Start with the standard value category, confirm that the basic display works, and only then try a nonstandard setup. If a custom taxonomy has no public archive, its cards may lead nowhere useful.

Don’t mix terms from different taxonomies in one block unless there’s a clear reason to do so. Post categories, documentation sections, and product groups may follow different link rules and set different expectations. It’s usually clearer to create a separate block for each content type and give it a specific heading than to combine similar-looking cards that serve different purposes.

Example: Create Knowledge Base Navigation with Six Categories

Consider a service website that already has a knowledge base. It publishes instructions, but visitors often land on the main knowledge base page and don’t know where to start. The six categories are “Getting Started,” “Configuration,” “Data Import,” “Integrations,” “Troubleshooting,” and “Team Tips.” The goal is to display them as consistent image cards near the top of the knowledge base page, then offer a compact slider with three key topics at the bottom of longer articles.

This example doesn’t require inventing a new structure just to use the plugin. The categories already serve an editorial purpose, and Post Category Image Grid and Slider Pro makes them easier to find on the public-facing site. If your categories don’t match this setup, keep the approach, not the names: first prepare clear topics, then give them images, and only then display the block.

Set a Goal and Define What Success Looks Like

The main grid should help a new visitor choose a section in a few seconds, without searching through the entire feed. The slider at the bottom of an article should show what else is available without repeating the page menu. Success isn’t about adding effects. Look for a clear path: each card opens the right archive, the archive contains relevant posts, and the title and controls remain visible at narrow screen widths.

Before you begin, prepare a test copy of the knowledge base page, check the archives for all six categories, and choose images with a consistent style. “Getting Started” might use a recognizable starting point, “Configuration” an image associated with controls, and “Integrations” a visual link between systems. Don’t add long phrases to the images. Visitors will see them at a small size, and the card title can convey the meaning.

Step 1: Organize the Terms and Assign Images

Open Posts - Categories. Check the name, slug, description, and content for all six categories. If “Integrations” has only one post, decide whether its count is useful. If “Team Tips” mixes company news with practical advice, reorganize it before displaying the block. Then edit each category, select its prepared image in the plugin’s field, and save.

After saving each term, open it again. The admin panel check helps you catch an image selected by mistake from the media library. Then visit the category archive. Check the URL and the first page of content. If the archive starts with a post that doesn’t match the category name, fix the post’s categorization instead of trying to hide the problem with a different image.

Three Questions to Ask About Each Card

Ask yourself: “Can visitors understand the title without extra context?” “Does the image match the content?” “Will they find at least a few useful posts after following the link?” If the answer to any question is no, leave the card out temporarily. That matters more than having the same number of items in every row.

Step 2: Add a Grid to the Knowledge Base Page

On a draft or test page, add the grid shortcode and list the IDs for the terms you prepared. Start with three columns, show the titles, and leave counts and descriptions off. During your first review, check how the images work with the titles. If the cards have different heights, first check the image crops and the image height settings available in your edition of the product.

[pci-cat-grid term_id="12,18,27,31,34,42" columns="3" show_title="true" show_count="false" show_desc="false" orderby="name" order="ASC"]

Replace the numbers with your own IDs. This example uses alphabetical sorting because it can help visitors find one of six equally important topics. If your knowledge base follows a learning path, check whether your version offers a way to order terms in the sequence visitors should follow. Don’t leave the order to chance; it becomes part of the interface.

After publishing the test page, view it in the theme’s main content area. Check the spacing around the grid, then resize the browser window. If the cards are too cramped on a narrow screen, don’t immediately add rigid styles. First see how the theme rearranges the columns and whether a page builder container is restricting the width. Often, moving the block into the main content container or reducing the initial column count is enough.

Step 3: Add Descriptions Only Where They Clarify the Categories

In this example, a new visitor may have trouble distinguishing “Getting Started” from “Configuration.” Short descriptions can help: one category might cover the initial steps, while the other covers working with an existing account or project. “Integrations” and “Troubleshooting” are usually clear from their names, so extra text may only make the cards feel heavier. Instead of enabling show_desc across the board, check whether the shortcode options and editorial descriptions available in your version suit your category structure.

If you add a description, make it a promise about what visitors will find in the archive: “Connect external services and verify data transfers,” for example, rather than “The best integrations for your site.” Remove promotional language and dates. Keep the descriptions roughly similar in length. Uneven cards are especially noticeable in a three-column grid where one card is nearly twice as tall as its neighbors.

Step 4: Add a Compact Slider at the End of an Article

You usually don’t need to repeat all six topics at the bottom of a long tutorial. Visitors are already reading about a specific subject, so choose three or four related categories. For example, after a post in “Configuration,” you could show “Getting Started,” “Integrations,” and “Troubleshooting.” Don’t call the block “Related Posts” if it links to category archives. A heading like “Explore More Knowledge Base Topics” makes the destination clearer.

[pci-cat-slider term_id="12,27,34" slidestoshow="3" slidestoscroll="1" arrows="true" dots="true" autoplay="false" loop="true" show_title="true" show_count="false" show_desc="false"]

After adding the slider, check whether three cards really need a slider. If all three fit comfortably in the article width, use a grid or a regular list of links. A slider makes sense only when space is limited or there are more topics to show. In this example, it may be useful in the template footer, where other navigation elements are already present and you want to avoid making the page taller.

Step 5: Follow the Path as a Visitor, Not an Editor

Open the page in a private window. This helps you see the public version without the editor state or some of the local cache. Click every grid card, then every slider card. Check the URL, archive heading, first page of posts, and back button. If you reach the right archive but the posts appear in an unexpected order, that’s an archive or theme setting, not the plugin’s category sorting setting.

Then check the page at a narrow screen width. Open the menu, scroll the slider, and click the arrows and dots if enabled. Make sure a sticky header doesn’t cover the top of the cards and the first line of a title isn’t hidden. Ask a colleague who doesn’t know the site’s structure to find the integrations section. If they start searching the menu and don’t notice the grid, the block’s placement, contrast, or heading may need attention.

Step 6: Document the Working Setup and a Rollback

Once you’re happy with the result, save the shortcode in your editorial documentation with a plain-language explanation of which categories it uses and where it appears. Don’t just record a string of numbers. If another editor adds a category next month, they should understand why it didn’t appear on the homepage automatically and where to update the list.

It should also be easy to undo the change. If the new grid makes the page worse, remove or temporarily replace the shortcode block instead of deleting the images from every term. If the scroll setting doesn’t work, revert to the last working version. You don’t need to deactivate the plugin over one bad setting; that would remove its features from every page that uses it.

Example recap: The block is useful when every card has a prepared category, a recognizable image, a working link, and a clear place in the visitor’s path. Add a slider only where it saves space without making the available choices harder to see.

Check the Content, Interface, Performance, and Compatibility

Checking the block doesn’t end when the cards appear in the browser. There are four separate parts to review: category data, card appearance, slider behavior, and the resulting archive pages. A problem in one area is often blamed on another. For example, replacing an image won’t fix an empty archive, and missing arrows may be caused by theme styles rather than the arrows setting.

Check the Content

Go through the selected terms one by one. Each card’s name, image, description (if enabled), and archive should match. If you show counts, compare one or two of them with the actual number of published posts. A count changing after publication doesn’t necessarily indicate a problem; the category may have been updated as expected. But a large discrepancy is worth investigating, especially if posts have unusual statuses or access restrictions.

Check How It Looks and Behaves

Review the block in its actual template: on the homepage, blog page, archive, or page builder section. Check card heights, image cropping, title wrapping, text contrast, and spacing between cards. Don’t judge it only on a large display. At narrow widths, the block still needs to make sense: visitors should see at least one complete card and know what to do next.

If the theme lazy-loads images, make sure the cards appear as visitors scroll and don’t leave blank areas. If the site combines scripts or delays JavaScript execution, also check the slider after clearing the cache. Don’t add a global exclusion for every script without a specific symptom. First confirm whether the slider initialization is missing, then document what changes when you test a fix.

Make Safe Improvements Without Editing Plugin Files

The plugin already handles category selection and the basic markup, so keep customizations small and reversible. First get a clear display using the standard settings. Then adjust only the properties related to the theme’s presentation, such as spacing, rounded corners, card backgrounds, title readability, and keyboard focus. Don’t edit PHP, JavaScript, or CSS files inside the plugin directory. An update can erase those changes and make troubleshooting harder.

If your edition lets you add a custom class to the output, use it to scope your changes. If you can’t find that setting, don’t invent one. You can wrap the block in a standard editor Group block or style an existing page container. Before adding CSS, take a screenshot of the test page. It gives you a point of comparison and makes it easier to undo changes if the theme is updated or another block inherits the styling.

A Small Adjustment for Clearer Focus and Consistent Cards

The following is an example of custom styling based on standard WordPress CSS practices, not a documented plugin interface. Use it only after adding your own class to the outer container and checking the current markup in your browser’s inspector. Plugin class names may differ between editions, so don’t paste this into a live site without checking it first.

/* Add this only to a test container with the category-navigation class */
.category-navigation a {
  outline-offset: 4px;
}

.category-navigation img {
  display: block;
  width: 100%;
  object-fit: cover;
}

.category-navigation a:focus-visible {
  outline: 3px solid #1d4ed8;
}

This snippet doesn’t change category data or interfere with slider behavior. It makes images display as blocks, fits them to the card width, and adds a visible outline for keyboard navigation. Add it through the theme’s custom CSS area, a child theme, or an approved editorial process. After saving, check one grid and one slider, then press Tab until focus moves through the card links. To undo the change, remove this snippet and clear the theme cache if one is used.

If cards have different heights because of their images, don’t hide the problem by forcing the text to be cut off. First use images with consistent framing and check the image height setting available in your edition. CSS can help after that, when you need to fine-tune a consistent set of images.

Using the Plugin with Caching and Optimization

Post Category Image Grid and Slider Pro can be used on a cached site, but treat changes as updates to an interface block. After changing a shortcode, category image, or CSS, save the change and clear the cache for that page or the full cache using your site’s usual method. If you use a CDN, check the updated page in a new browser session. Don’t clear the cache after every click without a reason. Note what changed and clear only the layer you need.

If the slider works for an administrator but not for a guest, compare the page after clearing the cache and signing out. A common cause is front-end script optimization: combining scripts, delaying execution, or excluding a dependency may change when the component starts. Don’t add broad exclusions without a clear symptom. Find a page with a single test slider, reproduce the issue, temporarily disable one questionable optimization in a test environment, and compare the result. This keeps performance changes under control and avoids turning troubleshooting into a growing set of permanent workarounds.

Maintain the Block as Part of Your Editorial Workflow

Don’t leave the block without an owner after the initial setup. Categories change: editors add new topics, combine old sections, images become outdated, and themes are updated. A reliable way to maintain the block is to include a card review in your publishing workflow and review the structure every quarter. That takes less time than rebuilding navigation after empty or duplicate categories accumulate on the homepage.

When to Update a Category Card

You don’t need to update a card every time you publish a post. Update it when the category’s purpose changes. Revise the name, image, and description together if the category is renamed, gets a new editorial focus, or becomes a permanent section instead of a temporary collection. When adding a category, decide first whether it should be a public entry point. If it should, prepare an image, add several posts to the archive, and include the ID in the permanent shortcode. If it shouldn’t, don’t display it automatically just because it’s in the term list.

Keep an eye on “Uncategorized” and similar internal names. A card like that in a public grid looks like an editorial mistake and can undermine confidence in the site’s structure. Either move the posts to meaningful categories or exclude the internal term from the block. This also applies to categories created by imports, experiments, or temporary campaigns.

Check the Block After Theme or Optimization Updates

After updating the theme, page builder, caching plugin, or JavaScript optimization tool, open one page with a grid and another with a slider. Check that images load, links open the right archives, and slider controls are visible. This quick regression check is more effective than waiting for visitor complaints. If a problem appears after an update, record the specific symptom and the component that changed instead of starting by reinstalling every extension.

Keep two reference pages: one with a basic [pci-cat-grid] and one with a minimal [pci-cat-slider]. They can help you distinguish a theme conflict from problems with a complex page builder or a long shortcode. If the reference page works but the block in a particular section doesn’t, investigate that section’s container and settings. If even the reference page fails, check that the plugin is active, inspect the browser’s developer console for errors, or test for an optimization conflict on a copy of the site.

How to Tell Whether the Block Is Helping

Don’t rely only on how the block looks. Ask your support editors which topics visitors search for most often, then check whether those topics have cards on the main section page. Review click analytics only if they’re already configured correctly, and don’t draw conclusions from a single day. A useful signal is that visitors move from the block to a topic archive and continue reading instead of immediately going back. A few brief user tests can also help: ask someone to find a particular type of post and watch whether they choose a category without extra guidance.

If visitors rarely use the cards, the plugin may not be the problem. The block could be below the fold, its heading may not explain what it’s for, the images may look too similar, or the page menu may already provide a better route. Change one thing at a time: first the block’s placement or heading, then the category list, then the design. That gives you useful feedback without turning navigation into an endless experiment.

When Post Category Image Grid and Slider Pro Is a Good Fit

This plugin is a good fit when your WordPress site already has useful categories that need more prominent public navigation. It’s especially helpful when visitors should choose a topic before reading individual posts, whether they’re opening a knowledge base section, finding a magazine topic, browsing a collection of tutorials, or exploring the main content areas. The two display modes let you match the block to its location: a grid shows the full set, while a slider saves space where that’s useful.

It’s less suitable when you need to filter posts using complex criteria, build a catalog with several custom fields, or create a different card template for each content type. In those cases, start by defining the actual problem. You may need a post grid, filter, or archive template tool. Don’t expect category navigation to work as a catalog, or a catalog to replace category navigation.

Before adding the block to a live page, check four things: the categories have content and are easy to distinguish, the images have a consistent style, the links open the correct archives, and the chosen display mode remains easy to use on a narrow screen. Then you can download the ZIP file and repeat the setup on a test page first. That keeps the change reversible and preserves what matters most: a clear path to the content visitors need.

Final check before publishing: Open the page as a guest, choose a card, visit its archive, go back, and repeat the steps at a narrow screen width. If visitors can complete this short path without guessing, the block is doing its job.