Posts Module for Beaver Builder allows you to display any post type content from your WordPress site. Per module you select one post type content. In this tutorial I shall show how you will display the multiple post types content on single Posts Module. For example, I created a custom post type “event”. On my home page I shall display the content of two post types: post & event.
I drag&drop the BB Post-Grid module on my home page. When I am selecting the post type into the module settings form, I can’t select two post types from Post Type drop down box under Content Tab -> Custom Query section.
So I check the fl-builder-loop.php file and get a filter fl_builder_loop_query for custom query source. Later I add this small PHP codes into the functions.php of my theme.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<?php //* do not add this line in your php file add_filter( 'fl_builder_loop_query', 'paulc_post_module_loop', 10, 2); function paulc_post_module_loop( $query, $settings ) { if( ! is_home() ) return $query; $query_args = $query->query_vars; $query_args['post_type'] = array( 'post', 'event' ); $query = new WP_Query( $query_args ); return $query; } |
Line no 6-7: Doing nothing if it is not home page. is_home() conditional tag is checking it. There have more conditional tags like is_front_page(), is_category(), is_archive() etc.
Line no 9: Getting the defaults query args
Line no 11: Editing the post_type value. Passing the two post types as array variable
Line no 13: Creating the new query object
Line no 15: Returning this new query object
I think you’re better off using fl_builder_loop_query_args_filter as it is run before the module queries the content. This means you can alter the content and things like facet filters will be able to still filter it.
Here are BB’s help doc examples:
https://docs.wpbeaverbuilder.com/beaver-builder/developer/tutorials-guides/create-a-filter-to-customize-the-display-of-post-data/
Also @DAIRRELL asked how to display the post type. Here is a shortcode I wrote you can use:
add_shortcode( ‘post_type_name’, ‘resource_type_output’ );
function resource_type_output() {
$post_type = get_post_type_object( get_post_type() )->labels;
return $post_type->name;
}
And then use: [post_type_name]
This works!!
I can’t seem to get this to work. I am using Power Pack’s Content Grid module to display my posts on my blog archive page, but I want to pull both Posts and CPT: Highlights.
Hi Paul, thanks for the info.
I need something similar. I’m working on a Singular template for a custom post type and want to show at the bottom related post, basically, other posts with the same tag or category of the post showed in the main template. Is it posible with a similar solution like this one?
Thanks!
Yes. You will use the same filter but your case you would use the meta_query.
Or you can create a shortcode (w/o free plugin) and put it into HTML module. It would also work.
Is there a way to do this with things that aren’t post types? Like could you use this to do taxonomy listings instead of post listings. I’m desperately looking for a solution to display a grid of taxonomies using BB stuff.
BB Post Grid module will not work for this scenario. You need separate custom module or shortcode. I built one and shared with Nathan Simpson. Right now I am not getting that module on my laptop. Can you contact Nathan Simpson? He can provide it for you.
Here I am releasing one for you https://www.paulchinmoy.com/pro/beaver-builder-categories-grid-module/ 🙂
Paul,
I have two queries on the page. Two different BB modules. I just want one of them to be affected by your code and the other to be untouched (since it’s returning a custom query).
How could I isolate this?
Thanks in advance.
Actually Beaver Builder have not unique ID option for module. But you can separate them if you are using the same module at multiple times on same page.
Go to Advanced Tab of one of the module. Enter a unique class name (which is not using on the page or any other modules) into CSS class field. For an example, you add the CSS class name “my-first-post-module”. So you will add the PHP if statement into the code like
if( $settings->class == 'my-first-post-module' ). This way you can separate the module.Also look the @HANNU JAATINEN comment at top. He already talked about it.
Is there a way to show the custom post type name under the post title in a BB field connection? Kind of like, “Found in {custom post type)”. I didn’t see an obvious way to do that with the default field connectors.
You can try this simple code
Note: I did not test the code. At first you will keep a backup of your current theme.
Thanks Paul. That did work. I’ll figure out to link it the post type and style.
I appreciate your reply.
Dairrell
I discovered that the is_front_page conditional tag worked for me with your original code above. All four of the custom post types are displaying nicely.
Thanks for your time in answering and for putting this article together.
Thanks Paul. I’m not a coder, so I don’t know where to replace that in the original code above. Could you provide the whole snippet? Sorry to be such a newb. 🙂
I’ve been looking for a solution like this, as I want to display 4 different post types within the posts module. I’m using BB Themer for custom archive and single pages, so that works nicely. But I was not able to get your code to work on my site. I have the home page set as my “front” page of my site, so is_home should work.
Could you provide a screenshot of what the BB posts module looks like after you add the function code? Or does that change the module display at all?
Thanks!
You will use the is_post_type_archive conditional tag for archive pages. If you are using the 4 post types then you can try this code
if( is_post_type_archive( array( 'post_type_1', 'post_type_2', 'post_type_3', 'post_type_4' ) )I just used Peter Luit’s code to hide past events of CPT’s and that had an option to apply filtering/rules only if a certain ID is given to the module, in this case the Posts module so if you add this
(‘show-posts-and-events” == $query_args[‘settings’]->id)
then you can use the CSS ID on the Advanced tab to determine when you want to pull posts from both post types on any page you like.
Here’s Peter’s post: https://www.nieuwsmarkt.nl/blog/2019/02/24/making-your-own-conditional-events-calendar/
You are correct Hannu. I always did this. BB module have not any unique ID or any other things. So you will use the unique ID or CLASS name under Advanced tab and target the unique BB post module. So your custom code will not create any issue on other Post modules on other pages(if you have).
Could you use that same snippet to change it from showing posts to a taxonomy? Like where it says:
$query_args[‘post_type’] = array( ‘post’, ‘event’ );
Could you change post_type to taxonomy and change the array to the taxonomy name?
I think you will simply apply the Taxonomy Query.