The Quick Ajax Post Loader plugin allows dynamic post loading using shortcodes. Shortcodes provide a flexible way to display posts with AJAX-based filtering, sorting, and pagination.
\nIn this section, you will learn how to:
\nEach subsection provides detailed information on how to fine-tune these settings.
\nTo add a new shortcode:
\nAfter saving the settings, copy the generated shortcode, e.g.:
\n[qapl-quick-ajax id="125" title="My Post List"]\nPaste it anywhere on a page or post to display dynamically loaded posts.
\nThis section allows you to configure how posts are sorted when loaded via AJAX.
\nThis section allows you to configure extra AJAX query parameters:
\nCustomize how posts are displayed:
\nTo insert the shortcode into a post or page:
\nAfter adding the shortcode, verify its behavior:
\nIf you encounter issues, return to Quick Ajax > Shortcodes settings and adjust the configuration.
\nYou can create custom post templates to adjust the layout and structure of dynamically loaded posts.
\nTo add a custom template, place a PHP file in your theme directory (preferably in a child theme) at the following path:
\nwp-content/themes/your-theme/quick-ajax-post-loader/templates/post-items/\nCreate a new PHP file with a name starting with "post-item", e.g.:
\npost-item-custom-name.php
\nAdd a header with the template name:
\n \nDefine the HTML structure and PHP logic for rendering a single post.
\nExample template code:
\n<?php\n/* Post Item Name: My Custom Template */\n?>\n<div class="qapl-post-item">\n <a href="<?php echo get_permalink(); ?>">\n <h2><?php the_title(); ?></h2>\n <p><?php the_excerpt(); ?></p>\n </a>\n</div>\nThe plugin allows you to override default post templates without modifying the plugin files.
\nThe default post templates are located in the plugin folder. To override them, copy the relevant file to your theme's template directory and make modifications:
\nwp-content/themes/your-theme/quick-ajax-post-loader/templates/post-items/\nWordPress follows this template loading priority:
\nBy default, if no posts match the AJAX query, the plugin displays a "No Posts Found" message. You can customize this message by creating a custom template file.
\nPlace a file named no-posts.php in the following directory:
\nwp-content/themes/your-theme/quick-ajax-post-loader/templates/post-items/\n<div class="qapl-no-posts-found">\n <p>Sorry, no posts found to display.</p>\n</div>\nWhen all posts have been loaded via AJAX and there are no more available to show, the plugin can display a customizable end message.
\nPlace a file named end-posts.php in the following directory:
\nwp-content/themes/your-theme/quick-ajax-post-loader/templates/post-items/\n<div class="qapl-end-message">\n <p>No more posts to load.</p>\n</div>\nTaxonomy filter buttons allow users to select categories, tags, or other taxonomies.
\nPlace the filter button template file in the following directory:
\nwp-content/themes/your-theme/quick-ajax-post-loader/templates/taxonomy-filter/\nCreate or edit the taxonomy-filter-button.php file.
\n<button type="button" class="qapl-filter-button custom-class" data-button="quick-ajax-filter-button">\n QUICK_AJAX_LABEL\n</button>\nQUICK_AJAX_LABEL) and data-button attribute are required for filtering to work correctly.The "Load More" button allows users to dynamically load additional posts via AJAX without refreshing the page.
The plugin provides a default button template, but you can override it with your custom design.
The default "Load More" button template is located in the plugin directory:
\nquick-ajax-post-loader/templates/loader-more-button.php\nTo override it, copy it to your theme folder:
\nwp-content/themes/your-theme/quick-ajax-post-loader/templates/\n <button type="button" class="qapl-load-more-button custom-class" data-button="quick-ajax-load-more-button">\n Load More\n </button>\nThe Quick Ajax Post Loader plugin allows you to customize loading icons by creating your own templates. You can use HTML, CSS animations, or GIFs, and then select the icon in the plugin configuration.
\nNavigate to the directory:
\nwp-content/themes/your-active-theme/quick-ajax-post-loader/templates/loader-icon/
\nCreate a file with a descriptive name, e.g., loader-icon-custom-loader.php.
\nAdd your custom HTML, CSS, or JavaScript code for the loading icon.
\n<?php\n/* Loader Icon Name: Custom Loader */\n?>\n<div class="qapl-loader-custom">\n <!-- Add your custom HTML, CSS, or animations -->\n <img src="images/loader_image.gif" alt="Loading..." />\n <!-- Example CSS animation -->\n <div class="loader-dot"></div>\n <div class="loader-dot"></div>\n <div class="loader-dot"></div>\n</div>\nDirectory Placement: Place the custom loading icon file in the child theme or theme directory:
\nwp-content/themes/your-active-theme/quick-ajax-post-loader/templates/loader-icon/
\nTemplate Detection: The plugin automatically detects all files in this directory as available loading icons.
\nLoading Order:
\nThis ensures that custom loading icons in the child theme take priority and are not overwritten during theme or plugin updates.
" }, "3_best_practices": { "title": "Filter container hooks allow you to insert custom elements within the filter section of the plugin interface. These hooks provide flexibility to enhance filtering options or add additional UI components.
\nBelow is a list of available hooks and their usage.
\nTriggered just before rendering the filter container.
\nParameters:
\n$quick_ajax_id (string) - the unique identifier of the plugin instance.Example:
\nfunction my_filter_container_before( $quick_ajax_id ) {\n if ( $quick_ajax_id === 'p963' ) {\n echo '<div class="custom-filter-header">My Custom Filter Section</div>';\n }\n}\nadd_action( 'qapl_filter_container_before', 'my_filter_container_before', 10, 1 );\nTriggered at the beginning of the filter container rendering.
\nExample:
\nfunction my_filter_container_start( $quick_ajax_id ) {\n echo '<div class="custom-filter-start">Start of the filter container</div>';\n}\nadd_action( 'qapl_filter_container_start', 'my_filter_container_start', 10, 1 );\nTriggered just before finishing the rendering of the filter container.
\nExample:
\nfunction my_filter_container_end( $quick_ajax_id ) {\n echo '<div class="custom-filter-end">End of the filter container</div>';\n}\nadd_action( 'qapl_filter_container_end', 'my_filter_container_end', 10, 1 );\nTriggered immediately after rendering the filter container.
\nExample:
\nfunction my_filter_container_after( $quick_ajax_id ) {\n echo '<div class="custom-filter-after">After the filter container</div>';\n}\nadd_action( 'qapl_filter_container_after', 'my_filter_container_after', 10, 1 );\nPost container hooks allow you to modify the area where dynamically loaded posts are displayed. These hooks can be used to add custom elements before or after the post list, style the container, or display additional information.
\nHere are the available post container hooks.
\nTriggered before rendering the post container.
\nExample:
\nfunction my_posts_container_before( $quick_ajax_id ) {\n echo '<div class="custom-posts-before">Before the post container</div>';\n}\nadd_action( 'qapl_posts_container_before', 'my_posts_container_before', 10, 1 );\nTriggered at the beginning of the post container rendering.
\nExample:
\nfunction my_posts_container_start( $quick_ajax_id ) {\n echo '<div class="custom-posts-start">Start of the post container</div>';\n}\nadd_action( 'qapl_posts_container_start', 'my_posts_container_start', 10, 1 );\nTriggered just before finishing the rendering of the post container.
\nExample:
\nfunction my_posts_container_end( $quick_ajax_id ) {\n echo '<div class="custom-posts-end">End of the post container</div>';\n}\nadd_action( 'qapl_posts_container_end', 'my_posts_container_end', 10, 1 );\nTriggered immediately after rendering the post container.
\nExample:
\nfunction my_posts_container_after( $quick_ajax_id ) {\n echo '<div class="custom-posts-after">After the post container</div>';\n}\nadd_action( 'qapl_posts_container_after', 'my_posts_container_after', 10, 1 );\nLoad More button hooks allow you to modify the behavior and appearance of the "Load More" button and its surrounding elements. These hooks give you control over what happens before and after the loading process, enabling you to add custom animations, messages, or additional elements.
\nHere are the available hooks for customizing the loading experience:
\nTriggered before rendering the loading element (e.g., "Load More" button or loading animation).
\nExample:
\nfunction my_loader_before( $quick_ajax_id ) {\n echo '<div class="custom-loader-before">Loading starts...</div>';\n}\nadd_action( 'qapl_loader_before', 'my_loader_before', 10, 1 );\nTriggered after rendering the loading element.
\nExample:
\nfunction my_loader_after( $quick_ajax_id ) {\n echo '<div class="custom-loader-after">Loading finished</div>';\n}\nadd_action( 'qapl_loader_after', 'my_loader_after', 10, 1 );\nQuery modification hooks allow you to customize the post retrieval process by altering WP_Query arguments before the AJAX request is executed. This enables fine-grained control over which posts are displayed.
\nThis filter allows you to modify WP_Query arguments to fully control the data retrieved by AJAX requests.
\nParameters:
\n$args (array) - original query arguments.$quick_ajax_id (string) - unique instance identifier.Example:
\nfunction modify_query_args( $args, $quick_ajax_id ) {\n if ($quick_ajax_id === 'p963') {\n $args['posts_per_page'] = 5; // change posts per page to 5\n }\n return $args;\n}\nadd_filter( 'qapl_modify_posts_query_args', 'modify_query_args', 10, 2 );\nThis example shows how to change the number of posts per page to 5, using a specific AJAX identifier.
" }, "4_modify_sorting_options": { "title": "Sorting filters allow you to customize or extend the available sorting methods used by the AJAX query. This can be useful for adding new sorting options based on custom fields, modified dates, or taxonomies.
\nThis filter allows modifying or extending the available sorting methods.
\nParameters:
\n$sorting_options (array) - array containing sorting options.$quick_ajax_id (string) - unique instance identifier.Example:
\nfunction modify_sorting_options_variants( $sorting_options, $quick_ajax_id ) {\nif ($quick_ajax_id === 'p963') {\n $sorting_options[] = [\n 'orderby' => 'modified',\n 'order' => 'DESC',\n 'label' => 'Modify date',\n ];\n}\nreturn $sorting_options;\n}\nadd_filter( 'qapl_modify_sorting_options_variants', 'modify_sorting_options_variants', 10, 2 );
\nThis example adds a sorting option based on the last modified date for the AJAX instance with quick_ajax_id = 'p369'.
" }, "4_modify_taxonomy_filters": { "title": "Taxonomy filter hooks let you modify the taxonomy filter buttons, changing their appearance, labels, or even adding custom logic.
\nThis filter allows modifying the properties of taxonomy filter buttons.
\nParameters:
\n$buttons (array) - array containing button data.$quick_ajax_id (string) - unique instance identifier.Example:
\nfunction modify_filter_buttons( $buttons, $quick_ajax_id ) {\n foreach ($buttons as &$button) {\n if ($quick_ajax_id === 'p963') {\n if ($button['term_id'] === 'none') {\n $button['button_label'] = 'View All';\n } else {\n $button['button_label'] = strtoupper($button['button_label']);\n }\n }\n }\n return $buttons;\n}\nadd_filter( 'qapl_modify_taxonomy_filter_buttons', 'modify_filter_buttons', 10, 2 );\nThis example changes the "Show All" button label to "View All" and converts the labels of other filter buttons to uppercase.
" }, "4_modify_post_content": { "title": "These filters allow customizing different parts of the post content.
\nModify the title HTML output.
\nParameters:
\n$output (string) - the original HTML of the post title.$template (string) - the template file name.$quick_ajax_id (string) - unique instance identifier.Example:
\nfunction customize_post_title( $output, $template, $quick_ajax_id ) {\n if ( $template === 'post-item' ) {\n $output = '<div class="qapl-post-title"><h2 class="custom-title">' . esc_html(get_the_title()) . '</h2></div>';\n }\n return $output;\n}\nadd_filter( 'qapl_template_post_item_title', 'customize_post_title', 10, 3 );\nThis example wraps the title in an H2 tag and adds a permalink.
\nModify the excerpt HTML output.
\nParameters:
\n$output (string) - the original HTML of the post excerpt.$template (string) - the template file name.$quick_ajax_id (string) - unique instance identifier.Example:
\nfunction customize_post_excerpt( $output, $template, $quick_ajax_id ) {\n if ( $template === 'post-item' ) {\n $output = '<div class="qapl-post-description"><p class="custom-excerpt">' . wp_trim_words(get_the_excerpt(), 15) . '</p></div>';\n }\n return $output;\n}\nadd_filter( 'qapl_template_post_item_excerpt', 'customize_post_excerpt', 10, 3 );\nThis example limits the excerpt to 15 words and wraps it in a <p> tag.
Modify the featured image (thumbnail).
\nParameters:
\n$output (string) - the original HTML of the post thumbnail.$template (string) - the template file name (e.g., 'post-item.php').$quick_ajax_id (string) - unique instance identifier.Example:
\nfunction customize_post_image( $output, $template, $quick_ajax_id ) {\n if ( $template === 'post-item' ) {\n $output = '<div class="qapl-post-image"><img src="' . esc_url(get_the_post_thumbnail_url(null, "large")) . '" alt="' . esc_attr(get_the_title()) . '"></div>';\n }\n return $output;\n}\nadd_filter( 'qapl_template_post_item_image', 'customize_post_image', 10, 3 );\nThis example forces large images instead of using the default thumbnail size.
\nModify how the post date is displayed.
\nParameters:
\n$output (string) - the original HTML of the post date.$template (string) - the template file name (e.g., 'post-item.php').$quick_ajax_id (string) - unique instance identifier.Example:
\nfunction customize_post_date( $output, $template, $quick_ajax_id ) {\n if ( $template === 'post-item' ) {\n $new_date = get_the_date( 'd-m-Y' );\n $output = '<div class="qapl-post-date"><div class="custom-date">Date: ' . esc_html( $new_date ) . '</div></div>';\n }\n return $output;\n}\nadd_filter( 'qapl_template_post_item_date', 'customize_post_date', 10, 3 );\nThis example changes the date format and wraps it in a <div class="custom-date"></div> container.
Modify the "Read More" label inside post content.
\nParameters:
\n$output (string) - the original HTML of the "Read More" Label.$template (string) - the template file name.$quick_ajax_id (string) - unique instance identifier.Example:
\nfunction customize_read_more( $output, $template, $quick_ajax_id ) {\n if ( $template === 'post-item' ) {\n $output = '<div class="qapl-read-more custom-read_more"><p>Read Full Article</p></div>';\n }\n return $output;\n}\nadd_filter( 'qapl_template_post_item_read_more', 'customize_read_more', 10, 3 );\nThis example changes the text of the "Read More" button to "Read Full Article".
" }, "4_modify_no_post_message": { "title": "Customize the "No Posts Found" message displayed when there are no posts to show initially (e.g., after filtering).
\nModify the HTML output for the message shown when no posts match the filter or query.
\nParameters:
\n$output (string) - the default message HTML output.$quick_ajax_id (string) - unique instance identifier.Example:
\nfunction customize_no_post_message( $output, $quick_ajax_id ) {\n if ( $quick_ajax_id === 'p963' ) {\n $output = '<div class="custom-no-posts-found"><p>Nothing to display</p></div>';\n }\n return $output;\n}\nadd_filter( 'qapl_template_no_post_message', 'customize_no_post_message', 10, 2 );\nThis example replaces the default "No Posts Found" message with a custom message for a specific instance.
" }, "4_modify_end_post_message": { "title": "Customize the "End of Posts" message displayed when all posts have been loaded and there are no more items to show.
\nModify the HTML output for the final message shown when no more posts are available to load.
\nParameters:
\n$output (string) - the default message HTML output.$quick_ajax_id (string) - unique instance identifier.Example:
\nfunction customize_end_post_message( $output, $quick_ajax_id ) {\n $output = '<div class="custom-end-message"><p>That\\'s all we have for now!</p></div>';\n return $output;\n}\nadd_filter( 'qapl_template_end_post_message', 'customize_end_post_message', 10, 2 );\nThis example replaces the default "End of Posts" message with a custom-styled HTML block.
" }, "4_modify_loadmore_button": { "title": "Customize the "Load More" button styling and behavior.
\nModify the "Load More" button HTML output.
\nParameters:
\n$output (string) - the original HTML of the button.$quick_ajax_id (string) - unique instance identifier.Example:
\nfunction customize_load_more_button( $output, $quick_ajax_id ) {\n $output = '<button type="button" class="custom-load-more qapl-load-more-button qapl-button" data-button="quick-ajax-load-more-button">Show More Posts</button>';\n return $output;\n}\nadd_filter( 'qapl_template_load_more_button', 'customize_load_more_button', 10, 2 );\nThis example replaces the default "Load More" button with a custom-styled version.
" }, "4_finding_debugging_quick_ajax_id": { "title": "Each quick_ajax_id is unique to an instance of the Quick Ajax Post Loader shortcode. It is needed when using hooks and filters to apply changes to a specific shortcode instance.
\nTo manually find the quick_ajax_id, follow these steps:
\ndiv element with an id that starts with "quick-ajax-".Example HTML Structure:
\n<div id="quick-ajax-p963" class="quick-ajax-posts-container"></div>\nIn this case, the quick_ajax_id is "p963".
\nOnce you have the correct quick_ajax_id, you can use it in hooks and filters to modify only the selected instance of the plugin.
\nIf you need to programmatically find and verify the quick_ajax_id, use one of the methods below.
\nUse this method if you want to debug quick_ajax_id directly in your browser.
\nExample:
\nfunction debug_quick_ajax_id( $args, $quick_ajax_id ) {\n if (is_user_logged_in()) { // Ensure this is visible only to logged-in users\n echo '<script>console.log("Quick Ajax ID: ' . esc_js($quick_ajax_id) . '")</script>';\n }\n return $args;\n}\nadd_filter( 'qapl_modify_posts_query_args', 'debug_quick_ajax_id', 10, 2 );\nHow to use it?
\nF12 > Console).If you prefer debugging on the server side, log the quick_ajax_id into the PHP error log.
\nExample: Log quick_ajax_id to wp-content/debug.log
\nfunction log_quick_ajax_id( $args, $quick_ajax_id ) {\n error_log('Quick Ajax ID: ' . $quick_ajax_id);\n return $args;\n}\nadd_filter( 'qapl_modify_posts_query_args', 'log_quick_ajax_id', 10, 2 );\nWhere to check logs?
\nWP_DEBUG_LOG in wp-config.phpWarning: Do not log sensitive data in production.
" }, "4_best_practices_hooks": { "title": "To ensure safe and effective modifications to the Quick Ajax Post Loader, follow these best practices:
\n$quick_ajax_id, instead of applying global changes.error_log(print_r($args, true)); to inspect filter output.By following these practices, you can ensure that your custom modifications are reliable, efficient, and easy to maintain.
" }, "5_ajax_function_generator": { "title": "The AJAX Function Generator is a tool available in the WordPress admin panel under Quick Ajax > Settings & Features, in the "Function Generator" tab.\nIt allows you to generate PHP code that can be placed directly in theme files such as page.php, single.php, or other page templates.
\nThe generated code works similarly to shortcodes but provides greater flexibility since it can be embedded in PHP files.
\nThe following code enables dynamically displaying posts via AJAX without the need to refresh the page.
\n<?php\n// Define AJAX query parameters for 'post' type posts.\n$quick_ajax_args = [\n 'post_type' => 'post',\n 'posts_per_page' => 6,\n 'orderby' => 'date',\n 'order' => 'DESC',\n 'post__not_in' => [3, 66, 999],\n 'ignore_sticky_posts' => 1,\n 'selected_taxonomy' => 'category',\n 'selected_terms' => [3, 6, 9]\n];\n\n// Define attributes for AJAX.\n$quick_ajax_attributes = [\n 'quick_ajax_id' => 15298,\n 'quick_ajax_css_style' => 1,\n 'grid_num_columns' => 3,\n 'post_item_template' => 'post-item',\n 'taxonomy_filter_class' => 'class-taxonomy, filter-class',\n 'container_class' => 'container-class, my-style',\n 'load_more_posts' => 4,\n 'loader_icon' => 'loader-icon',\n 'ajax_initial_load' => 1,\n 'infinite_scroll' => 1\n];\n\n// Set the sort options for the button.\n$quick_ajax_sort_options = ['date-desc', 'date-asc', 'comment_count-desc', 'title-asc', 'title-desc', 'rand'];\n\n// Render the sorting control button.\nif(function_exists('qapl_render_sort_controls')):\n qapl_render_sort_controls(\n $quick_ajax_args,\n $quick_ajax_attributes,\n $quick_ajax_sort_options\n );\nendif;\n\n// Render the navigation for selected taxonomy.\nif(function_exists('qapl_render_taxonomy_filter')):\n qapl_render_taxonomy_filter(\n $quick_ajax_args,\n $quick_ajax_attributes\n );\nendif;\n\n// Render the grid for 'post' type posts.\nif(function_exists('qapl_render_post_container')):\nqapl_render_post_container(\n $quick_ajax_args,\n $quick_ajax_attributes\n);\nendif;\n?>\nFunction responsible for rendering the grid of dynamically loaded posts.
\nParameters:
\nFunction that generates filter buttons for a selected taxonomy.
\nParameters:
\nThis function generates sorting buttons, allowing users to dynamically change the order of displayed posts without refreshing the page. Users can select different sorting criteria, such as by date, comment count, or title.
\nParameters:
\n$quick_ajax_args is an array of arguments passed to WP_Query, which determines which posts are retrieved via AJAX.
\n'post', 'page', or custom post types.'date', 'title'.'ASC', 'DESC'.'category', 'product_color').\nEnables rendering of a taxonomy-based filter UI with toggle buttons for terms.$quick_ajax_args = [\n 'post_type' => 'post',\n 'posts_per_page' => 6,\n 'orderby' => 'date',\n 'order' => 'DESC',\n 'post__not_in' => [3, 66, 100],\n 'ignore_sticky_posts' => true,\n 'selected_taxonomy' => 'category',\n 'selected_terms' => [3, 6, 9]\n];\nThis setup fetches the 6 most recent posts, ignores sticky posts, and excludes posts with IDs 3, 66, and 100.
" }, "6_configuring_ajax_appearance": { "title": "$quick_ajax_attributes defines how dynamically loaded posts are displayed and how users interact with them.
\n'post-item-custom-name' (use the file name without the .php extension).$quick_ajax_attributes = [\n 'quick_ajax_id' => 12056,\n 'quick_ajax_css_style' => 1,\n 'grid_num_columns' => 3,\n 'post_item_template' => 'post-item-custom-name',\n 'taxonomy_filter_class' => 'filter-class',\n 'container_class' => 'custom-post-container',\n 'load_more_posts' => 3,\n 'loader_icon' => 'loader-icon',\n 'infinite_scroll' => 1,\n 'ajax_initial_load' => 1\n);\nThis setup creates a 3-column post grid, uses a custom template post-item-custom-name, and loads 4 posts when clicking "Load More".