Maulik Vora

Divyesh kakrecha

Dipika Balajiwala

<p>Advanced Ajax Posts Filter For Elementor is a comprehensive WordPress plugin that creates a custom Elementor widget with advanced AJAX taxonomy filtering capabilities. This plugin enhances the standard Elementor posts widget by adding dynamic filtering functionality without page reloads, providing users with a smooth and interactive browsing experience.</p>
<h3>Features</h3>
<h3>Core Functionality</h3>
<ul>
<li>
<p><strong>Advanced Query Controls</strong></p>
<ul>
<li>Support for all public post types (posts + Custom Post Types)</li>
<li>Include/Exclude posts by ID with precise control</li>
<li>Multiple sorting options: Date, Title, Menu Order, Random</li>
<li>Flexible order settings: ASC/DESC</li>
<li>Posts per page configuration</li>
<li>Offset control for custom post skipping</li>
<li>Ignore sticky posts option</li>
</ul>
</li>
<li>
<p><strong>Multiple Layout Options</strong></p>
<ul>
<li>Grid layout with responsive columns</li>
<li>Masonry layout for dynamic content</li>
<li>List layout for traditional blog style</li>
<li>Card layout with overlay effects</li>
<li>Responsive columns (desktop/tablet/mobile)</li>
<li>Adjustable column gap & row gap</li>
<li>Equal height option for consistent layouts</li>
</ul>
</li>
<li>
<p><strong>Advanced Pagination System</strong></p>
<ul>
<li>None (disable pagination)</li>
<li>Numbers pagination with customizable controls</li>
<li>Load More button with AJAX loading</li>
<li>Infinite Scroll for continuous browsing</li>
<li>Previous/Next navigation with icon support</li>
<li>Custom pagination text and styling</li>
</ul>
</li>
<li>
<p><strong>Rich Post Elements</strong></p>
<ul>
<li>Featured Image with size selection and lazy loading</li>
<li>Title with HTML tag selection (H1-H6)</li>
<li>Excerpt with length control</li>
<li>Comprehensive meta data: Author, Date, Categories, Comments</li>
<li>Customizable Read More button</li>
<li>Card overlays for date and categories</li>
</ul>
</li>
</ul>
<h3>AJAX Taxonomy Filter</h3>
<ul>
<li>
<p><strong>Powerful Taxonomy Controls</strong></p>
<ul>
<li>Support for any taxonomy (category, tag, custom taxonomy)</li>
<li>Include/exclude specific terms</li>
<li>Show “All” option for quick reset</li>
<li>Multi-select toggle for complex filtering</li>
<li>Full hierarchical support</li>
<li>AND/OR relation between terms</li>
</ul>
</li>
<li>
<p><strong>Flexible Filter UI Styles</strong></p>
<ul>
<li>Horizontal tabs for space-efficient layout</li>
<li>Vertical tabs for sidebar placement</li>
<li>Customizable filter appearance</li>
</ul>
</li>
<li>
<p><strong>Smart Behavior</strong></p>
<ul>
<li>Pure AJAX-based filtering (no page reload)</li>
<li>Seamless integration with all pagination types</li>
<li>Works with Load More and Infinite Scroll</li>
<li>Optional URL sync for shareable filtered views</li>
<li>Graceful fallback if JavaScript is disabled</li>
<li>Loading states and smooth animations</li>
</ul>
</li>
</ul>
<h3>Styling & Customization</h3>
<ul>
<li>
<p><strong>Complete Visual Control</strong></p>
<ul>
<li>Typography controls for all text elements</li>
<li>Color customization with Elementor global colors</li>
<li>Border and shadow effects</li>
<li>Spacing and padding controls</li>
<li>Responsive design settings</li>
<li>White text on colored backgrounds for perfect visibility</li>
</ul>
</li>
<li>
<p><strong>Elementor Integration</strong></p>
<ul>
<li>Native Elementor widget architecture</li>
<li>Live preview in Elementor editor</li>
<li>Global color system integration</li>
<li>Responsive controls for all devices</li>
<li>CSS optimization for performance</li>
</ul>
</li>
</ul>
<h3>Developer Hooks</h3>
<p>The plugin provides several action and filter hooks for extensibility:</p>
<ul>
<li><code>aapf_before_query</code> – Filter query arguments before execution</li>
<li><code>aapf_after_query</code> – Action after query execution</li>
<li><code>aapf_before_render</code> – Action before widget render</li>
<li><code>aapf_after_render</code> – Action after widget render</li>
</ul>
<h3>Example Usage</h3>
<p>[code]<br />
// Modify query arguments<br />
add_filter( ‘aapf_before_query’, function( $args, $settings ) {<br />
    // Add custom query modifications<br />
    if ( isset( $settings[‘custom_field’] ) ) {<br />
        $args[‘meta_key’] = $settings[‘custom_field’];<br />
    }<br />
    return $args;<br />
}, 10, 2 );</p>
<p>// Add custom action after render<br />
add_action( ‘aapf_after_render’, function( $settings ) {<br />
    // Your custom code after widget render<br />
    error_log( ‘Widget rendered with settings: ‘ . print_r( $settings, true ) );<br />
} );<br />
[/code]</p>
<h3>Security</h3>
<ul>
<li>All user inputs are properly sanitized using WordPress functions</li>
<li>All outputs are escaped to prevent XSS attacks</li>
<li>AJAX requests include nonce verification</li>
<li>Proper capability checks for all operations</li>
<li>No direct file access allowed</li>
<li>Follows WordPress security best practices</li>
</ul>
<h3>Performance</h3>
<ul>
<li>Lazy loading for featured images</li>
<li>Efficient WP_Query usage with proper caching</li>
<li>Minimal DOM manipulation with optimized JavaScript</li>
<li>Proper post data reset to prevent memory leaks</li>
<li>No duplicate queries or unnecessary database calls</li>
<li>Conditional asset loading for improved page speed</li>
</ul>
<h3>Browser Support</h3>
<ul>
<li>Modern browsers (Chrome, Firefox, Safari, Edge)</li>
<li>Graceful degradation for older browsers</li>
<li>Works without JavaScript (basic functionality)</li>
<li>Mobile-optimized touch interactions</li>
<li>Accessible keyboard navigation</li>
</ul>
<h3>Donate</h3>
<p><strong>Love this plugin?</strong> Help us continue development and add more amazing features!</p>
<p>Your support helps us:</p>
<ul>
<li>🚀 Add new features and layout options</li>
<li>🐛 Fix bugs and improve stability</li>
<li>📱 Enhance mobile experience</li>
<li>🎨 Create more customization options</li>
<li>📚 Write better documentation</li>
</ul>
<p>Buy Me A Coffee – ☕ <a href="https://www.buymeacoffee.com/zluck" rel="nofollow ugc">https://www.buymeacoffee.com/zluck</a>.</p>
<h3>License</h3>
<p>This plugin is licensed under the GPLv2 or later. For more information, see <a href="https://www.gnu.org/licenses/gpl-2.0.html" rel="nofollow ugc">https://www.gnu.org/licenses/gpl-2.0.html</a>.</p>
<h3>Credits</h3>
<p>Developed following WordPress Plugin Handbook best practices and Elementor widget architecture guidelines.</p>
<ul>
<li><strong>Elementor Integration</strong> – Built with Elementor 3.0+ compatibility</li>
<li><strong>WordPress Standards</strong> – Follows all WordPress coding standards</li>
<li><strong>Performance Focus</strong> – Optimized for speed and efficiency</li>
<li><strong>User Experience</strong> – Designed with accessibility and usability in mind</li>
</ul>


