Adding sorting to your Divi Blog Module based on a custom field created in Advanced Custom Fields (ACF) can significantly enhance the user experience on your site. In this post, we'll guide you step-by-step through sorting the posts in the Divi Blog Module by an ACF field, specifically sorting events by date.
Let's start by looking at a practical example. Below are screenshots illustrating the sorting feature:
- Before Sorting: Shows three event posts (Christmas, Halloween, and Black Friday) sorted by publish date (newest to oldest).
- After Sorting: Shows the same event posts sorted by an ACF date field (earliest to latest).
To begin, set up a date field in your ACF field group. We'll use a field with the key "event_date", like so:
Next, assign the new custom field a date in each of your posts, for example:
Now add the following PHP code which initializes the sorting of the Divi Blog Module posts based on the ACF event_date field:
add_filter('init', 'db_acf_sort_initialize_blog_module_sorting');
function db_acf_sort_initialize_blog_module_sorting() {
add_filter('et_pb_module_shortcode_attributes', 'db_acf_sort_add_sorting_filter', 10, 3);
add_filter('et_pb_blog_shortcode_output', 'db_acf_sort_remove_sorting_filter', 10, 2);
}
function db_acf_sort_add_sorting_filter($attrs, $content, $module_slug) {
if ($module_slug !== 'et_pb_blog') {
return $attrs;
}
add_filter('pre_get_posts', 'db_acf_sort_sort_blog_module_posts_by_acf', 10, 1);
return $attrs;
}
function db_acf_sort_remove_sorting_filter($output, $attrs) {
remove_filter('pre_get_posts', 'db_acf_sort_sort_blog_module_posts_by_acf', 10);
return $output;
}
function db_acf_sort_sort_blog_module_posts_by_acf($query) {
$acf_field_name = 'event_date'; // Change this to your ACF field's name
$query->set('meta_key', $acf_field_name);
$query->set('orderby', 'meta_value');
$query->set('order', 'ASC'); // ASC for earliest events first, use DESC for reverse
return $query;
}Related Post: Adding PHP to the Divi Theme
You can add the provided PHP code into the functions.php file of your child theme to ensure the modifications are preserved even after theme updates. Alternatively, you can use a plugin like Code Snippets to manage and add custom code to your site without editing the theme files directly. This approach also makes it easier to enable, disable, or modify the snippets at any time.
To ensure it works on with your ACF field, change 'event_date' to your ACF field name at the point shown in the code, and if necessary, change the sort order from ASC to DESC to reverse the results.
Explanation:
- Initialization: The
db_acf_sort_initialize_blog_module_sortingfunction sets up the necessary filters to sort the Blog Module. - Adding the Sorting Filter: The
db_acf_sort_add_sorting_filterfunction adds a filter to modify the main query for the Blog Module. - Sorting Logic: The
db_acf_sort_sort_blog_module_posts_by_acffunction sets the query to sort posts by theevent_dateACF field. - Removing the Sorting Filter: The
db_acf_sort_remove_sorting_filterfunction ensures that the sorting filter is removed after the Blog Module query is complete, avoiding any unintended effects on other queries.
Conclusion
By following these steps, you'll be able to sort your Divi Blog Module based on any ACF field, providing a more tailored and organized display of your content.
0 Comments