The CodeCanyon JPS Ajax Post Layout is a WordPress plugin that enhances Visual Composer with Ajax styles. It streamlines the layout creation process by offering dynamic elements that can be incorporated seamlessly. Users can optimize their websites design efficiency by leveraging the plugins features for a more interactive and engaging user experience.

Plugin Version: 2.0.0
 
WordPress plugin CodeCanyon JPS Ajax Post Layout

Plugin Features

This tool provides a user-friendly interface within Visual Composer, allowing for easy integration of Ajax styles to create captivating post layouts. With its customizable options, designers can tailor the display to suit their specific needs and branding requirements. By utilizing this plugin, web developers can save time and effort while still producing visually appealing and dynamic content layouts on their WordPress sites.

By harnessing the power of Ajax technology, CodeCanyon JPS Ajax Post Layout enables real-time updates and seamless content loading without the need for page refreshes. This not only enhances the overall user experience but also contributes to faster loading times, improving site performance. Additionally, the plugin offers various pre-designed layouts and templates to expedite the design process and inspire creativity.

With the ability to effortlessly add animations, effects, and transitions to post layouts, this plugin empowers designers to create visually stunning and engaging content displays. Its compatibility with Visual Composer ensures a smooth and integrated workflow, making it a valuable addition to any WordPress website. Webmasters can elevate their websites aesthetic appeal and functionality by leveraging the advanced features of this plugin.

Furthermore, CodeCanyon JPS Ajax Post Layout provides responsive design options, ensuring that post layouts adapt seamlessly to different screen sizes and devices. This feature is essential for optimizing the user experience across various platforms, enhancing accessibility and usability. With its robust set of tools and functionalities, this plugin offers a comprehensive solution for dynamic and visually appealing post layouts in WordPress.

Specifications:

Release date: 09-07-2015
Last updated: 25-02-2022
Type: Paid
License: GPL 
Subject: Specific for WPBakery
Compatibility: W5.x
Includes: Plugin
Language packs: English
Developer: CodeCanyon

Rating:
4.4444444444444 1 1 1 1 1 (243 Votes)

Download by subscription!

You need to log in on the site and purchase a club subscription!

Share with your friends!

 

CodeCanyon JPS Ajax Post Layout Setup Guide for WordPress

This guide to CodeCanyon JPS Ajax Post Layout will help you understand which posts and taxonomies can be displayed on a page, prepare a compatible WPBakery Page Builder environment, build several independent feeds, and test dynamic loading without accidental duplicates or empty cards. We will follow the path from reviewing the source posts to producing a clear public-facing result: a grid, list, filter, load-more button, or scrolling feed.

This add-on has a narrow but practical purpose: it does not create posts or replace the WordPress editor. Instead, it displays existing content on a page built with WPBakery Page Builder. Its product listing describes it as a WPBakery extension with AJAX/JSON loading, data-source selection, and support for categories, tags, custom taxonomies, and post types. Before configuring it, the key decision is not "which style looks best," but which collection of content should become its own feed and how visitors should navigate it.

Older product descriptions may refer to Visual Composer, its former name. In current day-to-day work and in the WordPress dashboard, use the WPBakery Page Builder installed on your site as your reference point, but do not assume compatibility from the name alone. The public listing mentions a limited range of WordPress versions, and no recent public changelog confirming support for newer environments was found through open search. For a production site, the sensible approach is straightforward: start with a copy of the site, build a small test display, and only then move the configuration to the main page.

Diagram showing how CodeCanyon JPS Ajax Post Layout creates a dynamic WordPress post feed
The illustration shows the add-on's core workflow: posts serve as the source, element settings determine the query and presentation, and visitors get a controlled feed without a full page reload.

When a Dynamic Feed Is Actually Useful

JPS Ajax Post Layout is a good fit when a page needs more than a random list of posts. It is designed for a curated slice of an editorial catalog. For example, a magazine may publish news across several sections, a portfolio may store projects in a separate custom post type, or an event site may organize content through its own taxonomy. In each case, editors manage normal WordPress content first and then build a showcase from it. The add-on is useful in that second stage: it gives a page element its own query, display option, and way to continue loading content.

A practical use case might look like this. A "Resources" page needs to display eight recent articles from three topics. A reader can select one topic, see the matching cards, open an article, and request another batch if needed. A separate element further down the page can display three featured posts of another type at the same time. This is not one shared WordPress archive but two independent areas, so each needs its own source, sorting, and display rules.

The product listing describes a set of predefined styles, including standard and flat grids, masonry layouts, lists, carousels, block layouts, and special variations. Treat these options as a reading-density choice rather than a number to compare. A grid works well for short, consistent cards with a cover image and title. A list handles longer titles, dates, and introductions more gracefully. Masonry can work when images have different proportions and this does not interfere with navigation. Reserve a carousel for a small, clearly limited collection; otherwise, important posts become less visible.

Keep the Source, Filter, and Presentation Separate

A clear setup starts by separating three decisions. The source determines which objects are eligible at all: regular posts, pages, or a custom post type registered on the site. The filter narrows that source to specific categories, tags, custom-taxonomy terms, or individual items. The presentation determines what those items become on the page: a grid, a list, cards with selected fields, or a feed with progressive loading. If you mix these levels together, it is easy to fix the wrong cause: changing a style when the query is empty, or blaming AJAX when a source post has no image.

