Overview

Custom Attributes for Post Widget

Custom Attributes for Post Widget

Overview:
The plugin provides filters to customize HTML attributes on the wrapper and individual posts in the Posts widget. You can add classes, IDs, data attributes, and ARIA attributes programmatically, scoped by the widget’s Query ID.

Hook Details

Hook Type Filter Hook
Hook Names bpfwe/post_wrapper_attr/{$query_id}
bpfwe/post_wrapper_inner_attr/{$query_id}
bpfwe/post_attr/{$query_id}
Affects HTML attributes for outer wrapper, inner wrapper, and post containers

Hook Arguments

Argument Type Description
attributes array Associative array of attributes (class, id, data-*, etc.).
widget \Elementor\Widget_Base The widget instance rendering the posts.
context string Context string, e.g. wrapper, inner, or post.

Setting Up a Custom Filter

In your widget settings, assign a unique Query ID under Content > Query > Query ID. This ID connects your widget with the custom attribute filters.

For example, if you use my_custom_query as the Query ID, the hooks you can use are:

  • bpfwe/post_wrapper_attr/my_custom_query
  • bpfwe/post_wrapper_inner_attr/my_custom_query
  • bpfwe/post_attr/my_custom_query

Using the Custom Filter

Add your filter logic in your theme’s functions.php or a custom plugin. Example format:

add_filter( 'bpfwe/post_wrapper_attr/{$query_id}', function( $attributes, $widget, $context ) {
    // Modify attributes here
    return $attributes;
}, 10, 3 );

Examples

Example 1: Add Custom Classes and ID to Wrapper

add_filter( 'bpfwe/post_wrapper_attr/my_custom_query', function( $attributes, $widget, $context ) {
    $attributes['class'][] = 'custom-wrapper extra-style';
    $attributes['id'] = 'wrapper-id';
    return $attributes;
}, 10, 3 );

Example 2: Add Data Attributes to Inner Wrapper

add_filter( 'bpfwe/post_wrapper_inner_attr/my_custom_query', function( $attributes, $widget, $context ) {
    $attributes['data-filter'] = 'category-2';
    $attributes['aria-label'] = 'Custom Widget';
    return $attributes;
}, 10, 3 );

Example 3: Highlight Specific Posts

add_filter( 'bpfwe/post_attr/my_custom_query', function( $attributes, $widget, $context ) {
    $post_id = get_the_ID();
    $attributes['class'][] = 'single-post highlight-' . $post_id;
    $attributes['data-post-type'] = 'featured';
    $attributes['aria-hidden'] = 'true';
    return $attributes;
}, 10, 3 );

Notes

  • Replace my_custom_query with your actual Query ID.
  • get_the_ID() can be used to retrieve the current post ID in bpfwe/post_attr/
  • All attributes are automatically escaped before output.
  • You can add multiple classes by pushing into the class array.
  • These hooks allow you to integrate with CSS, JS, or accessibility enhancements.