CodeCanyon Pretty Grid - WordPress Plugin
Pretty Grid is the most flexible tool that make you can easily display social media content in WordPress with customizable social media feeds.

Plugin Features
The plugin provides a seamless solution to integrate content from various social networks onto WordPress websites. With its user-friendly interface and robust features, it offers a streamlined way to curate and showcase social media content. By leveraging this plugin, website owners can enhance engagement levels by displaying dynamic feeds from platforms such as Instagram, Facebook, and Twitter effortlessly.
By installing the plugin, users gain access to a versatile tool that simplifies the aggregation of social media content into visually appealing grids. The customizable grid layouts and design options allow for a tailored display that aligns with the websites aesthetic. Additionally, the plugin offers responsive design capabilities, ensuring that the social feeds adapt smoothly to different device screens, providing a consistent user experience across platforms.
One of the standout features of the plugin is its real-time updating functionality, enabling website visitors to view the latest social media posts without manual intervention. This automation aspect saves time and ensures that the displayed content is always fresh and engaging. Furthermore, the plugin supports multiple social media platforms, giving website owners the flexibility to curate content from diverse sources seamlessly.
Website administrators can easily manage and moderate the displayed social content through CodeCanyon Pretty Grid intuitive dashboard. The built-in moderation tools allow for the filtering of content based on specific criteria, ensuring that only relevant and appropriate posts are showcased. Additionally, the plugin offers analytics tools that provide valuable insights into the performance of the displayed social feeds, empowering users to make data-driven decisions to optimize engagement.
With its powerful features and seamless integration capabilities, the plugin serves as a comprehensive solution for WordPress users looking to enrich their websites with dynamic social media content. Whether aiming to boost user interaction, increase time spent on the site, or enhance overall aesthetics, the plugin offers a versatile set of tools to meet these objectives effectively. Website owners can harness the power of social media content to create a vibrant and engaging online presence with ease, thanks to the plugins robust functionality.
Specifications:
| Release date: | 21-06-2021 | |
| Last updated: | 07-03-2023 | |
| Type: | Paid | |
| License: | GPL | |
| Subject: | Social Web | |
| Compatibility: | W5.x W6.x | |
| Includes: | Plugin | |
| Language packs: |
|
|
| Developer: | CodeCanyon | |
| Rating: | ||
Share with your friends!
How to Set Up and Use CodeCanyon Pretty Grid
This guide to CodeCanyon Pretty Grid will help you decide which content to prepare, set up a grid or carousel for a specific page, build a display you can verify, and safely assess whether the plugin is suitable for long-term use. The focus is practical: rather than discussing galleries in the abstract, this guide follows the path from a carefully chosen set of images, videos, posts, or social content to a polished WordPress block that works with the page and sets clear expectations for visitors.
Pretty Grid is presented as a tool for WordPress images, videos, and galleries, as well as several social sources. With a product like this, the most common mistake happens before you even open the interface: a site owner chooses an eye-catching layout without deciding what will be updated, where the content will come from, where visitors will find a link to the original post, or what will happen if an external feed stops responding. That is why this guide starts with the data and the block’s purpose, rather than with the number of columns.
Throughout this guide, terms such as grid, masonry, and carousel refer to familiar ways of presenting content. Exact screen names may vary slightly between editions of the plugin. If your version doesn’t include a setting mentioned here, don’t guess by switching a similar-looking option. First check which fields are available in the interface, then make the change on a test page.
From Source to Card: What Pretty Grid Does
It helps to think of CodeCanyon Pretty Grid as a presentation layer between your content and the page. On one side are the assets: images from the media library, videos, WordPress posts, WooCommerce products, or a supported social feed. On the other is the block visitors see: tiles, a sequence of slides, or a mosaic with set spacing. In between, the site owner decides how many items to show, their order and density, how they behave when clicked, and how they are updated. That combination determines what visitors see, not the name of the selected layout by itself.
The official description and WordPress directory associate Pretty Grid with building custom galleries from different sources, mixing media dynamically or manually, and displaying feeds from Instagram, YouTube, Vimeo, Twitter, and Flickr. The premium features listed separately include multiple accounts, an item limit, manual refresh and scheduled social feed synchronization, cache clearing for hashtag campaigns, a follow button, and five display options: Classic, Carousel, Masonry, Highlight, and Hashtag. This doesn’t mean every source will be equally available in every installation: external services change their access rules, and the available fields depend on the connected content type and product edition.
Decide What the Block Is For First
The same grid can serve very different purposes. On a photographer’s page, it can link to a portfolio; on a restaurant’s page, it can show that posts are current; on a blog, it can collect recent content; and in a store, it can showcase products as visual cards. Before setting anything up, answer four questions: What counts as a content item? Where should visitors go when they click it? Who updates the content? Can the page safely show an older version if an external source is temporarily unavailable?
- Media library showcase works well when an editor controls every image and its order. It’s the most predictable option for portfolios, case studies, and curated collections.
- Post or product gallery makes sense when each card should link to a WordPress post or product catalog. Before setup, check that each item has an image and a clear title.
- Social feed is a good fit when fresh posts genuinely matter to the page. Here, clear selection rules, an item limit, and a fallback plan for access problems are especially important.
- Video collection works best when previews make each video’s purpose clear and visitors know whether clicking will open a video, a separate page, or an external service.
Don’t try to combine all of these purposes in your first experiment. If you need to display brand photos, blog posts, and videos at the same time, create three separate test versions first. This makes it easier to identify which settings control the data and which affect the appearance. Once everything is clear, you can decide whether to combine the collections, as long as the result remains easy to understand.
Why the Item Limit Matters More Than a Pretty First Row
The product description mentions an option to limit the data in a social gallery. In practice, this controls how many content items appear in a particular display. Don’t choose the limit based only on how many tiles look good on a wide monitor. Too many items make the page heavier and create a long visual feed; too few may leave visitors wondering whether they’re looking at a live feed or a decorative sample.
For your first test, choose a small but representative set. Include images in different orientations, at least one dark and one light image, and a working preview for videos. Then check the page at a typical window width and at a narrow width. Look beyond appearance: do the cards have enough room to be useful? Are captions legible? Does the final item look like an accidental cutoff? If the grid doesn’t make sense at this stage, adding more posts won’t fix it.
Check the result: Visitors should be able to tell within a few seconds what the cards have in common and what will happen when they choose one. If they have to guess, clarify the source, links, and captions before changing the animation or styling.
What’s Confirmed and What Not to Assume
Pretty Grid’s documented purpose is to collect and display different types of media in grid, mosaic, or carousel layouts, with settings for columns, rows, and spacing. For social feeds, the documented features include limiting the number of items, refreshing manually or on a schedule, and clearing the cache for hashtag campaigns. However, the available public sources don’t provide enough evidence to promise that the plugin will work with every account, theme, page builder, or custom API. In a real project, verify these combinations in a separate draft instead of relying on marketing claims for a live site.
This distinction matters especially when you’re displaying posts from an external service. Data access may depend on the account type, permissions, token, or the platform’s own rules. Don’t use a social gallery as the only place for information visitors need to rely on. Keep contact details, schedules, sales terms, and legally significant messages in the page’s regular content, and use the feed as a visual extra.
Who Should Use This Display-and Who Should Look Elsewhere
Pretty Grid may be a good fit if your site already has recurring visual content and you need a managed display block instead of building every card by hand in the editor. It works well for portfolios, post collections, project pages, video feeds, or a visible sample of social activity. It’s most useful for editors who are prepared to keep the source material organized: maintain thumbnails, avoid empty posts, check external connections, and occasionally review the page from a visitor’s perspective.
The plugin may be unnecessary if you only need a static collection of a few images and the standard WordPress gallery already does the job. It’s also not the right place to start if your actual goal is complex catalog filtering, full-text search, user accounts, or content restricted to specific roles. A grid handles presentation; it doesn’t replace a catalog, permissions system, or editorial workflow.
Prepare Your Site: Content, Access, and a Way Back
Getting ready to use Pretty Grid means more than having the plugin archive. The grid can only display the data it receives, and visitors see the finished page together with the theme, cache, and other scripts. The sooner you separate these responsibilities, the easier it is to understand why the page looks different from what you expected. You don’t need to build a complex copy of your entire site just to test a gallery, but you do need a separate test page or draft that you can remove without losing existing content.
Review Your Content Before the First Click
Put together a small test set of real content rather than grabbing random demo images. If you plan to use images from the media library, make sure the files have descriptive names and aren’t duplicates of the same photo at different sizes. If the block will display posts, check ahead of time that each selected post has a thumbnail, a title, and a working permalink. If you’re testing WooCommerce products, create a few test products with current images, but don’t change public prices or statuses just to test the grid.
For a social source, make a separate checklist. You should know which account or collection will appear, which posts are suitable for the site, how the editor will spot a refresh problem, and what will remain on the page if the connection fails. The plugin may offer manual and scheduled refreshes, but editorial responsibility still rests with you: a deleted post, unwanted image, or change in account permissions affects a public showcase differently from a media library you curated in advance.
| Source | Minimum Before Setup | What to Check After Displaying It |
|---|---|---|
| WordPress images | A small collection of files in different orientations, with a clear order. | Cropping, proportions, click behavior, and duplicate images. |
| Posts or pages | Content with a thumbnail, title, and complete body. | Working links, item order, and no drafts in the public display. |
| Products | Test product cards with images and a visibility status that allows them to be displayed. | Links to products, image clarity, and the effect on page speed. |
| External feed | Confirmed access, a limited selection, and a decision about manual refreshes. | Freshness, the item limit, a fallback page display, and behavior after clearing the cache. |
After preparing your content, you’ll have both material for a useful example and a starting point for troubleshooting. If the test display works but the live one doesn’t, you can compare post types, images, user roles, and caching rules instead of randomly changing every setting.
Theme Compatibility and External Scripts
The gallery sits within your theme’s layout, so check the container where you plan to place it. A narrow post column, a full-width page builder section, and a footer widget all have different amounts of available space. It’s sensible to start in the main post or page area, where there are fewer special constraints. Don’t test your first version in a sidebar, a modal window, and several page builders at once. That would leave too many variables if something went wrong.
Make a note of plugins that affect images and scripts: optimization tools, lazy loading, JavaScript combining, caching tools, lightboxes, and page builders. You don’t need to disable them ahead of time, but you should know they’re active. If clicks or the carousel stop working after you activate Pretty Grid, this note will help you check for a specific conflict. After saving changes, it’s usually safer to clear the relevant cache and check the page in a new private window than to disable all optimization on a live site.
Choose a Restore Point
Before installation, note the page’s current URL, capture its public state, and save a draft with the original content. If the page is already used in ads or search results, create a new test page instead of rebuilding the live one during business hours. This doesn’t require anything complicated: remove the added element, restore the saved version of the page, and clear the relevant cache. The important thing is not to treat uninstalling the plugin as the only way to undo a change. Uninstalling may hide the widget, but it won’t show you what changed in the editor.
Tip: Don’t connect a live social account to your experiment until you’ve seen a clean display using a local collection or regular posts. This lets you check the page layout and behavior first, then verify external access separately.
Install and Run a First Check Safely
The basic process for a WordPress plugin is familiar: install the downloaded archive or folder using a method approved for your site, go to the plugin list, and activate Pretty Grid. The directory description also gives the traditional method of placing it in wp-content/plugins/ and activating it from the Plugins page. Don’t edit the plugin files for a translation, color change, or “quick fix”: those changes will be lost during an update and can make the cause of an error harder to identify.
Don’t connect every available source as soon as you activate the plugin. Find it in the admin area and make sure its screen opens without an error message. Check whether the interface provides a wizard, a list of galleries, or a form for creating a collection. Button and screen names vary between editions, so follow the general flow: create or select a gallery, assign a source, then choose how to display it. If the menu item is missing, return to the Plugins list and make sure the plugin is actually active.
- Create an isolated test gallery with a clear name, such as “Project Page Grid Test.”
- Choose one simple source-a few images or a limited set of posts that are easy to recognize on the page.
- Save a minimal configuration without enabling the carousel, automatic transitions, filters, and an external feed all at once.
- Add the display to a draft page using the insertion method provided by the plugin, such as an editor block or a location that processes its embed code.
- Open the public page in a separate window and check that it shows your selected content rather than an older cached version.
At this stage, confirm one thing: the interface saves the configuration and the page displays the expected cards. Don’t evaluate animations or styling yet. If the basic display doesn’t appear, later settings will only add more noise.
How to Tell Whether the First Installation Worked
A successful installation has three separate signs. First, the plugin is active and its admin screen opens. Second, the test collection remains saved after you refresh the admin page. Third, the public page shows the same items you selected in the settings. If even one of these signs is missing, don’t connect another source or copy the configuration to other pages.
Once you see all three signs, run a quick check of the whole flow: change one obvious setting, such as the limit or spacing between cards, save it, clear the relevant cache, and see whether the public page changes. This connects an action in the admin area to an observable change on the page. It’s more useful than enabling dozens of settings at once because it confirms the full chain: settings, saving, rendering, and display.
Set Up Your First Gallery: Source, Limit, and Card Content
After the basic check comes the part people usually need a CodeCanyon Pretty Grid guide for: using the settings to build a repeatable display instead of a random assortment of tiles. It’s more useful to follow the sequence “source, quantity, layout, behavior” than to work through every field on the screen from top to bottom. Each step depends on the one before it, which makes the display easier to check.
Step 1. Choose One Source and Check Its Limits
Start with the type of content that fits your editorial workflow. For your own images, use the media library or a manually curated collection. For posts, prepare a WordPress selection in advance. For social platforms, use a feed that the plugin can access in your configuration. Don’t assume that different sources will behave the same way. A manually curated collection lets you control the order precisely, while an external feed can change the next time it refreshes. These require different levels of oversight.
If the interface offers a campaign type, a separate account selection, or a hashtag option, note your choice in the test gallery name and your project notes. The product description mentions clearing the cache for hashtag campaigns, which suggests that this type of content may need a separate refresh. Clearing the cache won’t fix an access error, though. It helps when the connection and selection are already correct and you need to retrieve current data.
Don’t use a broad selection rule for your first live version. If you can limit the feed to a specific account or a narrow topic, start there. This makes it easier to check that the input matches your expectations. After that, you can broaden the rule, save the new version under a separate name, and compare the two pages. This is easier to roll back and avoids guesswork when unrelated content suddenly appears in the grid.
Check the Source Before Styling
Temporarily use a simple display and set a low item limit. Then check: Do all cards come from the selected source? Is anything duplicated? Are the previews correct? Is the order as expected? Can you open each item by clicking it? If there’s already a problem, don’t spend time adjusting the spacing. Fix the selection or data access first, save your changes, and check the public page again.
Step 2. Treat the Item Limit as an Editorial Choice
The item limit isn’t a decorative setting. It determines the amount of content requested, the length of the section, and how often the block can change. Pretty Grid’s official description explicitly mentions a setting that limits the number of items in a social gallery. On a landing page with several short sections, it’s usually best to start with a compact display that supports the page’s main message. A portfolio page may call for more items, but visitors still need to understand the order and find their way to the details.
Don’t assume that more cards make a feed feel more current. A large number makes changes to individual posts less noticeable, increases the chance of an uneven visual rhythm, and can make a page much heavier if suitable smaller image versions aren’t available. Also, don’t check only the initial viewport. If the grid continues below the fold, scroll to the end and check for a lone, narrow card, excessive scrolling, or a section that feels disconnected from the surrounding content.
A useful approach is to choose the limit based on the page’s purpose, test it with real content, then adjust it for speed and usability. Note the original value so you can refer back to it. If someone reports that the wrong recent posts are showing, you’ll be able to tell whether the cause is the display limit, a synchronization issue, or the source’s item order.
Step 3. Decide What Each Card Should Show
A card may be nothing more than a visual link, or it may include a title, caption, other details, or a hover overlay. Don’t add text automatically. A product photo benefits from a clear name and a predictable link. For a portfolio, a clean image and a caption on the project page may be more useful. In a post feed, an image without context can be confusing, especially when the thumbnails look alike.
Before enabling captions, check the quality of the source content. A grid won’t improve if post titles are vague or social captions are too long. Edit the incoming content first. Pretty Grid handles presentation; it doesn’t fix weak editorial material. If needed, add a short, clear heading next to the block and keep the cards uncluttered.
| Choice | What Changes | How to Check | Sign of a Poor Choice |
|---|---|---|---|
| Source | The available cards and how current they are. | Compare a few items with the selected collection. | Unrelated, outdated, or duplicate content. |
| Item limit | The length of the block and the number of items shown on the public page. | Count the visible cards after clearing the cache. | An important part of the sequence is cut off, or the section is too long. |
| Click behavior | Where visitors go after choosing a card. | Open several different types of items. | A dead link, an unexpected URL, or the wrong item opens. |
| Card text | How clearly visitors understand each card’s purpose. | Review the block without relying on your knowledge of the site’s internal structure. | Unreadable captions or images without context. |
By the end of this stage, you should have a reliable source, a sensible limit, clear click behavior, and useful source captions. Once these four things are in place, you can change the layout without worrying that a styling tweak will also change the data.
Choosing Between Classic, Carousel, Masonry, Highlight, and Hashtag
The product materials list five display options: Classic, Carousel, Masonry, Highlight, and Hashtag. Think of these as different ways to guide a visitor’s attention, not as a ranking from best to worst. Match the layout’s behavior to the content and its place on the page. For a clean comparison, change only the layout while keeping the source and limit the same. That way, you can see the difference in presentation without mixing in other variables.
Classic: A Predictable Grid for Equal-Weight Items
The classic option makes sense when every card should have equal importance. It’s a safe starting point for similar types of work, products with consistent images, or recent content. This layout is also easier to check at different widths: you can quickly see whether the columns fit, the spacing is even, and images aren’t cropped too aggressively.
Classic may feel dull if the source images vary widely in orientation and importance. Don’t try to compensate with too many effects. First check whether the images work well together, whether previews need consistent proportions, or whether a layout that allows different image heights to become part of the composition would work better.
Carousel: A Compact Block That Signals More Content
A carousel is useful when a page needs to show a limited collection without turning it into a long feed. It works especially well when the cards have a natural order: recent work, a video collection, a sequence of products, or a small set of posts. Pretty Grid’s product description lists navigation arrows, scroll navigation, speed, and transition effects for its slider. Set these up only after checking that visitors can navigate with a regular click or tap and can tell that more cards are available.
Automatic transitions aren’t essential decoration. Use them only if they don’t interrupt reading or turn the cards into a moving backdrop. If you’re unsure, let visitors control the carousel. After enabling it, check that the arrows don’t cover important parts of the images, captions don’t disappear, and transitions don’t disrupt the height of the neighboring section.
Masonry, Highlight, and Hashtag: When Differences Between Items Matter
Masonry is usually a good fit when you need to preserve images in different orientations instead of hiding those differences through cropping. It can create a lively rhythm, but the last row and image loading need careful attention. Highlight works when you want one or more items to stand out, but decide ahead of time why those items deserve emphasis. Hashtag is intended for a topic-based collection: use it when the hashtag represents a campaign or category, not as a random way to fill the block.
For any of these three options, ask yourself: Could someone who doesn’t know your admin setup understand why some cards are larger, why the feed has this shape, and what the images have in common? If the answer is “it looks better,” try switching back to Classic to see whether the page becomes clearer. A distinctive layout is worthwhile when it helps visitors make sense of the content, not when it hides a lack of structure.
Columns, Rows, and Spacing: How the Grid Guides Visitors
After choosing a layout, you’re left with settings that often seem cosmetic: the number of columns and rows, and the spacing between images. In practice, these determine the block’s density, how easy the cards are to read, and whether the theme can keep the grid working at different widths. Pretty Grid’s description lists these as settings for displaying a social gallery, so adjust them together instead of changing them one by one in search of a layout that just happens to look good.
Start With the Width of the Actual Container
Don’t choose the number of columns based on the size of your admin window. Open the page where you’ll actually publish the block and check the available content width. Your theme may use a narrow post column, a two-column layout, a full-width section, or a container with large inner margins. The same four-column setting will look very different in each case.
Start with a moderate number of columns, save your settings, and review the same set of cards. Check whether the main subject of each image remains clear, captions are still legible, and visitors can tell what’s clickable. Then narrow the window. Don’t try to keep the same number of columns at all costs. Good responsive behavior may mean fewer cards per row, making each one easier to tap and giving it a more predictable height.
Check Different Widths Without Special Tools
- Open the page in a regular window and scroll from the top of the section to the bottom.
- Narrow the window until the page text starts to reflow.
- Check for horizontal scrolling or a grid that extends past the container.
- Choose a few cards in the first, middle, and last rows to make sure they all behave the same way.
- Restore the regular width, then open the page in a new window to rule out an outdated cache.
If you see a problem only in one place, change the grid density first, not the entire design. For example, cards that are too narrow may need fewer columns or a wider container. Excessive space between cards may call for a smaller gap. After each change, compare the same set of content so you can tell what actually improved the display.
Spacing Between Cards Is Part of the Visual Hierarchy
Spacing separates items while also tying them together as a single block. Little or no space between cards works when images should read as one continuous surface and their colors and subjects are consistent. A clearly visible gap helps visitors recognize each card as a separate link. Too much space can break the connection between cards, especially on a page where headings and paragraphs already have their own margins.
Look at the entire section, not just one tile. If the heading, introduction, and gallery feel like three separate blocks, the cause may be excessive vertical spacing rather than the grid itself. Don’t use negative margins or fixed sizes in random theme styles to make one screen look right. That kind of change often breaks on another template. Start with the settings provided by the plugin and theme; if they aren’t enough, make a small, reversible CSS change after testing it on a copy of the page.
Mixed Image Proportions: What to Fix and What to Keep
Images in different formats are normal for content that’s updated over time. Problems start when there’s no clear plan: some cards are cropped in a way that loses the subject, others have large empty areas, and still others have unpredictable heights. For a classic grid, it helps to prepare previews with consistent proportions. A mosaic can preserve the differences, but make sure a very tall image doesn’t interrupt the flow or leave an uneven bottom edge in a short collection.
Don’t try to fix mixed content just by changing the number of columns. First inspect the original images: Where is the main subject? Is there text near the edges? Can you create a separate copy for the grid in the media library without changing the original? Pay special attention to images that contain text. Cropping can leave visitors with a meaningless fragment, even if the overall layout looks neat.
Practical check: Scroll through the grid with the captions covered or temporarily turned off. If the sequence still makes sense, the images work well together. If the block turns into a random collage without text, clarify the visual theme or give the cards short, clear captions.
Refreshing an External Feed and Clearing the Cache: What Happens After You Save
With a social gallery, it’s important to distinguish between changing display rules and getting fresh data. Pretty Grid’s listed features include manually refreshing a social feed, scheduled synchronization through a WordPress task, and clearing the cache for a hashtag setup. This means what appears on the page may depend not only on the current setting in the interface but also on when the plugin last retrieved the external content.
Don’t make assumptions about how the plugin works internally. The visible sequence is enough: you choose a source and limit, the plugin retrieves or uses saved data, and then displays it in the selected layout. If the external feed changes but the block on your site doesn’t, the cause could be the plugin data, page cache, server cache, or the source’s access rules. Check these possibilities one at a time.
A Safe Refresh Order
First save the gallery settings. Then, if you need fresh data, use the manual refresh option for the relevant feed. After that, clear the cache associated with the page and open the page outside your current session. If your hashtag setup has a separate cache-clearing option, use it only after the campaign is configured correctly. Finally, compare the first few items with the expected source. This order keeps configuration edits, data refreshes, and what visitors see on the page separate.
Scheduled refreshes don’t eliminate the need to check the display. They reduce the manual work of keeping content current, but site owners still need to notice if refreshes stop after a server change. Once you enable a schedule, check the block after a normal refresh interval and confirm that a new post appears as expected. Don’t draw conclusions from a single immediate refresh: multiple caches may be involved, and they don’t have to clear at the same time.
When to Use Manual or Scheduled Refreshes
Manual refreshes suit campaigns that an editor reviews before publication, portfolios that change infrequently, and the testing stage. They give you more control: you can see when new data was retrieved and check it on the page right away. Scheduled refreshes are a better fit when freshness matters to visitors and the editor is prepared to respond to changes on the external platform. For a home page, it may still be wiser to keep a limited selection and update it deliberately than to display every new post without review.
If the external source stops responding, don’t randomly change the limit, columns, or styling. Check whether you still have access to the source, whether its content has changed, whether the page is showing an old cache, and then refresh only the relevant gallery. If you can’t rely on the block as a live source, temporarily replace it with a local collection or remove it from the page. Visitors shouldn’t see an empty space, a technical error, or unrelated cards just because the automated feed has taken priority over the page’s content.
Using a Caching Plugin: A Practical WordPress Approach
The available sources don’t confirm an official integration between Pretty Grid and any particular caching plugin, so it’s better to describe this as a general WordPress workflow. First set up and check the gallery while the site is running normally. Then enable your usual page caching features and make sure you have a clear way to clear the cache for the page that displays the gallery after saving or manually refreshing it. Don’t disable JavaScript optimization site-wide until you’ve found a specific conflict.
Rolling back is straightforward: if clicks or navigation stop working after you enable optimization, temporarily restore the previous optimizer setting and check the basic gallery again. Then look for a targeted exclusion in the optimizer’s documentation or contact its support team. Don’t try to fix the problem by editing Pretty Grid’s source files. That kind of change won’t hold up over time and won’t help you identify where the conflict started.
Practical Example: A Work Showcase on a Project Page
Here’s a practical example of using Pretty Grid to create an updated showcase for a creative project, instead of just displaying “nice pictures.” Suppose the site already publishes completed case studies, each with a title, a thumbnail, and a dedicated page with more detail. The goal is to add a compact selection of recent or curated work to a landing page, so visitors can get a feel for the project and open a case study that interests them.
This example doesn’t depend on assumptions about any external service’s interface, and it shows the full process: source posts, source selection, layout, card links, and a check of the finished display. Once you’ve followed it, you can apply the same approach to portfolios, products, or social feeds. The source may change, but you still need to control the quantity, card content, and links.
Goal and Success Criteria
The goal isn’t to put every item from the site on the page. You need a short showcase that answers two visitor questions: “What kind of work is here?” and “How do I open a project that interests me?” You’ll know it’s working if the collection contains only the intended case studies, every card links to the right page, the chosen layout preserves the subject of each image, the block keeps its order, and everything remains clear at a narrow width.
A display that looks good only in the editor doesn’t count as a success. The public page may look different because of the theme’s styles, the cache, the container width, and the actual captions. So decide in advance to check the published page or its preview URL, not the thumbnail inside the settings form.
Prepare the Source Posts
Create or select six to eight real posts that make up a cohesive collection. Each one should have a clear title, a featured image, and a working permalink. Don’t include a project that’s still a draft in a public test. If an important detail in a thumbnail is close to the edge, check how it looks in the card shape you plan to use. Sometimes it’s better to create a separate image for the showcase than to sacrifice the subject of the work for a uniform grid.
Decide the order of the posts before creating the gallery. For example, put the three most representative case studies first, followed by several others. Don’t expect an attractive mosaic to create an editorial sequence on its own. Even in a dynamic collection, visitors form their first impression from the top row, so those cards should represent the page rather than appear at random.
Build a Test Showcase
- Create a new gallery with a name that reflects where it will appear, such as “Home Page Case Studies.”
- If your edition of the product supports it, choose a WordPress post source and limit it to the group of posts you prepared or a clear selection rule.
- Set a low item limit that suits the top portion of the page, not the entire project archive.
- Start with Classic so you can check the order and card behavior without extra complexity.
- Check where each card links: it should open its own case study, not a random image or the site’s home page.
- Save the configuration and add it to a test page using the method provided by the plugin.
- Open the public page, check the first, middle, and last cards, then narrow the window and repeat the check.
If the basic showcase works, create a second version using Masonry or Carousel. Don’t overwrite the working version before you’ve compared them. Create a separate test gallery or note the settings so you can show colleagues both versions with the same content and choose based on what the page needs, not from memory.
When to Switch From Classic to Masonry
Switch if your photos really do have different orientations and preserving them helps show the work. For example, vertical details and horizontal panoramas may look more natural in an architecture portfolio without forced cropping. After switching, check the entire block, not just the top. A mosaic can make a strong first impression but handle one very tall image poorly or create an uneven bottom edge in a short collection.
If you’re switching only to hide a weak thumbnail, fix the source image instead. The layout shouldn’t cover up editorial problems. It’s better to change a post’s featured image than to create a composition that becomes unpredictable when you add another project.
How to Add Social Proof Without Making the Page Chaotic
You can use a separate social gallery below the main showcase. It would serve a different purpose: showing recent visual posts from the brand rather than linking to detailed case studies on the site. Don’t mix these sources in one block if visitors might mistake work on your site for external content. Give each section its own heading and a short explanation instead.
Set a lower item limit for the social collection and decide in advance whether you need captions. External captions can often clutter a case study page, while a follow button, listed among the product’s features, may give visitors a clear next step. Before enabling it, check where it leads and whether it makes the block look like disguised advertising. The button should complement a clear gallery, not rescue a random collection of cards.
What to Check After Publication
Don’t stop at “the grid is visible.” Follow a short checklist: open the page without an admin session, review the whole block from top to bottom, click a few cards, go back, narrow the window, click the last card, and refresh the page after clearing the cache. Also view the page at a normal visitor’s pace. If images load slowly, the block feels unpredictable, or captions jump around, fix that before adding more effects.
Example recap: Pretty Grid is useful when each setting supports the page’s purpose. The source determines the content, the limit controls the size of the showcase, the layout affects how visitors browse, the link defines what they can do, and a check of the public page confirms that the whole flow works.
When a Social Feed Belongs on a WordPress Page
A social gallery is useful when fresh visual content helps visitors understand what a project is doing, see recent work, or open posts the team already maintains-not because every site needs to show an external platform. For a restaurant, it might feature new dishes and events; for a brand, examples of the product in use; for a creator, recent work. But if the feed is rarely updated, mixes in personal content, or relies on unreliable access, don’t make it a central part of the page.
Choosing Between an Account Feed and a Hashtag Feed
An account feed is usually easier to manage editorially: you know who publishes the content, can review its general tone in advance, and can spot an unsuitable post sooner. A hashtag feed is useful for a campaign or user-generated content, but needs more careful review. Even if the feed updates automatically, don’t assume it will match the site’s style and context. Set a low item limit, check the content manually, and make sure you can temporarily disable the block or switch back to a local collection.
Since the product description mentions clearing the cache for hashtag campaigns, add a quick step to your editorial workflow after changing a rule or publishing an important post: refresh the relevant feed, clear its cache, open the page as a regular visitor, and confirm the collection. This doesn’t promise instant synchronization; it’s a review habit that helps you tell fresh data from an older page display.
For Multiple Accounts, Start With Separate Galleries
Pretty Grid’s premium features include support for multiple social accounts. Even if your edition offers this option, don’t start with a single feed that combines all sources. Create a separate test gallery for each account, compare the images, captions, and links, and then decide whether to combine them. Separate galleries are easier to maintain, disable, and explain to visitors: one might show the brand’s posts, while another features team work or event content.
Combine sources only when you have a clear editorial rule for doing so, such as using several official accounts that support the same campaign. If one feed publishes news and another features archive photos, a shared mosaic could give visitors the wrong impression of how current the content is or confuse the topic. Just because it’s technically possible doesn’t mean you should mix the content.
The Follow Button: When It Helps
A follow button makes sense when visitors who have viewed the gallery are likely to want more content on the original platform. Place it below the block as a secondary action; don’t use it in place of the card links or pair it with an aggressive prompt. Test the button in a private window to make sure the URL is expected and the page still works if external scripts are blocked.
If the button isn’t available in your edition or doesn’t suit the page, don’t look for questionable code to imitate it. It’s more useful to keep the grid working and, if the site’s editorial policy allows it, add a regular text link elsewhere on the page. What matters is that visitors understand what the link does, not that the page has as many interactive elements as possible.
Check the Results: Appearance, Links, and Editorial Control
Checking the display isn’t finished when the block appears on the page. With CodeCanyon Pretty Grid, verify three things: the data matches the source, the layout makes the data easy to browse, and the editor can safely update the block later. Checking only the appearance could leave you with broken links or an outdated feed. Checking only the data could mean missing cramped cards, broken carousel arrows, or captions that disappear at narrow widths.
A Review Checklist for a Published Page
Open the page in a different window from the one you just used in the admin area. A separate browser profile or private window can help you avoid admin elements and a saved session. Scroll to the gallery, but don’t click anything yet. Ask yourself: Is the section’s purpose clear from its heading and surrounding text? Can you tell roughly how many items it contains? Does the first row look complete?
Next, check the links. Click the first card, one in the middle, and the last card. Each click should work as expected: a post should open the correct post, an image should open in the intended way, and a video shouldn’t leave visitors on a blank page. Go back and check that the page is still at a sensible position. In a carousel, check the first and last available items, the arrows, and any other navigation method the plugin provides.
- Data: The block contains no unrelated, duplicated, or missing items, and the number of cards matches the chosen limit.
- Layout: Images stay inside the container, spacing is even, and captions don’t cover important parts of thumbnails.
- Links: Clicking a card takes visitors where the page suggests it will.
- Responsive display: Cards and carousel controls remain usable at narrow widths, if you use a carousel.
- Updates: After changing one setting, the public page shows a predictable update.
Why It Helps to Compare Before and After
When you change the layout, limit, or source, make a quick note of the original setup. You don’t need a detailed report. Just record what changed, on which page, what you expected, and what you saw. For example: “Lowered the test gallery limit so the section doesn’t crowd the project description; after saving, only selected cards appear and the links still work.” This helps prevent a common problem: a few days later, nobody remembers why there are two nearly identical galleries or which one can be deleted.
With a social source, a before-and-after check has another purpose. If the content changes after a manual refresh, check whether the new items still fit the editorial goal, not just whether the number of cards changed. The new posts may have loaded correctly but still be unsuitable for the page. In that case, clearing the cache repeatedly won’t help. Adjust the selection rule, lower the limit, or switch back to a local collection you can control.
Check Accessibility Without Making Unsupported Claims
Don’t claim that one plugin automatically makes the whole block accessible. But any editor can check a few basics: Is the section’s purpose clear from its text? Are links easy to distinguish? Does navigation rely on a tiny icon alone? Does useful information disappear on hover? Do visitors need to tap with unusual precision? If the cards include text, check its contrast and length. If clicking opens an enlarged view, make sure visitors can close it and return to the content.
Take special care with text embedded in images. Pretty Grid may arrange the thumbnails attractively, but it can’t make the text in an image easier to read. Repeat important information in the page’s regular content or in a caption. Don’t use the gallery as the only way to communicate promotion terms, contact details, a schedule, or required policies.
Speed and Reliability: Keep the Showcase From Weighing Down the Page
A gallery can bring together several resource-heavy elements: images, external previews, navigation scripts, and, for social sources, data refreshes. Don’t judge performance only by how quickly the page opens for an administrator. Start with the page’s needs: how many cards it really needs, how large the source images are, whether you need a carousel, and what happens when an external service doesn’t respond.
Reduce the Content Before Trying to “Optimize Everything”
The safest optimization is to leave out content that doesn’t help visitors. Review the item limit, remove duplicates, and don’t place the same feeds in multiple sections. If a landing page already has large photos, keep an additional grid compact and focused. A standalone gallery page can show more items, but visitors still need an easy way to continue browsing without a heavy initial load.
Prepare reasonably sized source files in the media library and use the site’s existing image optimization tools. Don’t replace originals manually in plugin folders or add unknown code to plugin templates. If images look blurry, check the thumbnail dimensions and the quality of the source files first. If the page slows down after you enable an external feed, check the item limit and caching before increasing server resources.
How to Check for an Optimization Conflict
If an interactive feature stops working after you enable script combining or deferred loading, check for a reproducible cause. First confirm that the gallery works with the same source on the same page under normal settings. Then enable one optimization setting, clear the cache, and repeat your checks. If a specific issue appears, revert only the last setting. This lets you look for a documented exclusion in the optimization tool instead of disabling all performance features for one section.
Don’t assume that “the cache will always fix it.” Caching can speed up a ready-to-display page, but it can also keep showing an outdated version. Add a step to the editorial instructions that specifies who clears the cache and when after a gallery update. If nobody owns that task, visitors may see different versions of the page and assume Pretty Grid is broken when the real issue is the publishing workflow.
Updates and Safe Maintenance
The WordPress directory shows that the product is maintained separately from its older CodeCanyon listing, so before updating, check the source of your installed copy and its change log. The available vulnerability database also includes a report about sensitive information disclosure in older Pretty Grid releases, along with a version range in which the issue was fixed. This doesn’t establish the status of any particular installation, but it does suggest a good maintenance rule: don’t leave a version you know is old without checking for updates and compatibility.
A safe process is to back up the site or apply the update in a test environment first. Open a test page with the gallery and check the source, links, and appearance at a narrow width. Then repeat the same checks on the live site. If the update changes the display, don’t try to preserve the old appearance by editing plugin files. Look for a setting or a compatible solution in the theme first, and if necessary, temporarily return to a known stable environment using your site’s maintenance procedures.
Important: A social gallery shouldn’t be the only place important content is stored. The page should still make sense if the external feed is unavailable, and critical details should remain available as regular text and in the appropriate sections of WordPress.
Fine-Tune the Appearance Without Editing Plugin Files
The built-in spacing and layout options may be all you need. If they aren’t, don’t edit Pretty Grid’s styles or templates directly. Those changes will disappear in an update, and if an error occurs, it will be harder to distinguish the plugin’s behavior from your custom changes. Start with the individual gallery settings and the theme’s options. If the issue remains, make a small, reversible change in the location your site already uses for custom CSS.
What You Can Safely Adjust With Custom CSS
Good candidates include neutral appearance tweaks: add space around the section, match the block’s width to the page container, make a nearby heading easier to read, or adjust the spacing between the gallery and its description. Before making a change, open your browser’s inspector and make sure you’ve selected the wrapper for this gallery, not a general image class from the theme. If the selector affects every image on the site, it’s too broad.
Don’t publish “universal” CSS for CodeCanyon Pretty Grid with made-up class names: the available sources don’t confirm a stable class structure across editions. A practical approach is to scope the style to a specific page or container, make one small change, clear the cache, and check the page at wide and narrow widths. If the result isn’t right, remove just the rule you added. That’s a proper rollback.
What Not to Do for the Sake of Appearance
- Don’t make changes to the plugin’s source files or asset folder.
- Don’t hide captions or controls with global rules without checking the page at a narrow width.
- Don’t change card links with a script if you can set the click behavior in the gallery itself.
- Don’t layer third-party animation libraries on top of the carousel until you’ve confirmed the built-in behavior isn’t enough.
After any visual tweak, repeat your earlier checks: source, layout, links, width, and cache. If the change affects only the static layout and leaves the data alone, it’s easy to understand. If it requires editing several unrelated files, stop and reconsider how the page is put together.
Pretty Grid Troubleshooting: Symptoms, Causes, and Safe Fixes
You can solve most gallery problems faster if you don’t start with a random reinstall. First describe the symptom from a visitor’s point of view: “the block is missing from the page,” “old cards are showing,” “the carousel won’t move,” “some images extend past the edge,” or “the link opens the wrong item.” Then identify where the problem occurs: the plugin isn’t active, the gallery wasn’t added to the page, the source returned no data, the page is showing an old cache, or the theme is affecting the layout.
The Gallery Doesn’t Appear on the Page
Symptom: No cards appear on the published or test page, even though the configuration is saved. Possible cause: The plugin isn’t active, the page doesn’t include the plugin’s display method, you’re editing the wrong page, or the theme is showing a cached version. What to check: Open Plugins, confirm that the plugin is active, then return to the specific gallery and check that it has actually been added to the correct page.
How to fix it: Create a separate, minimal test page, add a single gallery display, and publish the page or open its preview. If the block appears, the issue is on the original page or in its template, not with the data source. If it’s still missing, return to the basic installation: save a simple local collection and check for system messages. When to roll back: If you’ve already added several carousels, external feeds, and styles, temporarily leave one basic gallery in place and restore the other changes to their saved state.
The Page Shows the Wrong Content
Symptom: The grid shows old, unrelated, duplicated, or missing cards. Possible cause: The wrong source is selected, the selection rule is broader than expected, the limit cuts off the relevant part of the sequence, or the page is showing cached content. What to check: Compare several visible cards with the source collection, then check the source type and item limit in that gallery’s settings.
How to fix it: Switch back to a simple, controlled source, such as a curated set of images or a few posts, and see whether the problem goes away. Then restore the dynamic source you need, but keep the limit low and use one clear selection rule. After manually refreshing the feed, clear the page cache and check the display again in a private window. When to roll back: If the external feed remains unpredictable, temporarily replace it with a stable local showcase instead of leaving a questionable feed for visitors.
The Carousel Appears, but Its Controls Don’t Work
Symptom: Cards are visible, but the arrows, scrolling, or slide transitions don’t work as expected. Possible cause: A conflict with script optimization, a theme style overlapping a control, a container that’s too narrow, or several similar interactive features on the same section. What to check: Repeat the test on a simple page with the same gallery and no additional widgets around it. Then compare its behavior with your normal optimization settings and with only the last suspect setting turned off in a test environment.
How to fix it: Switch back to Classic first and confirm that the data and links work. Then enable Carousel without automatic transitions, check the arrows, and navigate to the last item. If the problem appears only with a particular optimization setting, look for a targeted, documented exclusion in the optimization tool. When to roll back: If a compact layout isn’t essential, keep the predictable grid. That’s better than keeping an effect visitors can’t use reliably.
Images Extend Past the Container or Look Uneven
Symptom: Some cards extend beyond the content area, captions jump around, the last row looks random, or horizontal scrolling appears at a narrow width. Possible cause: The number of columns doesn’t suit the container width, the images have very different proportions, the spacing is too large, or the theme has a rule that affects all images. What to check: Open the same page at wide and narrow widths, then reduce the density in this gallery’s settings only and compare the result.
How to fix it: Start with fewer columns and moderate spacing. If the source images really are different, compare Classic and Masonry using the same collection. Check whether the theme applies a general rule to image tags. When to roll back: If a local CSS change affects images on other pages, remove the overly broad style and return to the plugin settings or use a narrower container.
The External Feed Doesn’t Refresh or Leaves an Empty Space
Symptom: New posts don’t appear, the gallery is empty, or the display suddenly becomes incomplete. Possible cause: Access to the external source, permissions, or account data may have changed. The page may also be showing an old cache. Official forums for similar products show that social account connections can depend on tokens, server limits, security settings, and caching. Don’t assume a specific cause for Pretty Grid without an error message from its interface.
How to fix it: Check access to the selected source, then run the manual refresh provided by the plugin. For a hashtag feed, use the related cache-clearing option if your configuration includes one. Clear the page cache and check the public URL afterward. When to roll back: If the issue doesn’t resolve quickly and the feed isn’t critical, temporarily remove it from the key page or switch back to a local collection rather than leaving an empty block.
Troubleshooting rule: Change one possible cause at a time. If you change the source, layout, limit, optimization, and CSS all at once, the outcome won’t tell you what actually caused the problem.
Questions to Answer Before You Publish
Can I start with a test gallery and move it to a live page later?
Yes. That’s the recommended approach. First test a simple source, item limit, layout, and card links on a test page. Then move the verified configuration to a live page or recreate it in a separate gallery with a clear name. Don’t publish an experiment in a critical section of your site before checking its public display.
Do I need to try every listed layout to find the best one?
No. Compare two or three options using the same cards. Classic is a useful baseline, Carousel can show a sequence compactly, and Masonry works well with images in different orientations. Highlight and Hashtag need a clear editorial purpose. The best option is the one that helps visitors understand and open the content, not the one with the most motion.
Why do visitors still see the old block after I save the settings?
Check the page cache, the plugin cache, and whether the source has a separate manual refresh. First save your changes. If you’re using an external feed, refresh its data. Then clear the page cache and open the URL in a new private window. Don’t change other settings at the same time; wait until you’ve checked this process.
Can the plugin display WooCommerce products?
The product materials mention a WooCommerce product gallery demo. That’s a good reason to test the feature with sample products, but not a guarantee of compatibility with every theme, store, or checkout extension. Before publishing, check the images, product links, page speed, and cache behavior.
Can I use the same block for a portfolio and a social feed?
The ability to mix media doesn’t always mean it will help visitors. A portfolio needs a controlled order and links to case studies; a social feed depends on freshness and the external source’s rules. It’s usually clearer to create two separate sections, each with its own purpose, limit, and refresh procedure.
Should I enable automatic carousel transitions?
They’re optional. First make sure visitors can navigate manually and tell that more cards are available. Enable automatic transitions only after checking the display at a narrow width and confirming that the movement doesn’t interfere with reading captions or choosing a card.
How often should I check the external feed?
It depends on the block’s purpose. A home page or campaign feed benefits from regular visual checks after important posts and access changes. For a secondary section, check it according to your editorial schedule and after site updates. The point isn’t to follow a formal interval; it’s to make sure an empty, outdated, or irrelevant block doesn’t go unnoticed.
When CodeCanyon Pretty Grid Is a Good Fit
CodeCanyon Pretty Grid is a good fit when your site needs a managed visual display from a suitable source and your team is prepared to maintain that source and check the public page. Start with one simple gallery, give it a clear purpose, set a moderate item limit, choose a layout that suits the content, and check the whole flow: data, layout, links, narrow-width display, and refreshes.
Don’t rush to turn the gallery into a complex interactive feature. First get a stable grid and working links. Add a carousel, social synchronization, or visual tweaks only when they serve a clear purpose. If the product suits your needs and the test passes, you can download CodeCanyon Pretty Grid and install it in the prepared environment.
The main takeaway isn’t a specific number of columns; it’s having a manageable workflow. You know where the cards come from, why you’re showing that many, how visitors use them, what refreshes the external feed, and how to restore the working setup if something goes wrong. With that in place, Pretty Grid becomes a practical WordPress tool for showcasing content, not just a decorative add-on.