Before you begin, write a short profile for the planned block. For example: "Type - posts; allowed categories - Analysis and Practical Guides; first batch - six items; order - the editorial order returned by WordPress; visitor filter - categories only; continuation - button." This does not rely on guesses about the add-on's internal API, but it gives you clear criteria for testing the final setup. With this profile in place, an editor can spot an unwanted post before touching WPBakery settings.

Who This Tool Works For - and When It Adds Unnecessary Complexity

This add-on is suitable for a site owner or content manager who already uses WPBakery and wants to control a post showcase inside a specific page rather than rewrite a theme template. It makes particular sense for magazine sections, work collections, event listings, case-study catalogs, and pages with several topic-based feeds. For a developer, it can save time on a standard content block when the query rules fit within the fields available in the element and can be safely tested on a site copy.

Do not start with JPS Ajax Post Layout if you need full-text search across thousands of posts, complex faceted navigation with several connected conditions, personalized results, or a business-critical catalog with constantly changing inventory. Those needs require a dedicated query architecture, indexing, load testing, and sometimes a different specialized solution. The add-on also does not create custom post types for you: another plugin or the theme must register the post type and its taxonomies first, and only then can the feed use them as a source.

Practical rule of thumb: if you can describe the source in one sentence, the filter criterion in another, and the visible outcome in a third, the task is probably a good fit for this add-on. If the description needs dozens of exceptions, user permissions, stock levels, or personal data, design the data model and access rules before working on the page layout.

Checks Before Installation: WPBakery, Content, and a Test Page

The main dependency is confirmed by the product listing: JPS Ajax Post Layout is an add-on for WPBakery Page Builder. Your test site therefore needs a working WPBakery installation, access to edit a page through its interface, and several published items that will make the outcome visible. Do not test the block with a single post. With only one item, you cannot tell whether the filter works, whether the first card repeats, or whether progressive loading ends correctly.

Start by preparing six to twelve test posts. Some should use different categories or terms, several should have featured images of different sizes, one should have a long title, and one should have no image if that is acceptable on your site. This set exposes the real limits of the layout. Rather than inventing sample names, use the real editorial structure or a copy of its data. That way, you test not only an attractive demo but also the behavior of future content.

What to Document Before the First Activation

  • A backup or test copy of the site where you can safely change the page and clear the cache.
  • A working WPBakery page that does not contain another complex feed using a similar script during the initial test.
  • A set of published items with known categories, tags, or custom-taxonomy terms.
  • A consistent thumbnail size or image-processing rule if the selected layout depends on images.
  • A cache-testing plan: who will clear the page cache after a setting changes and where the result will be checked without a saved session.

Also check how the active theme renders titles, thumbnails, dates, and post links. The add-on builds the feed area, but final readability also depends on the active theme: its fonts, container width, image rules, and its own scripts. Do not move a large showcase directly onto a live homepage. First create a hidden or test page, build one element, check it in a new browser window, and only then repeat the setup where visitors will see the block.

Installation and Your First Element on a Test Page

Installation should not become a guessing exercise about what an archive contains. Use only the package intended for plugin installation, and follow the included documentation if the vendor separates the main archive from the installable file. In a standard WordPress workflow, open Plugins, choose Add New, then Upload Plugin, select the installation ZIP file, and click Activate after it has been unpacked successfully. If the archive installs but no plugin appears in the plugin list, do not upload it again over the first attempt. Review the delivery package first and determine whether you selected the full bundle instead of the required ZIP file.

After activation, a separate large settings section may not appear. This is a page-builder add-on, so its main working area is usually where you add elements in WPBakery. Open the test page in the WPBakery editor, add a new element with the plus button, and search for JPS Ajax Post Layout by name. If the element search returns nothing, check these three things in order: whether the plugin itself is active, whether WPBakery is active, and whether the page is actually being edited with WPBakery rather than only through the standard WordPress editor.

Build the first working instance as minimally as possible. Do not enable complex sorting, multiple filters, an entrance effect, infinite scrolling, and nonstandard spacing all at once. The first pass has a modest goal: show one clear selection of several published posts and confirm that it saves correctly, appears on the public site, and does not break the theme container. Only after that should you add visitor-facing convenience features.

A Safe First-Run Sequence

  1. Create a test page with a standard theme container and open it in WPBakery.
  2. Add one JPS Ajax Post Layout element and choose the simplest readable display option that does not depend on unusual card heights.
  3. Select a source: regular posts or an existing custom post type that already contains published content.
  4. Limit the query to one known category or a small set of posts so the output can be checked visually.
  5. Set a small number of items for the first batch, such as enough to fit comfortably in one or two rows within your container.
  6. Save the page and open it as a visitor, not only in editor mode.
  7. Check links and thumbnails: every card should lead to the expected post, not a duplicate or an empty page.

This sequence is valuable because every action has an observable outcome. You selected a content type, so only posts of that type should appear. You added a category limit, so unrelated posts should disappear. You saved the page, so the feed should be visible without the builder panel. Once all of those conditions are met, you have a reliable return point. If the next experimental setting behaves unexpectedly, you can quickly return to the minimal working element.

Why You Should Start with a Standard Load Mode

The product listing mentions both a Load More button and infinite scrolling. Both methods continue the feed without a full page refresh, but they are easier to test in a different order. A button gives visitors a clear action point: after clicking it, the next set of cards should appear while the previous cards remain in place. This is useful for diagnostics because you can see how many times a request was made and exactly how the list changed. Infinite scrolling is useful for a long feed, but it depends on page height, the trigger point, and caching behavior, so it is best enabled only after the button has been tested successfully.