Advanced Ajax Posts Filter For Elementor

AJAX-powered Elementor posts widget with taxonomy filtering and pagination.

scribu

Lester Chan

<p>Want to replace the old <em>← Older posts | Newer posts →</em> links with some page links?</p>
<p>This plugin provides the <code>wp_pagenavi()</code> template tag which generates fancy pagination links.</p>
<h3>Usage</h3>
<p>In your theme, you need to find calls to next_posts_link() and previous_posts_link() and replace them.</p>
<p>In the Twentyten theme, it looks like this:</p>
<pre><code><div class="nav-previous"><?php next_posts_link( __( '<span class="meta-nav">&larr;</span> Older posts', 'twentyten' ) ); ?></div>
<div class="nav-next"><?php previous_posts_link( __( 'Newer posts <span class="meta-nav">&rarr;</span>', 'twentyten' ) ); ?></div>
</code></pre>
<p>You would replace those two lines with this:</p>
<pre><code><?php wp_pagenavi(); ?>
</code></pre>
<p>For multipart pages, you would look for code like this:</p>
<pre><code><?php wp_link_pages( ... ); ?>
</code></pre>
<p>and replace it with this:</p>
<pre><code><?php wp_pagenavi( array( 'type' => 'multipart' ) ); ?>
</code></pre>
<p>Go to <em>WP-Admin -> Settings -> PageNavi</em> for configuration.</p>
<h3>Changing the CSS</h3>
<p>If you need to configure the CSS style of WP-PageNavi, you can copy the <code>pagenavi-css.css</code> file from the plugin directory to your theme’s directory and make your modifications there. This way, you won’t lose your changes when you update the plugin.</p>
<p>Alternatively, you can uncheck the “Use pagenavi.css?” option from the settings page and add the styles to your theme’s style.css file directly.</p>
<h3>Changing Class Names</h3>
<p>There are <a href="https://codex.wordpress.org/Glossary#Filter" rel="nofollow ugc">filters</a> that can be used to change the default class names that are assigned to page navigation elements.</p>
<h4>Filters</h4>
<ul>
<li><code>wp_pagenavi_class_pages</code></li>
<li><code>wp_pagenavi_class_first</code></li>
<li><code>wp_pagenavi_class_previouspostslink</code></li>
<li><code>wp_pagenavi_class_extend</code></li>
<li><code>wp_pagenavi_class_smaller</code></li>
<li><code>wp_pagenavi_class_page</code></li>
<li><code>wp_pagenavi_class_current</code></li>
<li><code>wp_pagenavi_class_larger</code></li>
<li><code>wp_pagenavi_class_nextpostslink</code></li>
<li><code>wp_pagenavi_class_last</code></li>
</ul>
<h4>Filter Usage</h4>
<pre><code>// Simple Usage - 1 callback per filter
add_filter('wp_pagenavi_class_previouspostslink', 'theme_pagination_previouspostslink_class');
add_filter('wp_pagenavi_class_nextpostslink', 'theme_pagination_nextpostslink_class');
add_filter('wp_pagenavi_class_page', 'theme_pagination_page_class');

