Do you want to show posts from multiple post types on a page in Elementor? There may be situations where you need to display listings from multiple sources in a single view.
With the Dynamic Listing widget from The Plus Addons for Elementor, you can show posts from different post types together on a page using a custom query.
To check the complete feature overview documentation of The Plus Addons for Elementor Dynamic Listing widget, click here.
Best Used For:
- Agency or portfolio sites that mix blog posts, case studies, and product pages in a single listing
- News and media sites pulling content from multiple content types into one unified feed
- WooCommerce stores that want to combine product listings with blog posts or tutorials on the same page
Requirement – This widget is a part of The Plus Addons for Elementor, make sure its installed & activated to enjoy all its powers.
Note: The Custom Query option is only for advanced users, comfortable with writing custom PHP code.
For instance, to show posts from post, page, and products together, follow the steps below.
1. First, write your custom query.
Add the query to the functions.php file. Make sure to use a child theme and add a functions.php file there before writing your code. This preserves your code when the theme updates.
If you are using the Nexter theme, you can add custom code there directly, or use the Code Snippets plugin.
Use the following code to show posts from post, page, and product.
function extra_function_name($query_args) {
$extra_query = array(
'post_type' => array('page', 'product', 'post'),
'post_status' => 'publish',
'posts_per_page' => 12,
);
$query_args = array_merge($query_args, $extra_query); return $query_args;
}
add_filter('your_fuction_id', 'extra_function_name');Here the custom query ID is your_fuction_id.
Note: In the ‘post_type’ => array you can even add your custom post type name to show results from the custom post type as well.
2. Add the Dynamic Listing widget to the page.
3. Select Search List from the Post Listing Types dropdown.
4. The Post Type field will be irrelevant here, as the custom query sets the source.
5. Select the style and layout from the Style and Layout sections.
6. In the Custom Query section, click the pencil icon and add your query ID in the Custom Query ID field.
The listing will now contain posts, pages, and products as defined in the custom query.
To add pagination to your multi-post-type listing, see How to Add Pagination in Custom Post Types in Elementor.
To display a single custom post type in its own archive layout, see How to Create Elementor Custom Post Type Archive Page.
Also, read How to Create Elementor Loop with Custom Post Query.
