FAQ – Divi Filterable Blog Module
“Divi – Filterable Blog Module” – The most advanced Blog Module for the Divi Theme
“Divi – Filterable Blog Module” is one of the ideal ways for users to filter through contributions, projects, products, and any custom post-type in a much more advanced way than users can typically use the Divi Blog module.What can the "Divi - Filterable Blog Module" do for you?
Rather than just hiding items, the “Divi – Filterable Blog Module” creates a new paginated content feed. Include or exclude posts by categories and tags for your Divi Blog, build your search-, category-, tag- and author pages with this new module and style your WooCommerce Shop page as you like it. It is also fully compatible with all standard WooCommerce filters and search widgets.Disable the Gutenberg Editor to setup DFBM !!
Please note that DFBM can so far only be set under the old PageBuilder. We are trying hard to adapt DFBM to the new PageBuilder, an ETA can not be given at the moment. To activate the old PageBuilder go to Divi Options –> Builder –> Advanced
Then disable the latest Divi Builder Experience.
When you are done with your settings in DFBM, you can enable the option again. Just don’t make any more changes to DFBM in the new builder.
In principle it also makes sense to enable the classic editor for the same tab, this disables the Gutenberg editor in the backend.
Can I use it with my own registered custom post types?
Sure, just note the following prerequisite: 1. Make sure that categories and tags are configured for all your custom post types. You don’t have to use them, but you have to assign them. 2. Furthermore, it is also helpful if your category-slugs contain “cat,” and your tag-slugs contain “tag.” These need only be included in their slugs, not in their names. As an example: you can use something like “Event Types” as a name for the category of “Events”, but the slug must be “event-types-cat”, or “event-cat” or whatever. It does not matter where “cat” appears. It just has to be included. The same applies to “tag” for the tags. If you don’t want to use “cat” and “tag” or can’t use them because you are using a plugin that is configured differently, you can set the category or tag slugs in the “functions.php” of your themes with the following action-filters:
Action filter to register your own category and tag slugs:
$cpt= 'event'; // Custom Post Type Slug // Set the CPT Category Slug add_filter( "dfbm_{$cpt}_cat", function() { return 'event-overview'; // Add whatever you want }); // Set the CPT Tag Slug add_filter( "dfbm_{$cpt}_tag", function() { return 'event-fine-tuning'; // Add whatever you want });Note that the categories must be created hierarchically, while the tags must be created without hierarchies. DFBM uses the “pre_get_posts” hook, and at this point in the execution, it is unfortunately not possible to access functions that return the slugs for categories and tags. Please note that CPT’s without created category and/or tag taxonomy cannot be considered and are ignored. The following plugins are very helpful for the creation of CPT’s and work very well with DFBM: Toolset Types and Custom Post Type Maker. But of course, you can also use any other extension or register your CPT’s on your own.
Can I customize the message "no more posts for this category"?
Yes, you can easily create a layout in the Divi Layout Library section. However, use only a single section, row or module in the layout and give it the class:Layout class:
no-posts
Then copy the ID of this layout and paste the following snippet into the “functions.php” of your theme. Replace the 7 with the ID of your layout:
Embedding a layout in the overview:
add_filter( 'dfbm_no_posts_html', function() { return dfbmControllerBlogposts::getLayoutHtml( 7 ); });How can I display the respective terms on the archive pages?
[dfbm-term _i=”0″ _address=”1.0.0.0.5.0″ /][dfbm-term _i=”1″ _address=”1.0.0.0.5.1″ /]Why is there the module “Divi – Filterable Blog Module Light”?
Occasionally there were display problems with the settings in the Pagebuilder. This seems to be due to a performance problem. Divi offers with the latest updates a lot of possibilities to customize fonts and buttons. That’s great, but it leads to extensive Page Builder templates when many fonts are used. “Divi – Filterable Blog Module” offers a lot of settings and this should stay that way. However, it is important that everyone can use these great features. That’s why I introduced a second module: “Divi – Filterable Blog Module Light.” It offers exactly the same possibilities, but the fonts and buttons can only be adjusted with CSS rules in the CSS boxes under the tab “Advanced,” or in an external stylesheet. This made it possible to significantly reduce the size of the resulting template ( almost 75% ) and to use it in development environments with lower performance also. It is always advisable to try the normal module first. If there are no display problems, it is not necessary to use the “light module.” Please note that these performance problems only occurred in the backend, where all modules are bound to the templates to configure them in the Page Builder.Can I translate “Divi – Filterable Blog Module” into my language?
Sure. “Divi – Filterable Blog Module” is translation ready. You can use PoEdit or a Plugin like Loco Translate. You can find the required pot file under the following path: “/divi-filterable-blog-module/assets/lang/divi-filterable-blog-module.pot”.How to begin?
You have a step-by-step guide in the toggle “Video Tutorials”. Here is a step by step explanation of how to use “Divi – Filterable Blog Module” best for you. We wish you much success and, above all, have fun with the many new possibilities! With this information in your mind, let’s start now!
Exclusive only at the Elegant Marketplace
“Divi – Filterable Blog Module” is exclusively available on the Elegant Marketplace. Buy it once and use it in all your projects. Get it now!
Video Tutorials
*Please note that after clicking on one of these links, the videos will open in a new tab on YouTube.
01 – “Divi – Filterable Blog Module” – Introduction
02 – “Divi – Filterable Blog Module” – Settings
03 – “Divi – Filterable Blog Module” – Woo settings
Extended Implementation
Here you can see for example how to combine “Divi – Filterable Blog Module” with the free plugin “Events Manager“:
Combine Event Manager with DFBM
// Combine Event Manager with "Divi – Filterable Blog Module" by changing the $query_args
add_filter( 'dfbm_query_args_output', function( $query_args )
{
if ( 'event' == $query_args['post_type'] )
{
$query_args['meta_query'] =
[
'relation' => 'AND',
'date' =>
[
'key' => '_event_start_date',
'value' => date( "Y-m-d" ),
'compare' => '>=',
'type' => 'DATE'
],
'time' =>
[
'key' => '_event_start_time',
],
];
$query_args['orderby'] =
[
'date' => 'ASC', // DESC
'time' => 'ASC', // DESC
];
} // end if
return $query_args;
});
// Show event date and time in "Divi – Filterable Blog Module" before the meta data
if ( false === strpos( $_SERVER['REQUEST_URI'], 'wp-admin' ) )
{
add_action( 'dfbm_post_meta_before', function( $post, $featured )
{
printf(
'<p class="post-meta event-time">From %1$s until %2$s</p>',
DateTime::createFromFormat('Y-m-d', get_post_meta( $post->ID, '_event_start_date', true ) )->format( 'd-m-Y' ),
DateTime::createFromFormat('Y-m-d', get_post_meta( $post->ID, '_event_end_date', true ) )->format( 'd-m-Y' )
// get_post_meta( $post->ID, '_event_start_time', true ) // get the start time
// get_post_meta( $post->ID, '_event_end_time', true ) // get the end time
);
}, 10, 2 );
} // end if
PHP Hooks
This action- and filter-hooks are available:
/**
* Re-install all default archive layouts: "DFBM-Search", "DFBM-Author" etc.
*
* Open your Divi layout directory. Then uncomment the following function and reload your layout directory once. Comment out the function again and reload the layout directory again. You can also install the layouts from the JSON files inside "/helpers/layouts/"
*
* @since 1.0.6
*/
delete_option( 'dfbm_layouts_added' );
/**
* Determine the post types of search results when the search archive is activated
*
* The default is set to [ 'post' ]
*
* @param array $postTypes
*
* @return array $postTypes
*
* @since 1.0.6
*/
add_filter( 'dfbm_set_search_posttypes', function( $postTypes )
{
return [ 'post', 'project' ];
});
/**
* Determine the post types of author results when the author archive is activated
*
* The default is set to [ 'post' ]
*
* @param array $postTypes
*
* @return array $postTypes
*
* @since 1.0.6
*/
add_filter( 'dfbm_set_author_posttypes', function( $postTypes )
{
return [ 'post', 'project' ];
});
/**
* Customize the query arguments before the corresponding posts are retrieved. Thus, search results can be influenced or special information for custom posttypes can be retrieved
*
* The default is the $query_args array
*
* Example: https://gist.github.com/ae1080fed54357beb1c0edc1c375ab96
*
* @param array $query_args
*
* @return array $query_args
*
* @since 1.0.6
*/
add_filter( 'dfbm_query_args_output', function( $query_args )
{
if ( 'event' == $query_args['post_type'] )
{
$query_args['orderby'] =
[
'date' => 'ASC', // DESC
'time' => 'ASC', // DESC
];
} // end if
return $query_args;
});
/**
* Determine whether the scrollbar should be hidden when scrolling
*
* The default is set to true
*
* @param boolean $bool
*
* @return boolean $bool
*
* @since 1.0.6
*/
add_filter( 'dfbm_hide_scrollbar', '__return_false' );
/**
* Determine the width of the images to be used for the post items
*
* The default is set to 1080 for the full-width layout and 400 for the masonry-layout
*
* To find out the correct size, look in your uploads folder for the available sizes of the images eg: "image-name-300x169.(jpg/png)".
"300x169" is the size created by WordPress, where 300 is the width and 169 is the height.
*
* @param int $width
*
* @return int $width
*
* @since 1.0.6
*/
add_filter( 'dfbm_blog_image_width', function( $width )
{
return 660;
});
/**
* Determine the height of the images to be used for the post items
*
* The default is set to 675 for the full-width layout and 250 for the masonry-layout
*
* To find out the correct size, look in your uploads folder for the available sizes of the images eg: "image-name-300x169.(jpg/png)".
"300x169" is the size created by WordPress, where 300 is the width and 169 is the height.
*
* @param int $height
*
* @return int $height
*
* @since 1.0.6
*/
add_filter( 'dfbm_blog_image_height', function( $height )
{
return 350;
});
/**
* Determine the separator for the meta information in the post items
*
* The default is set to ' | '
*
* @param string $separator
*
* @return string $separator
*
* @since 1.0.6
*/
add_filter( 'dfbm_meta_separator', function( $separator )
{
return ' » ';
});
/**
* Determine the separator for the category text filter
*
* The default is set to ' / '
*
* @param string $separator
*
* @return string $separator
*
* @since 1.0.6
*/
add_filter( 'dfbm_filter_separator', function( $separator )
{
return ' » ';
});
/**
* Determine whether the suffix when the words of the post content are limited
*
* The default is set to '...'
*
* @param string $suffix
*
* @return string $suffix
*
* @since 1.0.6
*/
add_filter( 'dfbm_limit_wordcount_suffix', function( $suffix )
{
return '..';
});
/**
* Determine whether short codes should be extracted from the post item contents
*
* The default is set to true
*
* @param boolean $bool
*
* @return boolean $bool
*
* @since 1.0.6
*/
add_filter( 'dfbm_strip_shortcodes', function( $bool )
{
return false;
});
/**
* Determine whether plain urls should be extracted from the post item contents
*
* The default is set to true
*
* @param boolean $bool
*
* @return boolean $bool
*
* @since 1.0.6
*/
add_filter( 'dfbm_strip_out_plain_url', function( $bool )
{
return false;
});
/**
* Specify the maximum viewport width from which the maximum number of columns is forced. This can be helpful if you specified a high width in the theme customizer
*
* The default is set to 1080
*
* @param int $width
*
* @return int $width
*
* @since 1.0.6
*/
add_filter( 'dfbm_column_collapse_max_width', function( $width )
{
return 1200;
});
/**
* Add additional classes to the container for the filterable blogs to add dynamic CSS rules or JavaScript commands
*
* The default is set to ''
*
* @param string $class
*
* @return string $class
*
* @since 1.0.6
*/
add_filter( 'dfbm_additional_class', function( $class )
{
global $post;
if ( 55 == $post->ID )
$class = ' something';
return $class;
});
/**
* These are different action hooks that can be used to add additional content to the different post items. The hook names should be self-explanatory. The output is buffered, so you need to echo it out
*
* @param object $post
*
* @param boolean $featured
*
* @since 1.0.6
*/
add_action( 'dfbm_post_meta_before', function( $post, $featured )
{
// check $post and / or $featured
printf( '<p class="post-meta my-class">%1$s</p>', $something );
echo $somethingElse;
});
add_action( 'dfbm_post_title_before', function( $post, $featured )
{
// check $post and / or $featured
printf( '<p class="post-meta my-class">%1$s</p>', $something );
echo $somethingElse;
});
add_action( 'dfbm_posts_content_before', function( $post, $featured )
{
// check $post and / or $featured
printf( '<p class="post-meta my-class">%1$s</p>', $something );
echo $somethingElse;
});
add_action( 'dfbm_posts_content_after', function( $post, $featured )
{
// check $post and / or $featured
printf( '<p class="post-meta my-class">%1$s</p>', $something );
echo $somethingElse;
});
add_action( 'dfbm_posts_bottom_after', function( $post, $featured )
{
// check $post and / or $featured
printf( '<p class="post-meta my-class">%1$s</p>', $something );
echo $somethingElse;
});
/**
* Determine whether or not the ID of the posts is to be displayed in a separate column in the posts overview in the backend
*
* The default is set to true
*
* @param boolean $bool
*
* @return boolean $bool
*
* @since 1.0.6
*/
add_filter( 'dfbm_id_to_column', function( $bool )
{
return false;
});
/**
* Determine whether the content of posts should be checked for modul shortcodes first, before styles and scripts are anchored
*
* The default is set to true
*
* @param boolean $bool
*
* @return boolean $bool
*
* @since 1.0.6
*/
add_filter( 'dfbm_check_content_for_enqueue', function( $bool )
{
return false;
});
/**
* Determine whether to check that the archive templates are used or not
*
* The default is set to true
*
* @param boolean $bool
*
* @return boolean $bool
*
* @since 1.0.6
*/
add_filter( 'dfbm_use_archive_templates', function( $bool )
{
return false;
});
/**
* Determine the lifetime of the alternative nonces created when caching plugins are enabled to prevent errors in AJAX output
*
* The default is set to 600 seconds
*
* @param int $length
*
* @return int $length
*
* @since 1.0.6
*/
add_filter( 'dfbm_alt_nonce_life', function( $length )
{
return 1200;
});
/**
* Change the permissions of users who can change the archive layout default settings
*
* The default is set to 'edit_posts'
*
* @since 1.0.6
*/
add_filter( 'dfbm_edit_archive_capability', function( $capability )
{
return 'administrator';
});
/**
* Determine if the WooCommerce breadcrumb is hidden
*
* The default is set to false
*
* @param boolean $bool
*
* @return boolean $bool
*
* @since 1.0.6
*/
add_filter( 'dfbm_hide_woocommerce_breadcrumb', function( $bool )
{
return true;
});
/**
* Determine which template to use to display the archive layouts
*
* Check /divi-filterable-blog-module/includes/controller/view.php for this
*
* @param string $templatePath
*
* @param string $template
*
* @return string $templatePath
*
* @since 1.0.6
*/
add_filter( 'woocommerce_breadcrumb_home_url', function( $templatePath, $template )
{
// check $template and do something with $templatePath
return $templatePath;
}, 10, 2 );
/**
* Edit the WooCommerce breadcrumb default arguments
*
* Check /divi-filterable-blog-module/includes/controller/blogposts.php for this
*
* @param array $args
*
* @return array $args
*
* @since 1.0.6
*/
add_filter( 'woocommerce_breadcrumb_defaults', function( $args )
{
// do something with $args
return $args;
});
/**
* Edit the WooCommerce breadcrumb base link
*
* Check /divi-filterable-blog-module/includes/controller/blogposts.php for this
*
* @param string $link
*
* @return string $link
*
* @since 1.0.6
*/
add_filter( 'woocommerce_breadcrumb_home_url', function( $link )
{
// do something with $link
return $link;
});
/**
* Edit the WooCommerce "Add to cart" link arguments before the link creation
*
* Check /divi-filterable-blog-module/includes/controller/blogposts.php for this
*
* @param array $args
*
* @return array $args
*
* @since 1.0.6
*/
add_filter( 'woocommerce_loop_add_to_cart_args', function( $args )
{
// do something with $args
return $args;
});
/**
* Edit the WooCommerce "Add to cart" link before the output
*
* Check /divi-filterable-blog-module/includes/controller/blogposts.php for this
*
* @param string $link
*
* @return string $link
*
* @since 1.0.6
*/
add_filter( 'woocommerce_loop_add_to_cart_link', function( $link )
{
// do something with $link
return $link;
});
/**
* There are more hooks in the template for the archive pages to add content, etc. Please open the template for it and look at the different possibilities.
*
* Check /divi-filterable-blog-module/includes/view/template.php
*
*/Troubleshooting
I would like to use the module more than once in a page, but this does not work. Why?
First of all, you’re right with your assumption that you can only use it once on each page. Due to the complexity of the plugin, however, it doesn’t make sense to use it more than once, as this would lead to performance losses.
The plugin was created with the background to provide complex settings for custom feeds. And if I may believe the feedback from other users, then I think it does very well.
If you want a more fancy look, I recommend combining it with the normal blog module, cause this needs lower performance.
Can I use the Divi Visual Pagebuilder?
No, not at the moment. Unfortunately, third-party plugins are not supported from Divi for the Visual Builder.
What means an error like: “Parse error: syntax error, unexpected ‘[‘, expecting ‘)’ ?
This indicates that you are using a PHP version lower than PHP 5.6. Please note the requirements on the product page. At least PHP 5.6++ is required, but it is highly recommended to use PHP 7++. It has much more safety and an enormous performance boost.
After selecting the module, the screen remains white and the module settings do not open
There are several reasons for this. If this happens to you with the normal module then try the “Light”-module again. Above you can read more about the difference.
If that doesn’t help, please open your browser developer tools and go to the “Console” tab. Type in the following command and confirm it with “Enter”:
Snippet to clear the localStorage:
localStorage.clear();
It will then appear “undefined” and that’s a good thing because now your localStorage has been emptied and you force Divi to reload the module templates. To be sure, also delete your browser cache and try again.
If this does not help, please check your browser’s JavaScript Console for errors. If there is an error with something that occurs with “left-hand assignment”, you have probably registered a custom post type that does not meet the requirements for a clean operation with DFBM. In this case, make sure that categories and tags are configured for all your custom post types. Furthermore, all category-slugs must contain “cat” and all tag-slugs must contain “tag”. These must only be included in their slugs, not in their names.
If this does not help, please turn on your “debug.log” and send us the support form if you can find errors. With the following linked snippet, you can activate the “debug.log” and write it directly to your “wp-content” folder. After activating you only need to visit the pages where the error occurs and then check if you see any errors: Gist
It is also helpful to turn off all other plugins and check if the error persists. If so, change the theme to the default Divi theme. This will allow you to identify any conflict with your Childtheme. If the error does not occur any more, activate one after the other to find out where the error comes from.
Pre-Purchase Questions DFBM
Divi is a registered trademark of Elegant Themes, Inc. This website is not affiliated with nor endorsed by Elegant Themes.