Do not treat the absence of another page as an error until you have checked the number of matching items. If the filter leaves exactly as many posts as the first batch displays, the element should end the feed. In that case, the correct outcome is no further loading or an inactive control, not an artificial repeat of the same cards. Before troubleshooting, open the source post list and count only the items that match the current rule.

First-run checkpoint: you should have one saved element with a defined source, a limited query, and a visible first batch of content. Until this foundation is tested, styling and effects only hide the real cause of an issue.

Configuring the Source: Posts, Custom Post Types, and Taxonomies

The most important part of JPS Ajax Post Layout is not the decorative layout choice but the definition of where its cards come from. The public product description lists regular posts, custom post types, categories, tags, and custom taxonomies. In practice, this means that the element can become a showcase not only for news but also for site entities already registered by a theme or another plugin: portfolio projects, events, catalog items, or testimonials.

Start with one source. If the feed needs blog articles, choose regular posts and do not add another type in parallel merely for testing. If you need a custom post type, first confirm that it contains published items and that its taxonomy is actually attached to that type. Similar names can be misleading in WordPress: a regular-post category and a custom-taxonomy term may look identical, but they are different entities to a query. Check not only the visible name but also where editors create the content.

How to Choose a Filter Without Unpredictable Output

A category works well for a stable editorial section. A tag is useful for a narrower, overlapping topic, but it usually produces a less predictable content density because editors do not apply tags as consistently as categories. A custom taxonomy is useful when a post type has its own classification, such as "service," "city," or "project status." Select individual posts only for a manually curated collection with an exact composition. Such a block is stable, but it stops updating automatically until an editor adds new content to it.

For every feed, decide in advance what its matching rule should be. If visitors see categories as a filter, they expect clicking a category to show only the matching cards. If several terms are used, do not disguise a complex intersection as a simple topic choice. Test one term first, then two, and open the page in a separate window after every save. This takes one extra minute, but it is faster than trying to locate a problem across ten fields changed at the same time.

Practical source choices for an initial feed
Goal What to choose How to test it
Recent articles from one section Regular posts and one category Add a test post to a different category: it should not appear.
A portfolio project collection A custom post type and one of its terms A newly published project with the required term should enter the feed.
An editorial selection Individual items Compare the order and links against the approved list.
Several topics on one page Several independent elements Changing one block's filter should not alter another block.

The table leads to an important conclusion: one field cannot replace an editorial rule. If categories are populated inconsistently across the site, no layout option will make the feed coherent. First agree on which terms are required, who assigns them, and which posts should not enter the feed. Once that is done, JPS Ajax Post Layout becomes a display tool rather than a way to repair unstructured data.

How the Configuration Becomes a Public-Facing Feed

The add-on's behavior can be understood as a sequence: source posts → query rule → selected display → visitor action → newly visible batch. WPBakery stores the element parameters in the page content. When the page opens, WordPress renders the container and the first batch of posts. When a visitor switches an available filter, clicks the continuation button, or reaches the scroll trigger, the script requests the next matching portion and inserts it into the existing area. This is why the final behavior depends on the data, element parameters, theme markup, and JavaScript running on the page.

This sequence has several practical consequences. Do not judge the initial output in the editor alone: different styles and already saved data may apply there. Do not test a filter using identical posts: it may produce no visible change even when it works correctly. And do not assume a newly loaded batch is correct simply because it appeared: make sure it contains no duplicates, that its links lead to the right content, and that the order does not reset after the next action.

Map of source and filter configuration in the CodeCanyon JPS Ajax Post Layout element
The diagram connects the selected post type, taxonomy term, and feed option to what visitors see after using a filter or the continuation button.

Building a Readable Showcase: Layout, Cards, and Display Rules

Once the source works, move on to presentation. JPS Ajax Post Layout is described as offering grids, lists, masonry, block options, a carousel, custom spacing, and support for custom fonts. That does not mean a page should show as many settings as possible. A good feed answers two questions within seconds: what is this content, and where does clicking take me? Everything else should support that path rather than compete with it.

Start by choosing the level of content consistency. For news with uniform editorial covers and short titles, a grid of equal cards is usually convenient. For articles with introductions of different lengths, a list is better because it gives each post vertical room and does not force visitors to compare cards of unequal height. Masonry is useful for a visual portfolio when images are a major part of the decision. However, it does not support strict left-to-right, row-by-row reading, so it may be weaker than a regular grid for reference material or chronological content.

Settings to Define Before Adding Visual Effects

For the first working version, it is enough to define six decisions: the feed style, the number of columns or area width, the number of cards in the first batch, whether an image is required or optional, the metadata to show, and the way the list continues. These decisions are connected. The more columns you use, the shorter titles should be and the more carefully you need to handle metadata. The more cards appear in the first batch, the more image-loading speed and visitor patience matter. The richer the card itself, the less visual weight you should add through backgrounds, borders, or entrance effects.

For a typical magazine page, a calm starting point is a uniform grid, several cards across a standard theme container, a thumbnail, title, one short metadata cue, and a clear link to the article. For case studies, that metadata cue can be replaced with a project term. For events, it can be a date if your data and template actually provide it. The product listing mentions EventBuilder theme support and event metadata, but do not extend that claim to an arbitrary theme: confirm that your post type contains the relevant fields and that the selected feed option renders the information visitors need.

Test the Card with Real Content

Open the page with a long title, an item without a thumbnail, and a card whose category contains several words. If everything looks acceptable only with perfectly prepared content, the problem is not the user but an overly fragile presentation option. It is better to switch to a simpler display or improve the editorial image rule than hide overflow with aggressive text truncation. Repeat the same check at a mobile width: a word may not fit in a title, and two columns may become too narrow no matter how good the feed looks on a large display.