function theme_pagination_previouspostslink_class($class_name) {
  return 'pagination__control-link pagination__control-link--previous';
}

function theme_pagination_nextpostslink_class($class_name) {
  return 'pagination__control-link pagination__control-link--next';
}

function theme_pagination_page_class($class_name) {
  return 'pagination__current-page';
}


// More Concise Usage - 1 callback for all filters
add_filter('wp_pagenavi_class_previouspostslink', 'theme_pagination_class');
add_filter('wp_pagenavi_class_nextpostslink', 'theme_pagination_class');
add_filter('wp_pagenavi_class_page', 'theme_pagination_class');

function theme_pagination_class($class_name) {
  switch($class_name) {
    case 'previouspostslink':
      $class_name = 'pagination__control-link pagination__control-link--previous';
      break;
    case 'nextpostslink':
      $class_name = 'pagination__control-link pagination__control-link--next';
      break;
    case 'page':
      $class_name = 'pagination__current'
      break;
  }
  return $class_name;
}
</code></pre>
<h3>Development</h3>
<ul>
<li><a href="https://github.com/lesterchan/wp-pagenavi" title="https://github.com/lesterchan/wp-pagenavi" rel="nofollow ugc">https://github.com/lesterchan/wp-pagenavi</a></li>
</ul>
<h3>Credits</h3>
<ul>
<li>Plugin icon by <a href="http://www.simpleicon.com" rel="nofollow ugc">SimpleIcon</a> from <a href="http://www.flaticon.com" rel="nofollow ugc">Flaticon</a></li>
</ul>
<h3>Donations</h3>
<p>I spent most of my free time creating, updating, maintaining and supporting these plugins, if you really love my plugins and could spare me a couple of bucks, I will really appreciate it. If not feel free to use it without any obligations.</p>


WP-PageNavi

Adds a more advanced paging navigation interface.

Advanced Ajax Posts Filter For Elementor vs WP-PageNavi