Add custom attributes to the DOM using add_filter?

Asked on August 29, 2016 in Customization.

I added some custom properties to the widget’s ‘advanced’ section using ‘layerswp_advanced_component_args’.  The reason is, that
a) I don’t want to subclass/overwrite the affected widgets
b) I will finally put that modification into an extension, so I can use the feature in other themes as well.

Now I want it to get echoed to the DOM using the same technique, but I couldn’t find any documentation or example for this…

Is there a way to add my attributes to the proper node using a filter or action?

tiptronic Power User
Reply
  • Possible Answers to Your Question:

  • 2 Answer(s)
    Answered on August 30, 2016.

    Sure Andy,

    Each widget has a couply of actions in them, for example:

    <?php do_action( 'layers_before_content_widget_inner', $this, $instance ); ?>

    Then you can add a function like this to add a div with the data:

    add_action( 'layers_before_content_widget_inner' , my_widget_data, 10, 3 );
    function my_widget_data( $widget_this, $item_instance = array(), $widget_instance = array()){
    // Some code here
    }
    Reply
    Answered on August 30, 2016.

    Hi Marc,

    thx – but I think it’s unfortunately not that easy since I want to add arbitrary attributes to each element.

    Here’s what I need in the end:

    
    <div id="myid" class="myclass" data-animations="slideInUp">
    
    

    The problem is, that (e.g. on the content.php widget) the template looks like this:

    
    <div id="<?php echo $widget_id; ?>-<?php echo $column_key; ?>" class="<?php echo esc_attr( $classes ); ?> " >
    
    

    …so there’s no room to add other properties to the node (without hacking)..

    To me it seems, the fix is *very* easy:

    There’s already a filter to get the right ‘customclasses’:

    
    $classes = apply_filters( 'layers_content_widget_item_class', $classes, $this, $item_instance );
    
    

    I added this simple line(s) below:

    
    $attributes = apply_filters( 'layers_content_widget_item_attributes', $classes, $this, $item_instance );
    
    ...
    
    <div id="<?php echo $widget_id; ?>-<?php echo $column_key; ?>" class="<?php echo esc_attr( $classes ); ?> " <?php echo $attributes; ?> >
    
    

    Done.

    Unfortunately I must add this to any widget I plan to add custom properties to (read: ‘all’).

    Wouldn’t that make a nice enhancement of the current layerswp-widgets?

    Best

    andy

    I realized that when I had typed my reply. I like your solution, I’ll consider it for the next release it’ll add a lot of customizability to the widgets.

    on August 30, 2016.

    If you need some help, code, ideas, whatever – just let me know… Unfortunately I can’t make pull-requests on GitHub, so it’s on you 😉

    andy

    on August 31, 2016.

    Hi Marc,

    any word on this? With the 1.6 update I had to merge my code again, which is (obviously) pita 😉

    Cheers

    andy

    on December 16, 2016.
    Reply