If custom fonts are available in your configuration, add them last. A font should not compensate for an unclear hierarchy. First make sure the title, date, term, and link differ through size, weight, and spacing. Then check loading speed and readability. If the theme already loads its own typefaces, adding another font to one element often makes the page feel less cohesive. It is more reliable to use the theme typography and change it only for a specific editorial reason.

Multiple Feeds on One Page Without Conflicting Purposes

The product listing notes that multiple layouts can be used on a single page. This is useful when the blocks serve different purposes, not when every section tries to show everything at once. For example, the top of a page might contain a small handpicked selection of key materials, followed by an automatically updated grid of recent posts from two categories, and then a compact strip of related work. Give them clear semantic boundaries: a section heading, a different source, or an explicit purpose. Three identical feeds in a row turn the page into a long repetition even if each one works correctly from a technical standpoint.

Give each instance its own profile. The first block: "editor-selected content, no filter, one row." The second: "category-based news, visitor switching enabled, continuation button." The third: "portfolio projects, no tags, compact list." During testing, change the parameters of one instance at a time. If changing the second block makes the first block disappear, the issue may involve a shared theme script or identifier conflict rather than the data itself.

Density rule: one feed style should serve one reader need. Do not combine a long description, many terms, a large animation, a continuation button, and a filter in one card when visitors need to choose content quickly.

Filters and AJAX: What Visitors Should See

A dynamic filter makes sense only when the collection actually changes. The product listing mentions queries by categories, tags, and custom taxonomies, along with multi-category filtering. To a visitor, this should look like a clear topic choice rather than a technical set of terms. Use names from the site's editorial structure for filters. If a category is called "Practical Guides," do not shorten it on the page to a vague word that does not explain what content will appear after clicking.

Start with a minimal filter containing two or three non-overlapping terms. Click each one in turn and record three things: whether cards from the previous topic disappear, whether the new collection matches the selected term, and whether the block returns to the expected area of the page. Then open the element in a fresh browser window with no active editor session. Finally, test the first switch after clearing the cache. If the filter shows an old collection at any stage, do not immediately change the appearance of the buttons. First determine whether fresh markup reaches the page and whether a cache is returning old HTML or an old request response.

Tag filtering requires a particularly careful editorial convention. Tags often overlap, and one post may have several terms. A visitor who clicks one tag expects all matching content, but may not understand why an item from another category appears alongside it. That is not a technical error if the source rule works that way. It is, however, a reason to revise visible labels, remove an unnecessary tag from navigation, or divide one broad feed into two more honest ones.

Continuation Button or Infinite Scroll

A continuation button is better when visitors should decide for themselves whether they need more content. It works well on a homepage with other important blocks below and on a topic showcase where control over page length is useful. During testing, make sure that clicking it produces genuinely new cards and that the button does not disappear too early while matching items remain. Also check the state after the final batch: an inactive control or no additional loading should look like a natural ending, not a stalled interface.

Infinite scrolling is appropriate for a continuous feed where order matters more than separate sections. It takes longer to test: scroll to the trigger point, stop, wait for the output, then scroll farther and return. Watch for the same batch being added twice, page jumps, or requests firing before visitors have read the previous cards. On a page with heavy images, this behavior may feel slower, so first measure it on a normal device and only then decide whether it is justified.

Entrance Effects Without Losing Orientation

The marketplace description mentions numerous card entrance effects. Treat them as a secondary setting. An effect is acceptable if it gently confirms that new content has appeared after a visitor action. It should not make cards wait for a long time, alter reading order, or interfere with someone who has limited attention. Test the feed without effects first. Then enable one option and repeat the filter, button, and scrolling tests. If visitors cannot distinguish loading from animation, return to the neutral state.

This is where the difference between an attractive demonstration and a durable publication becomes clear. A demo shows a few identical cards and perfectly prepared images. A live page receives new editor-written text, changing thumbnails, caches, third-party optimizations, and visitors with varying network speeds. The configuration is complete only when the feed remains clear under those conditions, not merely in the editor's above-the-fold area.

Practical example of category selection and dynamic loading of new posts in JPS Ajax Post Layout
The scene shows an editor checking category selection in WPBakery while a visitor receives an updated set of posts on the page without a full reload.

Practical Example: A Magazine Topic Page with Two Independent Feeds

Consider a case where the add-on provides genuine value rather than simply changing the shape of cards. The site has regular WordPress posts in "Analysis," "Practical Guides," and "Interviews." On the editorial team's "Knowledge Base" page, two blocks are needed. The first is a short collection of four items that an editor selects manually as an introductory showcase. The second is an updated feed from the "Analysis" and "Practical Guides" categories, where visitors can switch topics and request another batch. An action in the second block must not alter the collection in the first.

The goal is to help visitors notice trusted key materials first and then continue reading independently within the topic that interests them. Preparation includes published posts with clear categories, several thumbnails with different proportions, a working WPBakery installation, and a test copy of the page. Before adding elements, the editor counts the items: exactly four posts are selected for the first block, and each of the two categories in the second block must contain enough posts for at least two batches. This simple step prevents false troubleshooting when the continuation button shows nothing because there is not enough data.

First Block: A Manual Showcase Without Hidden Automation

Add the first JPS Ajax Post Layout instance to the page and choose a source that lets you specify individual items, if that option is available in your version of the element. Select the four approved posts, choose a calm grid or list, and do not enable a visible filter. This block has a different purpose than the general feed: it does not need to update automatically, but it must preserve the editorial order. Save the page, open it as a visitor, and compare the order, titles, images, and links against the prepared list.

