Documentation for “Posts – Custom Post Type” Element in Custom Post Type UX Builder Plugin for Flatsome Theme

Overview

This document provides detailed information about the “Posts – Custom Post Type” element of the Custom Post Type UX Builder Plugin for the Flatsome theme. This element allows users to display a list of posts from a custom post type. Developers can further customize the display by using hooks and filters provided by the plugin.

Key Features

• Custom UX Element: “Posts – Custom Post Type”
• Customizable Filters: Use element_key to define unique behaviors for each instance of the element.
• Hook Integration: Modify the query arguments using post_type_uxb_list_posts_args filter.

Usage

1. Adding the Custom Element:
   • Open the UX Builder.
   • Add the “Posts – Custom Post Type” element to your layout.
2. Setting Element Attributes:
   • Configure the element settings as needed.
   • Define the element_key attribute to apply specific filters.

Customization

Developers can customize the query arguments by hooking into the post_type_uxb_list_posts_args filter. Below is an example of how to use this filter to modify the query based on the element_key.

function modify_uxb_list_posts_args( $attrs, $args ) {
    $date_now = date('Y-m-d H:i:s');

    if ($attrs['element_key'] == 'filter_by_start_date' ) {
        $args['meta_query'] = array(
            array(
                'key'     => 'start_date', // Custom field key, can be an ACF field
                'compare' => '<=',
                'value'   => $date_now,
                'type'    => 'DATETIME',
            ),
        );
    }

    if ($attrs['element_key'] == 'filter_by_end_date' ) {
        $args['meta_query'] = array(
            array(
                'key'     => 'end_date', // Custom field key, can be an ACF field
                'compare' => '>=',
                'value'   => $date_now,
                'type'    => 'DATETIME',
            ),
        );
    }

    // Additional custom filters can be added here using the element_key

    return $args;
}
add_filter( 'post_type_uxb_list_posts_args', 'modify_uxb_list_posts_args', 10, 2 );

Explanation

• Hook:post_type_uxb_list_posts_args
  • This hook allows you to filter the query arguments used by the “Posts – Custom Post Type” element.
• Function:modify_uxb_list_posts_args
  • This function checks the element_key attribute and modifies the query arguments accordingly.
• Conditions:
  • filter_by_start_date: Adds a meta query to include posts with a custom field start_date (which can be an ACF field) less than or equal to the current date and time.
  • filter_by_end_date: Adds a meta query to include posts with a custom field end_date (which can be an ACF field) greater than or equal to the current date and time.
• Filter Application:
  • add_filter( 'post_type_uxb_list_posts_args', 'modify_uxb_list_posts_args', 10, 2 );
  • This line registers the filter with a priority of 10 and specifies that the function accepts 2 parameters.

Additional Information

• Element Attributes:
  • element_key: A unique key that allows developers to define specific behaviors for different instances of the “Posts – Custom Post Type” element.
• Filters:
  • Developers can use the post_type_uxb_list_posts_args filter to modify the WP_Query arguments based on the element_key.

This documentation provides a basic overview and an example of how to extend the “Posts – Custom Post Type” element. For further customization and advanced usage, refer to the WordPress Codex and Flatsome theme documentation.