If one item does not appear, do not fix it by adding a second copy of the same post. Check the publication status, selected content type, and list accuracy. If a card appears without a cover image, decide on the editorial rule: either an image is required for the showcase and the post must be completed, or the selected layout must display an item correctly without one. Make that decision before the same case appears on a live homepage.

Second Block: An Automatic Category-Based Feed

Add a new instance below the first block. Choose regular posts as the source, limit them to the two agreed categories, and keep the initial count small enough for visitor actions to be immediately visible. Enable category switchers only after the general output already contains content from both categories. Use a button for continuation first. The page should then have two independent behaviors: the upper showcase remains unchanged, while the lower feed responds to category selection and receives new posts in batches.

Test the block as a reader would. Open the page from the beginning and note four or five visible items in the lower feed. Click one topic and confirm that only posts from the correct category remain. Click the other topic and compare the new collection with posts in the dashboard. Return to the general view, click the continuation button, scroll to the added cards, and open one of them. After returning to the page, make sure the visitor has not lost their visual point of reference and that the upper manual showcase remains unchanged.

How to Record the Outcome for the Editorial Team

Do not stop at saying "it works." Write a short checklist next to the task or in the site documentation: which categories belong in the feed, how many cards load in the first request, which continuation method is used, where the page is located, and who is responsible for publishing. When the theme changes or the page is edited later, this list will quickly distinguish an expected change from a regression. It also makes handoff to another content manager easier: they will see not only the WPBakery element but also the editorial reason behind its settings.

Outcome check: the upper block shows exactly four manually selected items; the second shows only the allowed categories; switching topics changes only the lower feed; the button adds new rather than repeated cards; and every link opens the original published post.

What to Check After Saving: Data, Page State, and Visitor Actions

A feed has two distinct outcomes: the editor outcome and the visitor outcome. The editor outcome is that the element parameters are saved in WPBakery and do not reset when the page is opened again. The visitor outcome is that the published page displays the expected cards, the filter responds to an action, and feed continuation does not disrupt the page's position or meaning. Neither one replaces the other. An element may look right in the editor but be cached on the public site; conversely, a visible page may continue showing an old state after an editor has already changed the parameters.

Check the state in three windows. The first is the normal window where you made the change. The second is a fresh private or separate window without editor data. The third is a narrow viewport or a real mobile device. In each window, follow the same sequence: open the page, switch a filter, return to the general view, request the next batch, and open one card. If the difference appears only in the second window, caching or differences in logged-in viewing are likely involved. If it appears only at a narrow width, inspect the theme container, image dimensions, and number of columns.

Test the Query, Not Just the Appearance

Cards that look similar do not prove that the query is correct. Choose three control posts: one that must appear in the output, one that must be excluded, and one that should appear only after a filter is switched. Then repeat visitor actions and record the outcomes. This approach is faster than scanning twenty cards in the hope of noticing an error. It is especially important with custom post types and taxonomies, where identical term names can belong to different data sets.

If the element allows individual post selection, add an item to the control group with an unobtrusive but recognizable marker: a unique short title or cover image. Do not use hidden drafts for this purpose. Testing should involve only published data that WordPress is expected to return to visitors. After the test is complete, such control posts can remain as real content or be replaced through the agreed editorial workflow.

Check the State After an AJAX Action

After filtering or loading more content, evaluate not only the new items but also the state of the controls. The active filter should clearly read as selected without overlapping titles or cards. The continuation button should remain available while matching items still exist and should not pretend to work after the feed has ended. If a loading indicator appears, it should disappear when the request finishes rather than remain as a false signal of endless activity. These details may seem cosmetic, but they are exactly what visitors use to decide whether to wait for content, repeat an action, or leave the page.

To test duplicates, perform two identical actions in succession only where the interface is designed to support them. With a button, click it once, wait for the output, and only then click it again. With scrolling, do not drag continuously downward: stop after a batch is added and compare the boundary between old and new output. If one card repeats, first record after which action it happens and which query was active. That is more useful than a general message such as "AJAX does not work" because it helps isolate a conflict between the query rule, script, and cache.

How Not to Mistake a Cache Issue for an Add-On Failure

Static page caching and JavaScript optimization can change observed behavior. The first feed batch may be rendered in a cached page while continuation is requested separately. After changing the configuration, clear the available site cache using the normal procedure and then check the page while logged out. If the issue disappears only after clearing the cache, document that step in the publication workflow. If it returns immediately after another save, temporarily disable only the questionable optimization on a test copy or exclude the page according to the rules of the caching tool in use. Do not disable everything on the production site because of one feed without a reproducible symptom.

This approach preserves reversibility. You change one factor, record the outcome, and can restore it. Permanently disabling caching across an entire site is not a good solution if the issue is tied to one block or its script. First confirm that a regular page without the element works, that the minimal feed works, and only then investigate the specific combination of filter, continuation method, and optimization.

Comparison of a WordPress feed before and after selecting a filter in JPS Ajax Post Layout
The comparison helps verify the main rule: the selected term changes only the output of the current feed, while other page blocks and post links remain in place.

Speed and Responsive Behavior: Why a Feed Can Become Heavy

JPS Ajax Post Layout reduces the number of full page reloads during filtering and feed continuation, but that does not remove the cost of the content itself. Every new card may include an image, title, metadata, link, and additional styles. If the first batch is too large, visitors wait before taking any action. If infinite scrolling loads dozens of large images, the page gradually becomes longer and heavier. Performance therefore starts not with the AJAX effect but with one question: how much information does a visitor really need in one batch to choose a piece of content?

For a news feed, a cover image, title, and one short cue are usually enough. Full text, a long introduction, several lines of metadata, and large background graphics on every card add weight and reduce distinction between items. If an article needs to be read, the visitor can follow its link. The feed does not need to duplicate the post page. This approach matters particularly for masonry and carousels, where images already take up a significant portion of the available space.

First-Batch Size and Feed Continuation

Choose the initial batch size based on the container and the page's purpose, not a desire to show the entire archive. A knowledge showcase benefits from several items so readers understand the topic, followed by an opportunity to continue. An archive page may display more posts, but thumbnail size then needs especially careful review. In every case, look beyond the administrator's fast computer. Open the page in a fresh window, wait for images to load, and decide whether it is clear that content is still appearing rather than frozen.

A continuation button helps limit the initial volume and leaves the choice to the visitor. Infinite scrolling removes an extra click but can hide the boundary between content already viewed and new content. If a form, contact details, footer, or another important block follows the feed, a button often provides a more predictable path. If you choose infinite mode, confirm that visitors can reach lower sections without unexpected continuous loading.

Images Are Part of Configuration, Not Decoration

Most image-related failures in post grids start before the page builder. Different items may have images with radically different proportions, source files that are too small, or no thumbnails at all. The selected feed style will not automatically fix that data. Before publishing, agree on what counts as an adequate cover image and review every new post against that rule. If the site has a standard thumbnail-regeneration tool, use it only after making a backup and according to its documentation. Do not manually alter files on a production server for the sake of one card.

If the selected style crops images, review three different kinds of content: a portrait photo, a wide screenshot, and a graphic containing text. In each case, the important subject should remain recognizable. When that is not possible, it is better to select a list option with a more neutral thumbnail or revise the editorial image-preparation process. Enforcing a uniform height is not an end in itself if it crops a key part of a diagram, a speaker's face, or a project title.

Minimum Narrow-Screen Test

  1. Open the page at a narrow width and confirm that multiple columns do not turn into overly cramped cards.
  2. Check filter names: they should fit, wrap predictably, or have a clear alternative display.
  3. Click the continuation button and make sure the page does not jump far away from the reading position after new items are added.
  4. Open a long title and confirm that its link remains easy to tap.
  5. Return to the top, switch to another term, and repeat the check without logged-in editor data.

Responsive behavior is not only about column count. On a narrow screen, visitors use filters differently, receive large images more slowly, and more often return to the previous view. A small initial batch, a clear button, and a compact card are usually more reliable than a complex carousel with many tiny controls. If a specific product style looks good only in a wide showcase, do not force it to work at all costs: choose another supported layout option for that block.

Where Responsibility Lies: WPBakery, the Theme, Cache, and Editorial Workflow

For troubleshooting, it helps to separate component responsibilities in advance. WPBakery stores and renders element settings on the page. JPS Ajax Post Layout defines feed behavior, available query rules, and the dynamic continuation method. WordPress stores posts, post types, taxonomies, publication statuses, and links. The theme provides the container, base typography, styles, and sometimes its own loading behavior. A cache and optimizer may store HTML, combine scripts, or defer their execution. The editorial workflow determines whether items have images and correct terms. A problem in any one of these links can look like "the feed does not work."

For example, an empty output should usually be investigated through the data first: is the item published, is the correct type selected, and does it belong to the term? A broken card width is often related to the theme, container, images, or an overly dense layout. A filter that works in the editor but not for visitors often requires checking the cache, optimization, or script loading. Chaotic output despite apparently correct settings frequently points to editorial tags and categories. This does not remove responsibility from the add-on, but it helps you investigate in the right order.

A Safe Caching Workflow

Working with cache is not a special official integration for JPS Ajax Post Layout. It is a standard WordPress workflow: a page with a dynamic feed should be checked after clearing the available cache, and a conflicting optimization should be investigated only on a test copy. If the filter shows old output after configuration, first repeat the test in a fresh window. Then clear the page cache through the normal method offered by the tool in use. If the outcome remains unchanged, temporarily disable one questionable optimization mode, such as deferred script execution, only on the site copy and only to reproduce the symptom. After testing, restore the setting and document the smallest exclusion if one is genuinely needed.

Do not consider it a fix to completely disable caching, combine all files differently, or remove performance protection on a live site. That can hide the cause and make other pages worse. A durable outcome is a documented sequence: which page contains the feed, which element changed, which action fails, how to reproduce the issue while logged out, and which focused setting restored expected behavior. This makes it possible to safely undo the solution if a theme or optimizer behaves differently after an update.

When You Need a Styling Adjustment, Not a New Feature

Sometimes the feed is technically correct, but there is too little breathing room between cards, titles have poor contrast, or the button blends into the background. In that situation, do not invent PHP hooks or product selectors that are not present in verified documentation. It is safer to start with the element's own parameters and the theme settings. If that is not enough, a developer can prepare a small CSS adjustment in a child theme or the standard Additional CSS field, based on real classes observed in the browser. Such a change should be limited to the container of the specific page and tested after a plugin update.

The safe refinement sequence is: make a copy, record the current output with a screenshot or test case, change one presentation setting, check wide and narrow screens, clear the cache according to the established procedure, and save a rollback method. Do not edit the add-on files directly. An update will replace those changes, and the cause will be lost. The service notes for this article do not use unverified code: no publicly confirmed extension points specific to this add-on were found in available sources.

An Editorial Process That Keeps the Feed Useful

After launch, add four short questions to the publishing workflow: does the item belong to the right type, has the correct term been assigned, does it have an adequate thumbnail, and should it appear in the manual showcase? This process is more useful than constantly rearranging cards by hand. It keeps an automatic feed current and makes the filter honest: visitors receive the topic they chose rather than a random mix of content left over from an old layout.

If several feeds operate on the page, assign an owner to each one. One block may update automatically by category, another may be managed manually by an editor, and a third may exist only for a campaign. Clear ownership reduces the situation where a new author adds an article and then tries to fix its absence by changing the layout. First check the inclusion rule, then the publication status, and only then the display parameters.

Responsibility map for WordPress, WPBakery, the theme, and cache when using JPS Ajax Post Layout
The map helps avoid searching for one universal cause: data sources, the WPBakery element, theme presentation, cache, and the publishing workflow are responsible for different parts of the final behavior.

Feed Troubleshooting: Symptoms, Check Order, and Safe Rollback

Instead of a general conclusion such as "the plugin does not work," it is more useful to describe a reproducible symptom. With JPS Ajax Post Layout, this usually means one of five cases: the element cannot be found in WPBakery, cards do not appear, the filter does not change the list, continuation repeats already visible items, or the layout breaks after new cards are added. Each case has its own short testing path. Start with the least risky steps: data, publication status, minimal configuration, a new browser session, then cache, and only afterward interaction with the theme or optimization.

The Element Is Missing from the WPBakery List

Symptom: the Add Element window does not contain JPS Ajax Post Layout, or searching by name returns nothing. Likely cause: the add-on is not activated, WPBakery is not active, another page editor is open, or a non-installable file from the package was uploaded. What to check: the installed plugins list, the presence of a working WPBakery installation, and the page where you are adding the element. Then create an empty test page and repeat the search there.

Fix: return to one clear action: confirm that both plugins are active, then reopen the WPBakery editor. If the contents of the original archive are unclear, do not remove working components or install files one after another. Review the included delivery instructions and confirm which ZIP is intended specifically for WordPress. When to roll back: if the issue appeared after changing the active plugin set, restore the last known working state on a test copy and activate components one at a time.

The Page Is Empty Even Though the Element Is Saved

Symptom: the feed container is visible or occupies space, but no cards appear. Likely cause: the selected type has no published items, the filter is too narrow, another term was selected, or test posts do not match the query rule. What to check: create one published control item with a known type and one testable term, temporarily remove the filter, and save the page. If a card appears after simplification, the issue is in the condition rather than the presentation.

Fix: restore the query gradually: first the post type, then one term, then additional limits. After every step, open the page in a separate window. When to roll back: if a custom taxonomy behaves unpredictably, return to the last version using a regular category and verify that the taxonomy is actually attached to the selected post type. Do not replace an empty block with a random manual selection if the original goal was automatic output.

The Filter Changes Its Highlight but Not the Cards

Symptom: a visitor clicks a topic, the active state changes, but the list remains the same or returns old output. Likely cause: content from the different terms actually overlaps, a saved cache is returning the old state, the script did not execute, or the filter rule is configured differently from what the editor expects. What to check: prepare two control posts, each assigned to only one of two terms. Switch the filter in a fresh browser window and look specifically for those items rather than for a general visual difference.

Fix: clear the available page cache using the normal procedure and repeat the test while logged out. If that does not change the outcome, temporarily simplify the element to one filter and disable only one questionable optimization mode on a site copy. When to roll back: if enabling a specific optimization stops the filter from responding, return to the saved working configuration and document the symptom before making a focused decision. Do not disable the entire caching mechanism without confirming the cause.

The Continuation Button Repeats Cards or Ends Too Early

Symptom: an already shown post appears after an action, or the control disappears even though more matching content exists. Likely cause: the query rule and order return an unstable sequence, the number of test items was counted incorrectly, or one load request fires twice. What to check: write down the titles in the first batch, click the button once, wait for completion, and compare the boundary between old and new output. Then count the published items for the active filter specifically.

Fix: start with a small number of items and one filter, and do not activate the control again before the first load completes. If repetition happens only after JavaScript optimization is enabled, investigate that combination separately. When to roll back: in this situation, it is better to temporarily replace infinite scrolling with a button because it provides a clearer action point and helps collect evidence about the issue.

Card Height, the Grid, or the Mobile View Breaks After an AJAX Action

Symptom: the first batch looks normal, but new cards overflow the container, images become uneven heights, or a narrow screen receives columns that are too cramped. Likely cause: new content differs in image or title length, the selected layout is too dense, the theme has competing style rules, or a special effect applies differently to dynamically added content. What to check: repeat the test with control posts that have no cover image, an extremely long title, and wide graphics. Then repeat it at a narrow width.

Fix: simplify the card presentation, reduce the number of columns, establish an editorial thumbnail requirement, or use a more resilient list option. When to roll back: if a specific entrance effect makes new cards unstable, return to the no-effect version and test the core behavior. Dynamic presentation is never more important than an accessible link and a readable title.

Troubleshooting sequence: first prove that matching published data exists, then test the minimal element, then test the action in a fresh window, then inspect cache and optimization, and only after that change the layout or theme. This progression does not alter site data and provides a clear rollback path.

Troubleshooting diagram for common filter and progressive-loading failures in JPS Ajax Post Layout
The troubleshooting visual connects specific feed symptoms with safe checks of the source, filter state, cache, and restored output without repeated cards.

Questions That Often Come Up When Configuring Dynamic Output

Do I Need WPBakery Page Builder if My Site Already Uses the WordPress Block Editor?

Yes. For this add-on, WPBakery is a key dependency stated in the product listing. The standard WordPress editor alone does not provide a reason to expect that the JPS Ajax Post Layout element will be available. If the page is built with blocks, first decide whether adding WPBakery is justified for this specific showcase. Do not mix the two approaches on a main page without testing, because the resulting markup will be harder to edit and maintain.

Can I Display More Than Regular Blog Posts?

The product description states support for custom post types and custom taxonomies. This means the feed can be applied to entities that a theme or another plugin has already registered. However, the add-on does not create those data types for you. Confirm that the required objects are published, have correct terms, and are available publicly on the site. For the first test, use one custom post type and one term rather than a complex combination of several sources.

Why Does the Filter Show the Same Cards After Configuration?

First rule out the simplest explanation: the test posts may belong to all selected terms at the same time. Create two control posts with non-overlapping categories or custom terms and repeat the switch in a fresh browser window. If the data definitely differs, check the page cache and only then investigate script isolation. A visible change in the active button does not prove that the query changed.

Which Is Better for Visitors: a Continuation Button or Infinite Scroll?

A button is better for a page with several different sections because it leaves visitors in control of content volume and provides a clear test point. Infinite scrolling suits a unified feed where users genuinely read through a sequence of materials. In both cases, correctness matters most: the next batch must be new, the control must not stall, and lower page blocks must remain accessible.

Is the Add-On Suitable for a Store or Complex Catalog?

It may help with a simple showcase of published content if the data is already represented by an appropriate post type and clear categories are needed. However, do not move tasks involving critical current inventory, pricing, checkout, personalized conditions, or complex faceted navigation into this add-on. In those cases, define the data, update, and access requirements first, then choose a specialized architecture. An attractive AJAX display does not replace catalog behavior.

Do I Need to Enable Every Card Entrance Effect?

No. An effect is useful only as a brief confirmation that a new part of the list has been added. If it slows reading, changes the perceived order, or looks unstable on a narrow screen, keep the neutral appearance. Test the source, filter, and progressive loading without effects first. That gives you a baseline state you can quickly return to.

Can I Safely Change the Feed Appearance with Code?

Yes, but only after the element settings and theme options have not solved a specific problem. Do not modify the add-on's own files. A developer can make a small CSS adjustment in a child theme or the standard Additional CSS field, tying it to a page container that actually exists. Check both wide and narrow screens, clear the cache according to the established procedure, and retain a way to remove the change. This article does not provide unverified code because open sources did not confirm stable public selectors and extension points for this specific add-on.

Before Updating or Moving the Setup to a Production Page

Updating WordPress, WPBakery, the theme, an optimizer, or the add-on itself can change page behavior even if the feed was previously stable. The public product listing indicates an older compatibility range, and no recent public changelog was found that clearly confirms newer environments. This is not a reason to reject the tool automatically, but it is a strong reason not to update components directly on the only working copy of a site without testing.

Before making a change, prepare a reproducible setup: a test page, control posts, a known filter and continuation configuration, and a record of the expected output. After the update, open the page while logged out and check the first batch, every filter, the button or scrolling behavior, card links, and the narrow-screen view. Then clear the available cache and repeat the test. If one stage breaks, return to the last working combination on the site copy and document exactly what changed. This test is much more reliable than judging the page from one screenshot in the dashboard.

Pre-Publication Checklist

  • The source is clear: the correct post type is selected, and a control item in it is published.
  • Terms are aligned: categories, tags, or custom taxonomies match the visible filters.
  • The first batch is readable: cards are not overloaded, links work, and images do not crop the meaningful subject.
  • Continuation is tested: the button or scrolling adds new content and ends correctly.
  • Cache is accounted for: the page was tested after standard cache clearing and in a separate browser window.
  • The narrow-screen view is not forgotten: filters, titles, columns, and the continuation action remain clear.
  • A rollback exists: the original page is saved or the element's minimal working state is known.

This checklist does not require a separate technical procedure, but it turns a one-time configuration into a maintainable process. If a new editor understands why one category belongs in the feed while another does not, they will not change parameters at random. If a developer sees a precisely recorded symptom after an update, it is easier to separate a theme conflict from a data or caching issue.

When CodeCanyon JPS Ajax Post Layout Is a Good Choice

CodeCanyon JPS Ajax Post Layout is worth using when a site already works with WPBakery and needs a controlled page feed built from regular posts or existing custom post types. Its strength is not the maximum number of styles but the combination of a clear source, understandable filter, appropriate card presentation, and a testable way to continue the feed. For an editorial section, portfolio, resource collection, or event page, it can be a clean way to show more content without turning the page into a static, lengthy list.

Do not expect it to solve tasks that require personalized rules, complex search, a business-critical ecommerce catalog, or unverified compatibility with a modern component stack. In those cases, define the data model and test the environment first. The safest path here follows the same underlying approach without becoming mechanical: build a minimal feed on a site copy, verify the data and public output, add filters and progressive loading one at a time, and then document the working state.

When the test page shows only the intended content, the filter changes the output without duplicates, continuation ends predictably, and the narrow-screen view remains readable, you can download CodeCanyon JPS Ajax Post Layout and repeat the verified workflow using your own data structure. Do not transfer settings blindly: first match your site's post types, terms, thumbnail dimensions, and cache rules.

By OceanTheme.org Editorial Team

 

You are not logged in to post comments.